/**
 * Zentrales Stylesheet des Techno Heritage Network.
 *
 * Enthält die projektweiten Ergänzungen zu Bootstrap: Navigation,
 * Grundlayout, Karten der Inhaltsübersichten, Logo-/Patternbereich,
 * Detailansichten und kleinere Formulareinstellungen. Seitenspezifische
 * Sonderregeln können zusätzlich direkt in den jeweiligen PHP-Dateien stehen.
 */

/* =====================================================
   HAUPTNAVIGATION
   ===================================================== */

/* Vertikale Trennlinien zwischen benachbarten Menüpunkten auf dem Desktop. */
.navbar-nav .nav-item + .nav-item {
    border-left: 1px solid #dee2e6;
    margin-left: 0.5rem;
    padding-left: 0.5rem;
}

/* Aktuelle Hauptseite mit der Markenfarbe hervorheben. */
.navbar .nav-link.active {
    color: #0069b4 !important;
}

/* Auf kleinen Bildschirmen die vertikalen Trenner im Klappmenü entfernen. */
@media (max-width: 768px) {
    .navbar-nav .nav-item + .nav-item {
        border-left: none;
        margin-left: 0;
        padding-left: 0;
    }
}


@media (max-width: 992px) {
    /* Navigation bei mittleren Breiten etwas kompakter darstellen. */
    .navbar .nav-link {
        font-size: 0.9rem;
    }
}
/* =====================================================
   GRUNDLAYOUT
   ===================================================== */

/* Flex-Layout hält den gemeinsamen Footer auch auf kurzen Seiten unten. */
html {
    height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1; padding: 0; margin: 0;
}

/* Schalter zum Ein- und Ausblenden von Passwörtern in Eingabefeldern. */
.eye-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    user-select: none;
    font-size: 18px;
}

/* =====================================================
   KARTEN DER ÖFFENTLICHEN ÜBERSICHTEN
   ===================================================== */

/* Gemeinsamer Bildkasten für Startseite, Collections und Activities. */
.item-box {
    position: relative;
    height: 240px;     /* feste Höhe */
    overflow: hidden;
    cursor: pointer;
	border: 5px solid #999;
	margin-bottom: 25px;
}


/* Kartenbild füllt die feste Fläche und startet leicht weichgezeichnet. */
.item-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    transform: rotate(0deg) scale(1);
    filter: blur(3px);

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}

/* Beim Überfahren Bild schärfen, leicht drehen und vergrößern. */
.item-box:hover img {
    transform: rotate(-2deg) scale(1.2);
    filter: blur(0);
}
/* Dunkles Overlay erhält den Kontrast der darüberliegenden weißen Texte. */
.item-box::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    transition: background 0.3s ease;
}

/* Overlay beim Überfahren aufhellen. */
.item-box:hover::after {
    background: rgba(0, 0, 0, 0.2);
}

/* Name des Eintrags mittig über dem Kartenbild platzieren. */
.item-name {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 1.5rem;          /* kleiner für 120px */
    letter-spacing: 0.5px;
    z-index: 2;
    text-align: center;
    padding: 0 10px;
   text-shadow:
    0 2px 0 rgba(0,0,0,.8),
    0 4px 8px rgba(0,0,0,.5);
}

/* Kategorie als Badge oben links auf der Karte. */
.category {
    position: absolute;
    top: 12px;
    left: 12px;

    z-index: 2;

    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;

    padding: 4px 10px;

    background: rgba(0,0,0,.45);
    border-radius: 6px;

   

}
/*
 * Historische Regel ohne Klassenpunkt. Sie betrifft nur ein tatsächliches
 * HTML-Element <logo-gradient>; der verwendete Markenbereich nutzt dagegen
 * die weiter unten definierte Klasse .logo-gradient.
 */
logo-gradient {
    background: linear-gradient(
        to top,
        #ffffff 0%,
        #f8f9fa 100%
    );
}
/* Zweispaltige Inhaltsseiten optisch von der rechten Seitenleiste trennen. */
.col-lg-4 {
    border-left: 1px solid #eee;
    padding-left: 2rem;
}

/* =====================================================
   LOGO- UND MARKENBEREICH
   ===================================================== */

/* Heller Verlauf hinter dem großen Seitenlogo. */
.logo-gradient {
    position: relative;
    background: linear-gradient(
        to top,
        #ffffff 0%,
        #f8f9fa 100%
    );
    overflow: hidden;
}

