/* ============================================================
   BLOCS – ZUSAMMENGEFÜHRTE WEBSITE-CSS
   CSS 1: Bestehende Website – unverändert übernommen
   CSS 2: Intro – nur Markdown-Escaping bereinigt und
          Selektoren auf .intro-show begrenzt

   WICHTIG: Intro-Seite ohne Navigations-Bloc anlegen.
   Der Weiter-Button erhält seinen Seitenlink in Blocs.
   ============================================================ */

/* =============== CSS 1: BESTEHENDE WEBSITE =============== */

/* ==========================================================
   NAVIGATION #nav
   ========================================================== */

#nav {
    position: relative;
    z-index: 1000;

    /*
     WICHTIG:
     visible, damit die Dropdown-Menüs nach unten aus
     dem Navigations-Bloc herausragen können.
    */
    overflow: visible;

    /*
     Muss größer als die normale Höhe der Navigation sein.
    */
    max-height: 500px;

    transition:
        max-height 0.55s cubic-bezier(.4, 0, .2, 1),
        opacity 0.35s ease,
        transform 0.55s cubic-bezier(.4, 0, .2, 1);
}


/* ==========================================================
   NAVIGATION AUSGEBLENDET
   ========================================================== */

#nav.nav-versteckt {
    max-height: 0 !important;
    min-height: 0 !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    transform: translateY(-20px);

    opacity: 0;

    /*
     Erst im ausgeblendeten Zustand verstecken wir
     überstehenden Inhalt.
    */
    overflow: hidden !important;

    pointer-events: none;
}


/* ==========================================================
   BLOCS / BOOTSTRAP NAVIGATION
   Dropdowns dürfen nicht abgeschnitten werden
   ========================================================== */

#nav .navbar,
#nav .navbar-collapse,
#nav .nav,
#nav .navbar-nav,
#nav .dropdown {
    overflow: visible !important;
}


/* ==========================================================
   DROPDOWN MENÜ
   ========================================================== */

#nav .dropdown-menu {
    position: absolute !important;

    z-index: 10000 !important;

    /*
     Sicherheitshalber keine Begrenzung des Dropdowns.
    */
    overflow: visible !important;
}


/* ==========================================================
   KLEINER BUTTON ZUM WIEDEREINBLENDEN
   ========================================================== */

#nav-wieder-ein {
    position: fixed !important;

    top: 14px;
    right: 18px;

    width: 38px;
    height: 38px;

    padding: 0;
    margin: 0;

    border: 1px solid rgba(173, 151, 111, 0.35);
    border-radius: 50%;

    background: rgba(30, 30, 30, 0.38);

    cursor: pointer;

    /*
     Extrem hoher z-index, damit der Button
     immer erreichbar bleibt.
    */
    z-index: 2147483647 !important;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-8px);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}


/* ==========================================================
   BUTTON SICHTBAR
   ========================================================== */

#nav-wieder-ein.sichtbar {
    opacity: 0.55;

    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);
}


/* ==========================================================
   BUTTON HOVER
   ========================================================== */

#nav-wieder-ein:hover {
    opacity: 1;

    background: rgba(30, 30, 30, 0.75);

    border-color: rgba(173, 151, 111, 0.8);
}


/* ==========================================================
   CHEVRON IM BUTTON
   ========================================================== */

#nav-wieder-ein::before {
    content: "";

    position: absolute;

    width: 9px;
    height: 9px;

    left: 50%;
    top: 45%;

    border-right: 2px solid #ad976f;
    border-bottom: 2px solid #ad976f;

    transform:
        translate(-50%, -50%)
        rotate(45deg);
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    #nav-wieder-ein {
        top: 10px;
        right: 10px;

        width: 34px;
        height: 34px;
    }


    #nav-wieder-ein::before {
        width: 8px;
        height: 8px;
    }

}

.hyphenate {
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
}

.suchbereich {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.suchbereich .bloc-content {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}





@media (max-width: 767px) {

  /* Ursprüngliche Bildunterschriften ausblenden */
  .history-carousel .carousel-caption {
    display: none !important;
  }

  .history-carousel .carousel-item {
    position: relative;
  }

  /* Info-Symbol unten rechts */
  .history-carousel .photo-info {
    position: absolute;
    bottom: 15px;
    right: 15px;
    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;
    padding: 0;

    border: 1px solid #ad976f;
    border-radius: 50%;
    background: rgba(30, 30, 30, 0.85);
    color: white;

    font-size: 25px;
    cursor: pointer;
  }

  .history-carousel .photo-info.active {
    background: #ad976f;
  }

  /* Beschreibung außerhalb des Carousels */
  .photo-description-panel {
    display: none;
    padding: 20px;
    background: #252525;
    color: #fff;
    font-size: 15px;
    line-height: 1.6;
  }

  .photo-description-panel.open {
    display: block;
  }
}

@media (min-width: 768px) {
  .history-carousel .photo-info,
  .photo-description-panel {
    display: none !important;
  }
}


/* =====================================================
   BLOCS-SUCHE: WEISSEN BALKEN BEIM SCHLIESSEN ENTFERNEN
   ===================================================== */

/* Suchbereich im geschlossenen Zustand */

#suchleiste.toggled-item-hidden {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    overflow: hidden !important;
    visibility: hidden;
}

/* Innenabstände nur im geschlossenen Zustand entfernen */

#suchleiste.toggled-item-hidden > .container,
#suchleiste.toggled-item-hidden > .container-bloc-sm {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Geöffnete Suche */

#suchleiste:not(.toggled-item-hidden) {
    overflow: visible;
    visibility: visible;
}


ul.dropdown-menu,
ul.dropdown-menu.show {
    background: #242424 !important;
    border: none !important;
    box-shadow: none !important;
}

/* =====================================================
   KARTENSTAPEL
   ===================================================== */

.card-stack-wrapper {
    position: relative;
    width: 100%;
    min-height: 700px;
    overflow: visible !important;
}

.card-stack {
    position: relative;
    width: 380px;
    height: 620px;
    margin: 50px auto;
    overflow: visible !important;
}


/* =====================================================
   EINZELNE KARTE
   ===================================================== */

.stack-card {
    position: absolute;
    top: 0;
    left: 50%;

    width: 280px;
    height: 520px;

    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);

    cursor: pointer;
    transform-origin: center bottom;

    transition:
        transform 0.45s cubic-bezier(.2, .8, .2, 1),
        opacity 0.35s ease,
        box-shadow 0.35s ease;
}


/* =====================================================
   BILD
   ===================================================== */

.stack-card > img {
    display: block;

    width: 100% !important;
    height: 300px !important;

    object-fit: cover;

    margin: 0 !important;
    padding: 0 !important;
}


/* =====================================================
   WEISSER INHALTSBEREICH
   ===================================================== */

.stack-card > .card-content {
    box-sizing: border-box;

    width: 100%;
    height: 220px;

    padding: 14px 16px 16px;

    background: #ffffff;

    display: flex;
    flex-direction: column;

    overflow: visible;
}


/* =====================================================
   ÜBERSCHRIFT
   ===================================================== */

.stack-card .card-content h1,
.stack-card .card-content h2,
.stack-card .card-content h3,
.stack-card .card-content h4 {
    margin: 0 0 12px 0 !important;
    padding: 0 !important;

    line-height: 1.1;
}


/* =====================================================
   TEXT
   ===================================================== */

.stack-card .card-content p {
    margin: 0 !important;
    padding: 0 !important;

    line-height: 1.25;
}


/* =====================================================
   BUTTON
   ===================================================== */

