@charset "utf-8";

/* START Document */

body {
    background: url(../pic/background/background_index.png) center center no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.navbar {
    width: 1000px;
    left: 50%;
    top: 30px;
    margin-left: -500px;
    border-radius: 3px;
    box-shadow: 0 0 20px #333;
}

.navbar .topLine {
    border-radius: 3px 3px 0 0;
    background-color: rgba(51, 51, 51, 0.9);
}

.navbar .contentLine {
    border-radius: 0 0 3px 3px;
}

.navbar .innerContentBar {
    width: 900px;
}

.menuSecond {
    background-color: #333333;
    opacity: 0.8;
}

.NavPopup {
    border-radius: 0 0 3px 3px;
}


/* CONTENT */

.willkommen {
    position: fixed;
    top: 360px;
    left: 50%;
    width: 400px;
    margin-left: -400px;
    font-size: 37px;
    color: white;
    line-height: 1.3;
    font-weight: 300;
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
    transform-origin: left bottom 0;
}

.willkommenBG {
    background-color: rgba(6, 6, 6, 0.6);
}
/* --- NEUE KATEGORIE-SEKTION (DUBSEK 2.0) --- */

/* Container für die 4 Spalten */
.category-teaser-wrapper {
    display: flex;
    flex-wrap: wrap; /* Erlaubt Umbruch auf Mobile */
    width: 100%;
    max-width: 1400px; /* Begrenzung auf großen Bildschirmen für schöne Optik */
    margin: 20px auto 40px auto; /* Abstand nach oben und unten */
    padding: 0 10px;
    box-sizing: border-box;
}

/* Die einzelnen Kacheln */
.cat-item {
    position: relative;
    flex: 1 1 22%; /* Basisgröße: Ca. 1/4 des Bildschirms */
    height: 350px; /* Feste Höhe für Einheitlichkeit */
    margin: 10px;
    overflow: hidden;
    border-radius: 4px; /* Leicht abgerundete Ecken wirken moderner */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Dezent schwebend */
    text-decoration: none; /* Unterstrich bei Links entfernen */
    background-color: #000; /* Fallback Farbe */
}

/* Das Bild in der Kachel */
.cat-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Bild füllt den Bereich ohne Verzerrung */
    transition: transform 0.5s ease; /* Sanfter Zoom-Effekt */
    opacity: 0.9;
}

/* Overlay für bessere Lesbarkeit des Textes */
.cat-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%; /* Verlauf deckt untere 60% ab */
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
}

/* Der Text-Inhalt */
.cat-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    color: white;
    z-index: 2;
    font-family: 'Raleway', sans-serif; /* Deine Hausschrift */
}

.cat-title {
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
    display: block;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.cat-subtitle {
    font-size: 14px;
    font-weight: 400;
    color: #ddd;
    display: block;
}

/* Kleiner Pfeil/Icon */
.cat-icon {
    position: absolute;
    bottom: 25px;
    right: 20px;
    color: #e26353; /* Deine Akzentfarbe (Rot/Orange aus deinem Logo/Testwarnung) */
    font-size: 20px;
    transition: transform 0.3s ease;
}

/* --- HOVER EFFEKTE (Mausbewegung) --- */
.cat-item:hover img {
    transform: scale(1.1); /* Bild zoomt leicht rein */
    opacity: 1;
}

.cat-item:hover .cat-icon {
    transform: translateX(5px); /* Pfeil bewegt sich nach rechts */
}

/* --- MOBILE ANSICHT (Responsive) --- */
@media (max-width: 768px) {
    .cat-item {
        flex: 1 1 100%; /* Auf Handy volle Breite */
        height: 250px; /* Etwas flacher auf dem Handy */
        margin: 10px 0; /* Abstand nur oben/unten */
    }
    
    /* Text etwas größer für Touch-Bedienung */
    .cat-title {
        font-size: 24px;
    }
}