/* Ort und gegebenenfalls Datum unten rechts auf Übersichtskarten. */
.location {
    position: absolute;
    bottom: 12px;
    right: 12px;

    z-index: 2;

    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;

    padding: 4px 10px;

    background: rgba(0,0,0,.45);
    border-radius: 6px;

    text-shadow: 0 2px 6px rgba(0,0,0,.8);

}
/* Dekoratives, halbtransparentes Pattern hinter dem Logo. */
.logo-gradient::before {
    content: "";
    position: absolute;
    inset: 0;

    background: url("img/umpf.png") repeat center / auto 100%;
    
    opacity: 0.1;   /* WICHTIG: deutlich erhöhen */

    transform-origin: center center;
    animation: beatVertical 0.3s ease-out 1;

    z-index: 0;
}

/* Logo und andere Inhalte oberhalb der Pattern-Ebene halten. */
.logo-gradient > * {
    position: relative;
    z-index: 1;
}

/* Kurze horizontale Aufklappanimation des Hintergrundpatterns. */
@keyframes beatVertical {

    /* Ausgang */
    0%   { transform: scaleX(0.1); }

 
    
   

    /* Ruhephase */
    100% { transform: scaleX(1); }
}
/* Horizontales Überlaufen durch animierte oder gedrehte Elemente verhindern. */
body{
    background:#ffffff;
    overflow-x:hidden;
	
}
/* =====================================================
   DETAILANSICHTEN UND MODALE INHALTE
   ===================================================== */

/* Gemeinsamer Innenrahmen für Collection- und Activity-Detailansichten. */
.detail-page{
    position:relative;
    padding:40px;
    
    overflow:hidden;
}

/* Optionales THN-Wasserzeichen hinter dem Detailinhalt. */
.detail-page::before{

    content:"";

    position:absolute;
    inset:0;

    background:url("/img/thn_logo_grey.png") no-repeat center center;

    background-size:55%;

    opacity:.05;

    pointer-events:none;

    z-index:0;
}

/* Den eigentlichen Inhalt oberhalb des Wasserzeichens darstellen. */
.detail-content{
    position:relative;
    z-index:2;
}

/* Haupttitel der Detailansicht in der Markenfarbe. */
.detail-title{

    color:#0a356d;
    font-size:2.2rem;
    font-weight:700;

    margin-bottom:0;
}

/* Ergänzender Untertitel unterhalb des Haupttitels. */
.detail-subtitle{

    color:#0a356d;

    font-size:1.45rem;

   

    margin-bottom:35px;
}

/* Hervorgehobene Kategorieangabe innerhalb der Detailansicht. */
.detail-category{

    color:#00479a;

    font-size:1.2rem;

    font-weight:700;
}

/* Größere Orts- und Datumsinformation. */
.detail-location{

    font-size:1.35rem;

    font-weight:600;
}

/* Lesbarer Fließtext für längere redaktionelle Beschreibungen. */
.detail-description{

    line-height:1.75;
    font-size:1rem;
}

/* Gerahmte Bildfläche mit abgerundeten Ecken und Schatten. */
.detail-image{

    border-radius:10px;

    overflow:hidden;

    box-shadow:0 10px 25px rgba(0,0,0,.18);
}

/* Bild auf die verfügbare Breite seines Detailcontainers begrenzen. */
.detail-image img{

    width:100%;
    display:block;
}

/* Tabellenförmiger Informationsbereich unter dem Hauptinhalt. */
.detail-footer{

    margin-top:35px;

    border-top:1px solid #ddd;

    padding-top:25px;
}

.detail-footer table{

    width:100%;
}

.detail-footer td{

    padding:5px 0;
    vertical-align:top;
}

.detail-footer td:first-child{

    width:130px;

    font-weight:600;
}

/* Dezente technische Metadaten wie Erstellungs- und Änderungsdatum. */
.detail-meta{

    margin-top:35px;

    padding-top:12px;

    border-top:1px solid #e5e5e5;

    color:#999;

    font-size:.80rem;
}

.detail-meta span{

    margin-right:25px;
}
/* =====================================================
   FORMULARE
   ===================================================== */

/* Formularbeschriftungen leicht an die projektspezifische Feldhöhe anpassen. */
.form-label {
    position: relative;
    top: 5px;
}