.stack-card .card-content .btn {
    display: inline-block !important;

    margin-top: auto !important;
    margin-bottom: 0 !important;

    align-self: center;

    flex-shrink: 0;
}


/* =====================================================
   HOVER
   ===================================================== */

.stack-card:hover {
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.25);
}


/* =====================================================
   SMARTPHONE
   ===================================================== */

@media (max-width: 575px) {

    .card-stack-wrapper {
        min-height: 650px;
    }

    .card-stack {
        width: 100%;
        max-width: 340px;
        height: 570px;
        margin: 30px auto;
    }

    .stack-card {
        width: 260px;
        height: 500px;
    }

    .stack-card > img {
        height: 270px !important;
    }

    .stack-card > .card-content {
        height: 230px;
        padding: 12px 14px 14px;
    }
}

/* =====================================================
   KARTENSTAPEL – LANDSCAPE VERSION
   ===================================================== */


/* Äußerer Wrapper
----------------------------------------------------- */

.landscape-card-stack-wrapper {
    position: relative;

    width: 100%;
    min-height: 650px;

    overflow: visible !important;
}


/* Eigentlicher Kartenstapel
----------------------------------------------------- */

.landscape-card-stack {
    position: relative;

    width: 560px;
    height: 570px;

    margin: 50px auto;

    overflow: visible !important;
}


/* =====================================================
   EINZELNE KARTE
   ===================================================== */

.landscape-stack-card {
    position: absolute;

    top: 0;
    left: 50%;

    width: 440px;
    height: 470px;

    background: #ffffff;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.18);

    cursor: pointer;

    transform-origin: center bottom;

    transition:
        transform 0.45s cubic-bezier(.2, .8, .2, 1),
        opacity 0.35s ease,
        box-shadow 0.35s ease;
}


/* =====================================================
   LANDSCAPE-BILD – 16:9
   ===================================================== */

.landscape-stack-card > img {
    display: block;

    width: 100% !important;
    height: 248px !important;

    object-fit: cover;

    margin: 0 !important;
    padding: 0 !important;
}


/* =====================================================
   WEISSER INHALTSBEREICH
   ===================================================== */

.landscape-stack-card > .landscape-card-content {
    box-sizing: border-box;

    width: 100%;
    height: 222px;

    padding: 18px 22px 18px;

    background: #ffffff;

    display: flex;
    flex-direction: column;

    overflow: visible;
}


/* =====================================================
   ÜBERSCHRIFT
   ===================================================== */

.landscape-stack-card .landscape-card-content h1,
.landscape-stack-card .landscape-card-content h2,
.landscape-stack-card .landscape-card-content h3,
.landscape-stack-card .landscape-card-content h4 {

    margin: 0 0 12px 0 !important;
    padding: 0 !important;

    line-height: 1.1;
}


/* =====================================================
   TEXT
   ===================================================== */

.landscape-stack-card .landscape-card-content p {

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1.3;
}


/* =====================================================
   BUTTON
   ===================================================== */

.landscape-stack-card .landscape-card-content .btn {

    display: inline-block !important;

    margin-top: auto !important;
    margin-bottom: 0 !important;

    align-self: flex-end;

    flex-shrink: 0;
}


/* =====================================================
   HOVER
   ===================================================== */

.landscape-stack-card:hover {

    box-shadow:
        0 15px 38px rgba(0, 0, 0, 0.25);
}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 767px) {

    .landscape-card-stack-wrapper {
        min-height: 610px;
    }

    .landscape-card-stack {
        width: 100%;
        max-width: 480px;

        height: 540px;

        margin: 40px auto;
    }

    .landscape-stack-card {
        width: 380px;
        height: 440px;
    }

    .landscape-stack-card > img {
        height: 214px !important;
    }

    .landscape-stack-card > .landscape-card-content {
        height: 226px;

        padding: 16px 19px;
    }
}


/* =====================================================
   SMARTPHONE
   ===================================================== */

@media (max-width: 575px) {

    .landscape-card-stack-wrapper {
        min-height: 540px;
    }

    .landscape-card-stack {
        width: 100%;
        max-width: 340px;

        height: 480px;

        margin: 30px auto;
    }

    .landscape-stack-card {
        width: 300px;
        height: 410px;

        border-radius: 15px;
    }

    .landscape-stack-card > img {
        height: 169px !important;
    }

    .landscape-stack-card > .landscape-card-content {
        height: 241px;

        padding: 14px 16px;
    }
}

/* =====================================================
   KARTENSTAPEL – WIDE LANDSCAPE VERSION
   Desktop: 720px breite Karte
   ===================================================== */


/* =====================================================
   ÄUSSERER WRAPPER
   Blocs-Klasse: wide-card-stack-wrapper
   ===================================================== */

.wide-card-stack-wrapper {
    position: relative;

    width: 100%;
    min-height: 680px;

    overflow: visible !important;
}


/* =====================================================
   EIGENTLICHER KARTENSTAPEL
   Blocs-Klasse: wide-card-stack
   ===================================================== */

.wide-card-stack {
    position: relative;

    width: 100%;
    max-width: 900px;
    height: 600px;

    margin: 50px auto;

    overflow: visible !important;
}


/* =====================================================
   EINZELNE KARTE
   Blocs-Klasse: wide-stack-card
   ===================================================== */

.wide-stack-card {
    position: absolute !important;

    top: 0 !important;
    left: 50% !important;

    width: 720px;
    height: 500px;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff;

    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.18);

    cursor: pointer;

    transform-origin: center bottom;

    transition:
        transform 0.45s cubic-bezier(.2, .8, .2, 1),
        opacity 0.35s ease,
        box-shadow 0.35s ease;
}


/* =====================================================
   BILD
   Desktop: 330px hoch
   ungefähr 2/3 der Kartenhöhe
   ===================================================== */

.wide-stack-card > img {
    display: block;

    width: 100% !important;
    max-width: none !important;
    height: 330px !important;

    object-fit: cover;

    margin: 0 !important;
    padding: 0 !important;
}


/* =====================================================
   WEISSER TEXTBEREICH
   Desktop: 170px hoch
   ungefähr 1/3 der Kartenhöhe
   ===================================================== */

.wide-stack-card > .wide-card-content {
    box-sizing: border-box;

    width: 100%;
    height: 170px;

    margin: 0 !important;
    padding: 16px 24px;

    background: #ffffff;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}


/* =====================================================
   ÜBERSCHRIFT
   ===================================================== */

.wide-stack-card .wide-card-content h1,
.wide-stack-card .wide-card-content h2,
.wide-stack-card .wide-card-content h3,
.wide-stack-card .wide-card-content h4 {
    margin: 0 0 8px 0 !important;
    padding: 0 !important;

    line-height: 1.1;
}


/* =====================================================
   TEXT
   ===================================================== */

.wide-stack-card .wide-card-content p {
    margin: 0 !important;
    padding: 0 !important;

    line-height: 1.25;
}


/* =====================================================
   BUTTON
   ===================================================== */

.wide-stack-card .wide-card-content .btn {
    display: inline-block !important;

    margin-top: auto !important;
    margin-bottom: 0 !important;

    align-self: flex-end;

    flex-shrink: 0;
}


/* =====================================================
   HOVER
   ===================================================== */

.wide-stack-card:hover {
    box-shadow:
        0 16px 42px rgba(0, 0, 0, 0.25);
}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 991px) {

    .wide-card-stack-wrapper {
        min-height: 590px;
    }

    .wide-card-stack {
        width: 100%;
        max-width: 700px;
        height: 520px;

        margin: 40px auto;
    }

    .wide-stack-card {
        width: 600px;
        height: 420px;
    }

    .wide-stack-card > img {
        height: 280px !important;
    }

    .wide-stack-card > .wide-card-content {
        height: 140px;

        padding: 12px 18px;
    }
}


/* =====================================================
   SMARTPHONE
   ===================================================== */

@media (max-width: 575px) {

    .wide-card-stack-wrapper {
        min-height: 470px;
    }

    .wide-card-stack {
        width: 100%;
        max-width: 340px;
        height: 420px;

        margin: 30px auto;
    }

    .wide-stack-card {
        width: calc(100% - 40px);
        max-width: 320px;

        height: 360px;

        border-radius: 15px;
    }

    .wide-stack-card > img {
        height: 240px !important;
    }

    .wide-stack-card > .wide-card-content {
        height: 120px;

        padding: 10px 13px;
    }

    .wide-stack-card .wide-card-content h1,
    .wide-stack-card .wide-card-content h2,
    .wide-stack-card .wide-card-content h3,
    .wide-stack-card .wide-card-content h4 {
        margin-bottom: 5px !important;

        line-height: 1.05;
    }

    .wide-stack-card .wide-card-content p {
        line-height: 1.15;
    }

    .wide-stack-card .wide-card-content .btn {
        margin-top: auto !important;
    }
}

/* =========================================================
   VERLEGUNGEN SHOWCASE
   WICHTIG:
   - #nav bleibt vollständig unverändert.
   - #suchleiste bleibt vollständig unverändert.
   - Kein negatives margin-top.
   - Kein position: fixed/absolute für #nav.
   ========================================================= */

.verlegungen-showcase {
    position: relative;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.verlegungen-showcase::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
    pointer-events: none;
}

.verlegungen-showcase > .container,
.verlegungen-showcase > .container-fluid {
    position: relative;
    height: 100%;
    z-index: 2;
}


/* =========================================================
   TEXTBEREICH – DESKTOP
   ========================================================= */

.verlegung-content {
    position: absolute;
    left: 5vw;
    bottom: 260px;
    width: calc(100% - 10vw);
    max-width: 650px;
    z-index: 5;
    color: white;
}

.verlegung-title {
    color: white;
    font-size: clamp(2.5rem, 5vw, 5rem);
    line-height: 1.05;
    margin-bottom: 15px;
}

.verlegung-text {
    color: white;
    font-size: clamp(1rem, 1.4vw, 1.3rem);
    line-height: 1.5;
    max-width: 600px;
    margin-bottom: 0;
}

.verlegung-button {
    margin-top: 20px;
}


/* =========================================================
   THUMBNAIL-LEISTE – DESKTOP
   ========================================================= */

.verlegung-thumbnails {
    position: absolute;
    left: 5vw;
    right: 0;
    bottom: 35px;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;

    gap: 18px;

    width: auto !important;
    max-width: none !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    padding: 20px 5vw 20px 0;

    z-index: 10;

    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: none;

    cursor: grab;
    user-select: none;
}

.verlegung-thumbnails::-webkit-scrollbar {
    display: none;
}

.verlegung-thumbnails.dragging {
    cursor: grabbing;
}

.verlegung-thumbnails .verlegung-thumb {
    display: block !important;
    flex: 0 0 220px !important;

    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    height: 140px !important;

    object-fit: cover;
    border-radius: 8px;

    opacity: 0.70;
    cursor: pointer;

    -webkit-user-drag: none;
    user-select: none;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.verlegung-thumbnails .verlegung-thumb:hover {
    opacity: 1;
    transform: scale(1.03);
}

.verlegung-thumbnails .verlegung-thumb.is-active {
    opacity: 1;
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.40);
}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 767px) {

    .verlegungen-showcase {
        min-height: 100svh;
        height: 100svh;
        background-position: center center !important;
    }

    .verlegungen-showcase > .container,
    .verlegungen-showcase > .container-fluid,
    .verlegungen-showcase > .container > .row,
    .verlegungen-showcase > .container-fluid > .row {
        height: 100%;
    }

    .verlegungen-showcase > .container > .row > [class*="col"],
    .verlegungen-showcase > .container-fluid > .row > [class*="col"] {
        position: relative;

        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: stretch !important;

        height: 100%;

        padding-left: 18px;
        padding-right: 0;
        padding-bottom: 12px;
    }

    .verlegung-content {
        position: relative !important;

        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        width: auto !important;
        max-width: none !important;

        margin: 0 18px 18px 0 !important;
        padding: 0 !important;

        flex: 0 0 auto;
        z-index: 5;
    }

    .verlegung-title {
        font-size: clamp(1.9rem, 8vw, 2.6rem);
        line-height: 1.05;

        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }

    .verlegung-text {
        font-size: 0.88rem;
        line-height: 1.35;

        max-width: none;

        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .verlegung-button {
        display: inline-block !important;
        position: relative !important;

        margin-top: 12px !important;
        margin-bottom: 0 !important;

        z-index: 6;
    }

    .verlegung-thumbnails {
        position: relative !important;

        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        width: 100% !important;
        max-width: 100% !important;

        flex: 0 0 auto;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center;

        gap: 8px;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        margin: 0 !important;
        padding: 5px 18px 5px 0 !important;

        z-index: 10;

        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        scrollbar-width: none;
    }

    .verlegungen-showcase .verlegung-thumb {
        display: block !important;

        flex: 0 0 85px !important;

        width: 85px !important;
        min-width: 85px !important;
        max-width: 85px !important;
        height: 58px !important;

        object-fit: cover;
        border-radius: 5px;

        opacity: 0.72;

        -webkit-user-drag: none;
        user-select: none;
    }

    .verlegung-thumbnails .verlegung-thumb:hover {
        transform: none;
    }

    .verlegung-thumbnails .verlegung-thumb.is-active {
        opacity: 1;
        transform: scale(1.04);
    }
}


@media (max-width: 575px) and (max-height: 700px) {

    .verlegung-content {
        margin-bottom: 12px !important;
    }

    .verlegung-title {
        font-size: 1.8rem;
        margin-bottom: 7px !important;
    }

    .verlegung-text {
        font-size: 0.82rem;
        line-height: 1.28;
    }

    .verlegung-button {
        margin-top: 8px !important;
    }

    .verlegung-thumbnails {
        gap: 7px;
    }

    .verlegung-thumbnails .verlegung-thumb {
        flex-basis: 76px !important;
        width: 76px !important;
        min-width: 76px !important;
        max-width: 76px !important;
        height: 52px !important;
    }
}

/* =============== CSS 2: INTRO-SHOW =============== */

/* ==========================================

   INTRO SHOW – GRUNDSTRUKTUR

   ========================================== */

.intro-show {

    position: relative;

    width: 100%;

    height: 100vh;

    height: 100dvh;

    background: #111;

    overflow: hidden;

    padding: 0;

    margin: 0;

}

.intro-show .intro-stack {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

}

/* ==========================================

   ALLE FOTOS – GRUNDEINSTELLUNGEN

   ========================================== */

.intro-show .intro-photo {

    position: absolute !important;

    top: 50% !important;

    left: 50% !important;

    width: min(260px, 65vw) !important;

    height: 175px !important;

    max-width: none !important;

    object-fit: cover !important;

    border: 5px solid white;

    border-radius: 3px;

    box-shadow:

        0 12px 35px rgba(0,0,0,.5);

    opacity: 0;

    transform-origin: center center;

    animation-duration: 3.5s !important;

    animation-timing-function:

        cubic-bezier(.25,.7,.25,1) !important;

    animation-fill-mode: forwards !important;

}

/* ==========================================

   ZEITLICHE ABFOLGE

   ========================================== */

.intro-show .photo-1 {

    z-index: 1;

    animation-name: introPhoto1 !important;

    animation-delay: 0s !important;

}

.intro-show .photo-2 {

    z-index: 2;

    animation-name: introPhoto2 !important;

    animation-delay: 1s !important;

}

.intro-show .photo-3 {

    z-index: 3;

    animation-name: introPhoto3 !important;

    animation-delay: 2s !important;

}

.intro-show .photo-4 {

    z-index: 4;

    animation-name: introPhoto4 !important;

    animation-delay: 3s !important;

}

.intro-show .photo-5 {

    z-index: 5;

    animation-name: introPhoto5 !important;

    animation-delay: 4s !important;

}

/* ==========================================

   BILD 1 – LINKS OBEN

   ========================================== */

@keyframes introPhoto1 {

    0% {

        opacity: 0;

        transform:

            translate(-150vw,-130vh)

            rotate(-35deg)

            scale(.7);

    }

    80% {

        opacity: 1;

        transform:

            translate(-50%,-50%)

            rotate(-7deg)

            scale(1.04);

    }

    100% {

        opacity: 1;

        transform:

            translate(-50%,-50%)

            rotate(-5deg)

            scale(1);

    }

}

/* ==========================================

   BILD 2 – RECHTS OBEN

   ========================================== */

@keyframes introPhoto2 {

    0% {

        opacity: 0;

        transform:

            translate(150vw,-130vh)

            rotate(35deg)

            scale(.7);

    }

    80% {

        opacity: 1;

        transform:

            translate(-50%,-50%)

            rotate(9deg)

            scale(1.04);

    }

    100% {

        opacity: 1;

        transform:

            translate(-50%,-50%)

            rotate(6deg)

            scale(1);

    }

}

/* ==========================================

   BILD 3 – LINKS UNTEN

   ========================================== */

@keyframes introPhoto3 {

    0% {

        opacity: 0;

        transform:

            translate(-150vw,130vh)

            rotate(-40deg)

            scale(.7);

    }

    80% {

        opacity: 1;

        transform:

            translate(-50%,-50%)

            rotate(-10deg)

            scale(1.04);

    }

    100% {

        opacity: 1;

        transform:

            translate(-50%,-50%)

            rotate(-8deg)

            scale(1);

    }

}

/* ==========================================

   BILD 4 – RECHTS UNTEN

   ========================================== */

@keyframes introPhoto4 {

    0% {

        opacity: 0;

        transform:

            translate(150vw,130vh)

            rotate(40deg)

            scale(.7);

    }

    80% {

        opacity: 1;

        transform:

            translate(-50%,-50%)

            rotate(7deg)

            scale(1.04);

    }

    100% {

        opacity: 1;

        transform:

            translate(-50%,-50%)

            rotate(4deg)

            scale(1);

    }

}

/* ==========================================

   BILD 5 – VON OBEN

   ========================================== */

@keyframes introPhoto5 {

    0% {

        opacity: 0;

        transform:

            translate(-50%,-150vh)

            rotate(-25deg)

            scale(.7);

    }

    80% {

        opacity: 1;

        transform:

            translate(-50%,-50%)

            rotate(5deg)

            scale(1.04);

    }

    100% {

        opacity: 1;

        transform:

            translate(-50%,-50%)

            rotate(-3deg)

            scale(1);

    }

}

/* ==========================================

   MOBILE ANPASSUNG

   ========================================== */

@media (max-width: 767px) {

    .intro-show .intro-photo {

        width: 200px !important;

        height: 140px !important;

    }

}

/* ==========================================

   INTRO SHOW – FOTOS 6 BIS 10

   ========================================== */

/* BILD 6 – VON LINKS */

.intro-show .photo-6 {

    z-index: 6;

    animation-name: introPhoto6 !important;

    animation-delay: 5s !important;

}

@keyframes introPhoto6 {

    0% {

        opacity: 0;

        transform:

            translate(-150vw,-50%)

            rotate(-25deg)

            scale(.7);

    }

    80% {

        opacity: 1;

        transform:

            translate(-50%,-50%)

            rotate(8deg)

            scale(1.04);

    }

    100% {

        opacity: 1;

        transform:

            translate(-50%,-50%)

            rotate(5deg)

            scale(1);

    }

}

/* ==========================================

   BILD 7 – VON RECHTS

   ========================================== */

.intro-show .photo-7 {

    z-index: 7;

    animation-name: introPhoto7 !important;

    animation-delay: 6s !important;

}

@keyframes introPhoto7 {

    0% {

        opacity: 0;

        transform:

            translate(150vw,-50%)

            rotate(30deg)

            scale(.7);

    }

    80% {

        opacity: 1;

        transform:

            translate(-50%,-50%)

            rotate(-9deg)

            scale(1.04);

    }

    100% {

        opacity: 1;

        transform:

            translate(-50%,-50%)

            rotate(-6deg)

            scale(1);

    }

}

/* ==========================================

   BILD 8 – VON UNTEN

   ========================================== */

.intro-show .photo-8 {

    z-index: 8;

    animation-name: introPhoto8 !important;

    animation-delay: 7s !important;

}

@keyframes introPhoto8 {

    0% {

        opacity: 0;

        transform:

            translate(-50%,150vh)

            rotate(20deg)

            scale(.7);

    }

    80% {

        opacity: 1;

        transform:

            translate(-50%,-50%)

            rotate(6deg)

            scale(1.04);

    }

    100% {

        opacity: 1;

        transform:

            translate(-50%,-50%)

            rotate(3deg)

            scale(1);

    }

}

/* ==========================================

   BILD 9 – LINKS OBEN, FLACHER WINKEL

   ========================================== */

.intro-show .photo-9 {

    z-index: 9;

    animation-name: introPhoto9 !important;

    animation-delay: 8s !important;

}

@keyframes introPhoto9 {

    0% {

        opacity: 0;

        transform:

            translate(-150vw,-65vh)

            rotate(-45deg)

            scale(.7);

    }

    80% {

        opacity: 1;

        transform:

            translate(-50%,-50%)

            rotate(-8deg)

            scale(1.04);

    }

    100% {

        opacity: 1;

        transform:

            translate(-50%,-50%)

            rotate(-4deg)

            scale(1);

    }

}

/* ==========================================

   BILD 10 – RECHTS UNTEN, FLACHER WINKEL

   ========================================== */

.intro-show .photo-10 {

    z-index: 10;

    animation-name: introPhoto10 !important;

    animation-delay: 9s !important;

}

@keyframes introPhoto10 {

    0% {

        opacity: 0;

        transform:

            translate(150vw,65vh)

            rotate(45deg)

            scale(.7);

    }

    80% {

        opacity: 1;

        transform:

            translate(-50%,-50%)

            rotate(9deg)

            scale(1.04);

    }

    100% {

        opacity: 1;

        transform:

            translate(-50%,-50%)

            rotate(6deg)

            scale(1);

    }

}

	.intro-show .intro-photo {

    height: 219px !important;

}

@media (max-width: 767px) {

    .intro-show .intro-photo {

        height: 175px !important;

    }

}

/* ==========================================

   INTRO SHOW – SCHRIFTZÜGE

   ========================================== */

/* GEMEINSAME EINSTELLUNGEN */

.intro-show .intro-title-top,

.intro-show .intro-title-bottom {

    position: absolute !important;

    left: 0 !important;

    right: 0 !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 20px !important;

    text-align: center !important;

    /* SCHRIFTART */

    font-family: "Playfair Display", serif !important;

    font-weight: 500 !important;

    font-style: normal !important;

    /* SCHRIFTFARBE */

    color: #AD976F !important;

    /* SCHRIFTGRÖSSE – LARGE */

    font-size: 80px !important;

    line-height: 1.2 !important;

    letter-spacing: 0 !important;

    /* TEXTSCHATTEN

       3px Entfernung

       10px Unschärfe

       148 Grad Winkel */

    text-shadow:

        1.6px -2.5px 10px #000000 !important;

    z-index: 30 !important;

    pointer-events: none;

    /* ANIMATION */

    animation-name: introTextAppear !important;

    animation-duration: 2s !important;

    animation-timing-function: ease-out !important;

    animation-fill-mode: both !important;

    animation-iteration-count: 1 !important;

}

/* ==========================================

   OBERER SCHRIFTZUG

   ========================================== */

.intro-show .intro-title-top {

    top: calc(50% - 260px) !important;

    animation-delay: 13.5s !important;

}

/* ==========================================

   UNTERER SCHRIFTZUG

   ========================================== */

.intro-show .intro-title-bottom {

    top: calc(50% + 180px) !important;

    animation-delay: 16.5s !important;

}

/* ==========================================

   KEYFRAMES – SANFTES EINBLENDEN

   ========================================== */

@keyframes introTextAppear {

    0% {

        opacity: 0;

        visibility: hidden;

        transform: translateY(20px);

    }

    100% {

        opacity: 1;

        visibility: visible;

        transform: translateY(0);

    }

}

/* ==========================================

   MEDIUM – TABLET

   ========================================== */

@media (min-width: 768px) and (max-width: 1199px) {

    .intro-show .intro-title-top,

    .intro-show .intro-title-bottom {

        font-size: 40px !important;

    }

    .intro-show .intro-title-top {

        top: calc(50% - 215px) !important;

    }

    .intro-show .intro-title-bottom {

        top: calc(50% + 170px) !important;

    }

}

/* ==========================================

   SMALL – SMARTPHONE

   ========================================== */

@media (max-width: 767px) {

    .intro-show .intro-title-top,

    .intro-show .intro-title-bottom {

        font-size: 25px !important;

        padding: 0 12px !important;

    }

    .intro-show .intro-title-top {

        top: calc(50% - 180px) !important;

    }

    .intro-show .intro-title-bottom {

        top: calc(50% + 145px) !important;

    }

}

/* ==========================================

   INTRO SHOW – ZWEITE PHASE

   ========================================== */

/* ------------------------------------------

   1. BISHERIGEN FOTOSTAPEL AUSBLENDEN

   ------------------------------------------ */

.intro-show .intro-stack {

    animation-name: introStackDisappear !important;

    animation-duration: 1.5s !important;

    animation-delay: 20.5s !important;

    animation-timing-function: ease-in-out !important;

    animation-fill-mode: forwards !important;

}

@keyframes introStackDisappear {

    0% {

        opacity: 1;

        visibility: visible;

    }

    100% {

        opacity: 0;

        visibility: hidden;

    }

}

/* ------------------------------------------

   2. WILLKOMMENSBEREICH

   ------------------------------------------ */

.intro-show .intro-welcome {

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;

    height: 100% !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 0 !important;

    padding: 30px !important;

    text-align: center !important;

    z-index: 50 !important;

    opacity: 0;

    visibility: hidden;

    animation-name: introWelcomeAppear !important;

    animation-duration: 1.5s !important;

    animation-delay: 22s !important;

    animation-timing-function: ease-out !important;

    animation-fill-mode: both !important;

}

/* ------------------------------------------

   3. SCHRIFTEN – GEMEINSAME EINSTELLUNGEN

   ------------------------------------------ */

.intro-show .intro-welcome-top,

.intro-show .intro-welcome-main {

    position: relative !important;

    color: #AD976F !important;

    font-family: "Playfair Display", serif !important;

    font-weight: 500 !important;

    font-style: normal !important;

    line-height: 1.2 !important;

    text-align: center !important;

    text-shadow:

        1.6px -2.5px 10px #000000 !important;

    padding: 0 !important;

    width: 100% !important;

}

/* ------------------------------------------

   4. ERSTER SCHRIFTZUG

   ------------------------------------------ */

.intro-show .intro-welcome-top {

    font-size: 80px !important;

    margin: 0 0 45px 0 !important;

}

/* ------------------------------------------

   5. ZWEITER SCHRIFTZUG – GRÖSSER

   ------------------------------------------ */

.intro-show .intro-welcome-main {

    font-size: 95px !important;

    margin: 0 0 60px 0 !important;

}

/* ------------------------------------------

   6. BUTTON – DRAHT / OUTLINE

   ------------------------------------------ */

.intro-show .intro-welcome-button {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: auto !important;

    min-width: 190px !important;

    padding: 16px 45px !important;

    background: transparent !important;

    border: 2px solid #AD976F !important;

    border-radius: 0 !important;

    color: #AD976F !important;

    font-family: "Playfair Display", serif !important;

    font-size: 24px !important;

    font-weight: 500 !important;

    text-decoration: none !important;

    cursor: pointer;

    transition:

        background-color .4s ease,

        color .4s ease,

        transform .4s ease !important;

}

/* BUTTON – HOVER */

.intro-show .intro-welcome-button:hover {

    background: #AD976F !important;

    color: #111111 !important;

    transform: translateY(-3px);

}

/* BUTTON – TASTATURFOKUS */

.intro-show .intro-welcome-button:focus-visible {

    outline: 2px solid #AD976F;

    outline-offset: 5px;

}

/* ------------------------------------------

   7. EINBLENDANIMATION

   ------------------------------------------ */

@keyframes introWelcomeAppear {

    0% {

        opacity: 0;

        visibility: hidden;

        transform: translateY(25px);

    }

    100% {

        opacity: 1;

        visibility: visible;

        transform: translateY(0);

    }

}

/* ==========================================

   MEDIUM – TABLET

   ========================================== */

@media (min-width: 768px) and (max-width: 1199px) {

    .intro-show .intro-welcome-top {

        font-size: 40px !important;

        margin-bottom: 35px !important;

    }

    .intro-show .intro-welcome-main {

        font-size: 52px !important;

        margin-bottom: 45px !important;

    }

}

/* ==========================================

   SMALL – SMARTPHONE

   ========================================== */

@media (max-width: 767px) {

    .intro-show .intro-welcome {

        padding: 20px !important;

    }

    .intro-show .intro-welcome-top {

        font-size: 25px !important;

        margin-bottom: 25px !important;

    }

    .intro-show .intro-welcome-main {

        font-size: 32px !important;

        margin-bottom: 40px !important;

    }

    .intro-show .intro-welcome-button {

        font-size: 20px !important;

        padding: 13px 35px !important;

        min-width: 150px !important;

    }

}

/* ==========================================

   INTRO – WILLKOMMEN KORREKTUR

   ========================================== */

.intro-show .intro-welcome {

    position: absolute !important;

    top: 0 !important;

    left: 0 !important;

    right: 0 !important;

    bottom: 0 !important;

    width: 100% !important;

    height: 100% !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    z-index: 100 !important;

    animation: introWelcomeAppear 1.5s ease-out 22s both !important;

}

.intro-show .intro-welcome-top {

    font-family: "Playfair Display", serif !important;

    font-size: 80px !important;

    font-weight: 500 !important;

    color: #AD976F !important;

    text-align: center !important;

    margin-bottom: 45px !important;

}

.intro-show .intro-welcome-main {

    font-family: "Playfair Display", serif !important;

    font-size: 95px !important;

    font-weight: 500 !important;

    color: #AD976F !important;

    text-align: center !important;

    margin-bottom: 60px !important;

}

@keyframes introWelcomeAppear {

    from {

        opacity: 0;

        visibility: hidden;

    }

    to {

        opacity: 1;

        visibility: visible;

    }

}

/* ==========================================

   INTRO WELCOME – RESPONSIVE TYPOGRAFIE

   ========================================== */

/* LARGE – AB 1200 PX */

@media (min-width: 1200px) {

    .intro-show .intro-welcome-top {

        font-size: 80px !important;

    }

    .intro-show .intro-welcome-main {

        font-size: 95px !important;

    }

}

/* MEDIUM – 768 BIS 1199 PX */

@media (min-width: 768px) and (max-width: 1199px) {

    .intro-show .intro-welcome-top {

        font-size: 40px !important;

    }

    .intro-show .intro-welcome-main {

        font-size: 52px !important;

    }

}

/* SMALL – BIS 767 PX */

@media (max-width: 767px) {

    .intro-show .intro-welcome {

        padding: 20px !important;

    }

    .intro-show .intro-welcome-top {

        font-size: 25px !important;

        line-height: 1.3 !important;

        margin-bottom: 25px !important;

    }

    .intro-show .intro-welcome-main {

        font-size: 32px !important;

        line-height: 1.3 !important;

        margin-bottom: 35px !important;

    }

}

/* SEHR KLEINE DISPLAYS – BIS 374 PX */

@media (max-width: 374px) {

    .intro-show .intro-welcome-top {

        font-size: 23px !important;

    }

    .intro-show .intro-welcome-main {

        font-size: 28px !important;

    }

}

/* GEMEINSAMER ZEILENUMBRUCH */

.intro-show .intro-welcome-top,

.intro-show .intro-welcome-main {

    max-width: 100% !important;

    overflow-wrap: break-word;

    hyphens: none;

}

/* ==========================================

   INTRO BUTTON – DREIMAL WACKELN

   ========================================== */

.intro-show .intro-welcome-button {

    transform-origin: center center;

    animation-name: introButtonWiggle !important;

    animation-duration: 0.65s !important;

    animation-delay: 25s !important;

    animation-iteration-count: 3 !important;

    animation-timing-function: ease-in-out !important;

    animation-fill-mode: both !important;

}

/* WACKELANIMATION */

@keyframes introButtonWiggle {

    0% {

        transform: rotate(0deg);

    }

    20% {

        transform: rotate(-6deg);

    }

    40% {

        transform: rotate(6deg);

    }

    60% {

        transform: rotate(-4deg);

    }

    80% {

        transform: rotate(4deg);

    }

    100% {

        transform: rotate(0deg);

    }

}

/* HOVER BLEIBT ERHALTEN */

.intro-show .intro-welcome-button:hover {

    background: #AD976F !important;

    color: #111111 !important;

}

/* BARRIEREFREIHEIT */

@media (prefers-reduced-motion: reduce) {

    .intro-show .intro-welcome-button {

        animation: none !important;

    }

}


/* ==========================================================
   INTRO – TRANSPARENTER HINTERGRUND
   Nur Intro-Elemente; bestehende Navigation bleibt unverändert.
   ========================================================== */

.intro-show {
    background: transparent !important;
}

.intro-show .intro-stack {
    background: transparent !important;
}

.intro-show .intro-welcome {
    background: transparent !important;
}


/* ============================================================
   CSS 3: HISTORY-TIMELINE V12 – KONSOLIDIERTE FASSUNG
   Ersetzt ALLE bisherigen Timeline-V1–V10-Regeln.
   Website und Intro oben bleiben bytegenau unverändert.
   Kompatibel mit dem bisherigen Timeline-JavaScript V3.
   Blocs-Struktur pro Ereignis:
     .history-timeline-item
       .history-timeline-year (h1/h2/h3)
       .history-timeline-content
       img.history-timeline-image
   ============================================================ */

.history-timeline {
    --ht-bg: #292b2b;
    --ht-card: #f3f0e9;
    --ht-ink: #182033;
    --ht-gold: #ad976f;
    --ht-line: rgba(240,235,223,.76);
    position: relative;
    background: var(--ht-bg) !important;
    color: #fff;
    overflow: clip;
    padding: 60px 0 80px;
}

/* Blocs-Container nur innerhalb der Timeline auf volle Breite setzen. */
.history-timeline > .container,
.history-timeline > .container-fluid,
.history-timeline > .container-bloc-sm,
.history-timeline > .container-bloc-md,
.history-timeline > .container-bloc-lg {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.history-timeline > .container > .row,
.history-timeline > .container-fluid > .row,
.history-timeline > .container-bloc-sm > .row,
.history-timeline > .container-bloc-md > .row,
.history-timeline > .container-bloc-lg > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.history-timeline .history-timeline-track {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 12px 0;
}
.history-timeline .history-timeline-track::before,
.history-timeline .history-timeline-track::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}
.history-timeline .history-timeline-track::before {
    bottom: 0;
    width: 2px;
    background: var(--ht-line);
    z-index: 0;
}
.history-timeline .history-timeline-track::after {
    width: 3px;
    height: var(--ht-progress, 0px);
    max-height: 100%;
    background: var(--ht-gold);
    z-index: 1;
}

/* 5-Spalten-Raster: links Bild+Text, Mitte Achse, rechts Text+Bild.
   Nur die mittlere Spalte trennt die verbundenen Bild/Text-Flächen. */
.history-timeline .history-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) 190px repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(320px, auto);
    align-items: stretch;
    gap: 0;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 35px clamp(20px, 3vw, 55px);
    isolation: isolate;
    overflow: visible;
}

/* Jahr/Datum ist Anker für Punkt und JS, darf nicht verschoben werden. */
.history-timeline .history-timeline-year {
    position: relative;
    grid-column: 3;
    grid-row: 1;
    align-self: stretch;
    justify-self: stretch;
    min-width: 0;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible;
    z-index: 3;
}
.history-timeline .history-timeline-year::before {
    content: "";
    position: absolute;
    top: calc(50% - 12px);
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--ht-gold);
    box-shadow: 0 0 0 2px rgba(0,0,0,.25);
    transition: background-color .45s ease, box-shadow .45s ease;
}
.history-timeline .history-timeline-item.ht-reached .history-timeline-year::before {
    background: #e1c18a;
    box-shadow: 0 0 0 5px rgba(173,151,111,.22);
}

/* Standard: Karte rechts, Datum links von der Achse. */
.history-timeline .history-timeline-year > h1,
.history-timeline .history-timeline-year > h2,
.history-timeline .history-timeline-year > h3 {
    position: absolute;
    top: 50%;
    right: calc(50% + 55px);
    left: auto;
    transform: translateY(-50%);
    width: min(34vw, 470px);
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(24px, 2.3vw, 38px);
    line-height: 1.2;
    text-align: right;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    text-shadow: 0 2px 5px rgba(0,0,0,.55);
}
/* Karte links: Datum rechts von der Achse. */
.history-timeline .history-timeline-item:nth-child(even) .history-timeline-year > h1,
.history-timeline .history-timeline-item:nth-child(even) .history-timeline-year > h2,
.history-timeline .history-timeline-item:nth-child(even) .history-timeline-year > h3 {
    right: auto;
    left: calc(50% + 55px);
    text-align: left;
}

/* Textkarte: Höhe bestimmt bei längeren Texten die gesamte Rasterzeile. */
.history-timeline .history-timeline-content {
    position: relative;
    grid-column: 4;
    grid-row: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    height: auto !important;
    min-height: 320px;
    margin: 0 !important;
    padding: clamp(20px, 2.5vw, 38px);
    background: var(--ht-card);
    color: var(--ht-ink);
    border-radius: 11px 0 0 11px;
    box-shadow: 0 8px 28px rgba(0,0,0,.20);
    z-index: 2;
}
.history-timeline .history-timeline-content::before { content: none !important; display: none !important; }
.history-timeline .history-timeline-content h1,
.history-timeline .history-timeline-content h2,
.history-timeline .history-timeline-content h3,
.history-timeline .history-timeline-content h4 {
    color: var(--ht-ink) !important;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.2;
    margin: 0 0 14px !important;
}
.history-timeline .history-timeline-content p {
    color: #292929 !important;
    line-height: 1.55;
}
.history-timeline .history-timeline-content .btn {
    align-self: flex-start;
    margin-top: 12px;
}

/* Bild: keine eigene intrinsische Rasterhöhe – folgt der Textkarte.
   height:0 + min-height:100% verhindert, dass Hochformatbilder
   die Zeilenhöhe künstlich aufblähen. */
.history-timeline img.history-timeline-image {
    position: relative;
    display: block;
    grid-column: 5;
    grid-row: 1;
    align-self: stretch;
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    height: 0 !important;
    min-height: 100% !important;
    max-height: none !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover;
    border-radius: 0 11px 11px 0;
    z-index: 2;
}

/* Jedes zweite Ereignis: Bild links, Text direkt daneben. */
.history-timeline .history-timeline-item:nth-child(even) .history-timeline-content {
    grid-column: 2;
    border-radius: 0 11px 11px 0;
}
.history-timeline .history-timeline-item:nth-child(even) img.history-timeline-image {
    grid-column: 1;
    border-radius: 11px 0 0 11px;
}

/* V12: Explizite Platzierung BEIDER Seiten.
   Blocs kann eigene Grid-Regeln für Bilder ausgeben; daher !important.
   Unabhängig von der Reihenfolge der DOM-Kindelemente. */
@media (min-width: 768px) {
    .history-timeline .history-timeline-item {
        grid-auto-flow: row !important;
    }
    .history-timeline .history-timeline-item:nth-child(odd) .history-timeline-year,
    .history-timeline .history-timeline-item:nth-child(even) .history-timeline-year {
        grid-column: 3 !important;
        grid-row: 1 !important;
    }
    .history-timeline .history-timeline-item:nth-child(odd) .history-timeline-content {
        grid-column: 4 !important;
        grid-row: 1 !important;
    }
    .history-timeline .history-timeline-item:nth-child(odd) img.history-timeline-image {
        grid-column: 5 !important;
        grid-row: 1 !important;
    }
    .history-timeline .history-timeline-item:nth-child(even) .history-timeline-content {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }
    .history-timeline .history-timeline-item:nth-child(even) img.history-timeline-image {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
}

/* Verbindungslinien werden wie bisher durch JavaScript V3 gesetzt. */
.history-timeline .ht-connector {
    position: absolute;
    height: 2px;
    width: 0;
    background: var(--ht-gold);
    opacity: .85;
    pointer-events: none;
    z-index: 0;
}

@media (min-width: 768px) and (max-width: 1199px) {
    .history-timeline .history-timeline-item {
        grid-template-columns: repeat(2, minmax(0, 1fr)) 130px repeat(2, minmax(0, 1fr));
        grid-template-rows: minmax(270px, auto);
        padding: 28px 16px;
    }
    .history-timeline .history-timeline-content {
        min-height: 270px;
        padding: 20px;
    }
    .history-timeline .history-timeline-year > h1,
    .history-timeline .history-timeline-year > h2,
    .history-timeline .history-timeline-year > h3 {
        right: calc(50% + 38px);
        width: 34vw;
        font-size: clamp(21px, 2.5vw, 30px);
    }
    .history-timeline .history-timeline-item:nth-child(even) .history-timeline-year > h1,
    .history-timeline .history-timeline-item:nth-child(even) .history-timeline-year > h2,
    .history-timeline .history-timeline-item:nth-child(even) .history-timeline-year > h3 {
        right: auto;
        left: calc(50% + 38px);
    }
}

/* Mobil: Datum, Textkarte und Bild untereinander; Achse links. */
@media (max-width: 767px) {
    .history-timeline { padding: 30px 0 50px; }
    .history-timeline .history-timeline-track::before,
    .history-timeline .history-timeline-track::after { left: 34px; }
    .history-timeline .history-timeline-item {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        padding: 24px 16px 32px 68px;
        gap: 0;
    }
    .history-timeline .history-timeline-year {
        align-self: stretch;
        width: 100%;
        min-height: 0;
        margin: 0 0 14px !important;
    }
    .history-timeline .history-timeline-year::before {
        left: -34px;
        top: 12px;
        width: 18px;
        height: 18px;
        border-width: 2px;
    }
    .history-timeline .history-timeline-year > h1,
    .history-timeline .history-timeline-year > h2,
    .history-timeline .history-timeline-year > h3,
    .history-timeline .history-timeline-item:nth-child(even) .history-timeline-year > h1,
    .history-timeline .history-timeline-item:nth-child(even) .history-timeline-year > h2,
    .history-timeline .history-timeline-item:nth-child(even) .history-timeline-year > h3 {
        position: static;
        transform: none;
        width: auto;
        max-width: 100%;
        text-align: left;
        font-size: clamp(25px, 7vw, 36px);
        line-height: 1.2;
    }
    .history-timeline .history-timeline-content,
    .history-timeline .history-timeline-item:nth-child(even) .history-timeline-content {
        width: 100%;
        height: auto !important;
        min-height: 0;
        padding: 20px;
        border-radius: 10px 10px 0 0;
    }
    .history-timeline img.history-timeline-image,
    .history-timeline .history-timeline-item:nth-child(even) img.history-timeline-image {
        width: 100% !important;
        height: 220px !important;
        min-height: 0 !important;
        max-height: none !important;
        border-radius: 0 0 10px 10px;
    }
    .history-timeline .ht-connector { display: none !important; }
}

/* Scroll-Reveal V3: ohne JS bleiben alle Inhalte sichtbar. */
@media (prefers-reduced-motion: no-preference) {
    .history-timeline.ht-js-ready .history-timeline-item.ht-animate-pending .history-timeline-content,
    .history-timeline.ht-js-ready .history-timeline-item.ht-animate-pending img.history-timeline-image {
        opacity: 0 !important;
        transform: translate3d(38px,0,0) !important;
    }
    .history-timeline.ht-js-ready .history-timeline-item:nth-child(even).ht-animate-pending .history-timeline-content,
    .history-timeline.ht-js-ready .history-timeline-item:nth-child(even).ht-animate-pending img.history-timeline-image {
        transform: translate3d(-38px,0,0) !important;
    }
    .history-timeline.ht-js-ready .history-timeline-item.ht-visible .history-timeline-content,
    .history-timeline.ht-js-ready .history-timeline-item.ht-visible img.history-timeline-image {
        opacity: 1 !important;
        transform: translate3d(0,0,0) !important;
    }
    .history-timeline.ht-js-ready .history-timeline-item .history-timeline-content,
    .history-timeline.ht-js-ready .history-timeline-item img.history-timeline-image {
        transition: opacity .95s ease, transform .95s cubic-bezier(.22,.68,.2,1) !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .history-timeline *,
    .history-timeline *::before,
    .history-timeline *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}


/* ============================================================
   TIMELINE V14 – EINZELNE ABGERUNDETE KARTE MIT THUMBNAIL
   Bild in Blocs INNERHALB .history-timeline-content platzieren,
   und zwar als erstes Element vor der Überschrift.
   Die Bildklasse history-timeline-image kann bestehen bleiben.
   Keine Bilder mehr als direkte Kinder von .history-timeline-item.
   ============================================================ */

/* Eine durchgehende Karte – auf beiden Seiten identisch. */
.history-timeline .history-timeline-item .history-timeline-content,
.history-timeline .history-timeline-item:nth-child(even) .history-timeline-content {
    display: block !important;
    border-radius: 14px !important;
    min-height: 220px;
    overflow: hidden;
    isolation: isolate;
}

/* Das von Blocs erzeugte <picture> ist Teil des Karteninhalts.
   Float ermöglicht Textfluss links neben dem kleinen Bild. */
.history-timeline .history-timeline-content > picture {
    display: block !important;
    position: relative !important;
    float: right !important;
    width: 128px !important;
    height: 128px !important;
    max-width: 38% !important;
    margin: 0 0 14px 18px !important;
    padding: 0 !important;
    border-radius: 9px !important;
    overflow: hidden !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

/* Funktioniert sowohl mit <picture> als auch mit direkt eingefügtem IMG. */
.history-timeline .history-timeline-content > picture > img,
.history-timeline .history-timeline-content > img.history-timeline-image {
    display: block !important;
    position: static !important;
    float: none !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    border-radius: 9px !important;
    grid-column: auto !important;
    grid-row: auto !important;
    transform: none !important;
}
.history-timeline .history-timeline-content > img.history-timeline-image {
    float: right !important;
    width: 128px !important;
    height: 128px !important;
    max-width: 38% !important;
    margin: 0 0 14px 18px !important;
}

/* Keine zusätzlichen Bildspalten mehr nötig; Karte nutzt beide
   äußeren Gridspalten ihrer jeweiligen Seite. */
@media (min-width: 768px) {
    .history-timeline .history-timeline-item:nth-child(odd) > .history-timeline-content {
        grid-column: 4 / 6 !important;
        grid-row: 1 !important;
    }
    .history-timeline .history-timeline-item:nth-child(even) > .history-timeline-content {
        grid-column: 1 / 3 !important;
        grid-row: 1 !important;
    }
}

/* Smartphone: Datum oberhalb, Karte über die verfügbare Breite. */
@media (max-width: 767px) {
    .history-timeline .history-timeline-item .history-timeline-content {
        width: 100% !important;
        min-height: 0;
        border-radius: 12px !important;
    }
    .history-timeline .history-timeline-content > picture,
    .history-timeline .history-timeline-content > img.history-timeline-image {
        width: 100px !important;
        height: 100px !important;
        margin-left: 12px !important;
    }
}


/* ============================================================
   TIMELINE V15 – QUERFORMAT-THUMBNAIL, KOMPAKTE KARTE
   Nur Ergänzung zu V14; übrige Website-CSS unverändert.
   ============================================================ */
.history-timeline .history-timeline-item .history-timeline-content {
    min-height: 190px !important;
    padding: clamp(20px, 1.7vw, 30px) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    display: flow-root !important;
}
.history-timeline .history-timeline-content > picture {
    float: right !important;
    width: clamp(160px, 12vw, 210px) !important;
    height: 155px !important;
    max-width: 42% !important;
    margin: 0 0 10px 22px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 5px 16px rgba(0,0,0,.14);
}
.history-timeline .history-timeline-content > picture > img,
.history-timeline .history-timeline-content > img.history-timeline-image {
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 12px !important;
}
.history-timeline .history-timeline-content > img.history-timeline-image {
    float: right !important;
    width: clamp(160px, 12vw, 210px) !important;
    height: 155px !important;
    max-width: 42% !important;
    margin: 0 0 10px 22px !important;
    box-shadow: 0 5px 16px rgba(0,0,0,.14);
}
@media (max-width: 767px) {
    .history-timeline .history-timeline-item .history-timeline-content {
        min-height: 0 !important;
        padding: 20px !important;
    }
    .history-timeline .history-timeline-content > picture,
    .history-timeline .history-timeline-content > img.history-timeline-image {
        width: 125px !important;
        height: 110px !important;
        max-width: 43% !important;
        margin: 0 0 10px 14px !important;
    }
}


/* ============================================================
   TIMELINE V16 – quadratisches Bild, mindestens Texthöhe
   Bild muss innerhalb .history-timeline-content liegen.
   Größe wird durch ergänzendes JS synchronisiert.
   ============================================================ */
.history-timeline .history-timeline-item .history-timeline-content {
    --ht-square-size: 210px;
    --ht-card-pad: 24px;
    --ht-image-gap: 22px;
    position: relative !important;
    display: flow-root !important;
    box-sizing: border-box !important;
    min-height: calc(var(--ht-square-size) + 2 * var(--ht-card-pad)) !important;
    padding: var(--ht-card-pad) calc(var(--ht-square-size) + var(--ht-image-gap) + var(--ht-card-pad)) var(--ht-card-pad) var(--ht-card-pad) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
}
.history-timeline .history-timeline-content > picture,
.history-timeline .history-timeline-content > img.history-timeline-image {
    position: absolute !important;
    display: block !important;
    float: none !important;
    top: var(--ht-card-pad) !important;
    right: var(--ht-card-pad) !important;
    left: auto !important;
    width: var(--ht-square-size) !important;
    height: var(--ht-square-size) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 5px 16px rgba(0,0,0,.14);
    transform: none !important;
}
.history-timeline .history-timeline-content > picture > img,
.history-timeline .history-timeline-content > img.history-timeline-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}
/* Wenn Text für eine nebeneinanderliegende quadratische Darstellung
   zu lang ist, wird das Bild über dem Text eingebunden. */
.history-timeline .history-timeline-item .history-timeline-content.ht-square-stacked {
    padding: var(--ht-card-pad) !important;
    min-height: 0 !important;
}
.history-timeline .history-timeline-content.ht-square-stacked > picture,
.history-timeline .history-timeline-content.ht-square-stacked > img.history-timeline-image {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: min(100%, 380px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto 20px auto !important;
}
.history-timeline .history-timeline-content.ht-square-stacked > picture > img {
    display: block !important;
    aspect-ratio: 1 / 1 !important;
}
@media (max-width: 767px) {
    .history-timeline .history-timeline-item .history-timeline-content {
        --ht-card-pad: 18px;
        --ht-image-gap: 14px;
    }
}

/* ============================================================
   TIMELINE V18 – zentrierte quadratische Bilder im Stapelmodus
   Auch bei durch Blocs gesetzten Bild-/Picture-Styles stabil.
   ============================================================ */
.history-timeline .history-timeline-item .history-timeline-content.ht-square-stacked > picture,
.history-timeline .history-timeline-item .history-timeline-content.ht-square-stacked > img.history-timeline-image {
    position: relative !important;
    display: block !important;
    float: none !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    margin: 0 0 20px 0 !important;
    width: min(100%, 380px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
}