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

   Auktionshaus Schwerin - Komplettes Template-CSS (Joomla 6 ready)

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



/* --- 1. Grundgerüst & Seitenhintergrund --- */

html, body {
    margin: 0;
    padding: 0;
    background-color: #e1e1e1;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 500;          /* Leicht kräftiger als normal (Standard ist 400) */
    letter-spacing: -0.02em;   /* Zieht die Buchstaben minimal enger zusammen */
    line-height: 1.4;          /* Verringert den Standard-Zeilenabstand etwas */
    color: #333333;
}



/* Die seitlichen Hintergrund-Streifen aus deinem originalen Template */

.left_bg {

    position: fixed;

    left: 0;

    top: 0;

    width: 386px;

    height: 100%;

    background: url(../images/left.png) no-repeat left top;

    z-index: 1; /* Schiebt die Figuren in den sichtbaren Bereich */

    opacity: 0.6; /* <--- 50% Transparenz für die linke Figur */

}



.right_bg {

    position: fixed;

    right: 0;

    top: 0;

    width: 308px;

    height: 100%;

    background: url(../images/right.png) no-repeat right top;

    z-index: 1;

    opacity: 0.6; /* <--- 50% Transparenz für die linke Figur */

}



/* --- 2. Der Wrapper (Zentraler Kasten) --- */

#wrapper {

    width: 100%;

    max-width: 1200px; /* Begrenzt die maximale Breite des gesamten Layouts */

    margin: 0 auto;

    padding: 0;

    box-sizing: border-box;

    position: relative;

    z-index: 2; /* Sorgt dafür, dass der Inhalt über den fixierten Figuren liegt */

}



/* --- 3. Header & Zufallsbild (Position: head) --- */

header, #wrapper header {

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

    width: 100% !important;

    min-height: 150px;

    background-color: #2b303b !important; /* Graublauer Hintergrund exakt in Wrapper-Breite */

    margin: 0;

    padding: 10px 0 0 0;

    box-sizing: border-box;

}



header .mod-randomimage,

header img {

    display: block !important;

    max-width: 100% !important;

    height: auto !important;

    margin: 0 auto !important;

}



/* --- 4. Alert / Systemnachrichten (Position: allert) --- */
#allertposition {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    box-sizing: border-box;
    display: block; 
    height: 0;
    overflow: hidden;
    border: none !important;
    background-color: transparent !important;
}

/* NUR das eigentliche Joomla-Modul bekommt das Design – und NUR wenn es nicht leer ist */
#allertposition .moduletable:not(:empty),
#allertposition .custom:not(:empty) {
    background-color: #2b303b !important; /* Das graublaue Dunkel */
    color: #e1e1e1 !important;            /* Hellgraue Schrift */
    padding: 15px 20px;                   /* Platz um den Text */
    margin: 10px 0 0 0;                   /* Abstand nach oben */
    border: 1px solid #ffffff !important; /* Die weiße Konturlinie */
    font-weight: bold;
    height: auto;
}

/* Verhindert, dass leere Absätze oder Geister-HTML im Modul Ränder erzeugen */
#allertposition :empty {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
}

/* Schaltet den Haupt-Container auf sichtbar, wenn ein echtes Element drin liegt */
#allertposition:has(*) {
    height: auto !important;
    overflow: visible;
}

/* Text- und Linkfarben im aktiven Zustand */
#allertposition p, 
#allertposition a {
    color: #e1e1e1 !important;
    margin: 0;
    padding: 0;
}


/* --- 5. Das Navigationsmenü (Position: navi) --- */

#navigationsleiste {

    background-color: #2b303b !important; /* Original Dunkelblau-Grau */

    width: 100% !important;

    display: block !important;

    margin: 10px 0 0 0 !important;

    padding: 0 !important;

    clear: both !important;

}



/* Zwingt das Joomla-HTML (nav, ul) in eine strikte, zentrierte Reihe */

#navigationsleiste nav,

#navigationsleiste ul {

    display: flex !important;

    flex-direction: row !important; /* Reihe statt Spalte */

    flex-wrap: wrap !important;     /* Erlaubt Umbruch auf Mobilgeräten */

    justify-content: center !important; /* Zentriert die Menüpunkte */

    list-style: none !important;    /* Entfernt die Aufzählungspunkte */

    list-style-type: none !important;

    margin: 0 !important;

    padding: 0 !important;

    text-indent: 0 !important;

}



/* Entfernt jegliche Rest-Formatierung von Listenpunkten */

#navigationsleiste li {

    display: block !important;

    list-style-type: none !important;

    list-style-image: none !important;

    margin: 0 !important;

    padding: 0 !important;

    background: none !important;

}



/* Die eigentlichen Menü-Links */

#navigationsleiste a {

    color: #ffffff !important;

    text-decoration: none !important;

    display: block !important;

    padding: 12px 20px !important; /* Klickbereich und Abstand */

    font-size: 14px !important;

    font-weight: bold !important;

    white-space: nowrap !important; /* Kein Zeilenumbruch mitten im Wort */

    transition: background-color 0.2s ease;

}



/* Hover-Effekt (Maus drüber) */

#navigationsleiste a:hover {

    background-color: #4f5b66 !important; /* Helleres Grau */

    color: #ffffff !important;

}



/* Aktiver / Ausgewählter Menüpunkt */

#navigationsleiste .active > a,

#navigationsleiste .current > a,

#navigationsleiste li.active a,

#navigationsleiste li.current a {

    background-color: #4f5b66 !important;

    color: #ffffff !important;

}



/* --- 6. Der Inhaltsbereich (Contentwrapper) --- */

#contentwrapper {

    width: 100% !important;

    margin: 15px 0 30px 0 !important;

    padding: 0 !important;

    box-sizing: border-box;

}



/* Die weiße Inhaltsbox mit knallharte SCHWARZER KONTURLINIE */

#content {
    background-color: #ffffff !important;
    border: 1px solid #000000 !important;
    padding: 20px !important;    /* Von 30px auf 20px reduziert -> bringt sofort Platz! */
    box-sizing: border-box;
}



#artikeltext {

    display: block;

    width: 100%;

}



/* Typografie-Korrekturen für sauberen Text */

/* Überschriften enger an den Text binden */
#artikeltext h1 {
    font-size: 22px;
    font-weight: bold;           /* Macht die Hauptüberschrift richtig knackig */
    margin-top: 5px;
    margin-bottom: 12px;         /* Weniger Abstand nach unten */
    color: #111111;
}



/* Absätze kompakter machen */
#artikeltext p {
    line-height: 1.45;           /* Kompakterer Zeilenabstand im Fließtext */
    margin-bottom: 10px;         /* Weniger Luft nach unten zum nächsten Absatz */
}



#artikeltext hr {

    border: 0;

    height: 1px;

    background: #cccccc;

    margin: 20px 0;

}



#artikeltext ul {

    padding-left: 20px;

    margin-bottom: 15px;

}



#artikeltext li {

    margin-bottom: 5px;

    line-height: 1.5;

}



/* --- 7. Der Footer --- */

footer {

    width: 100%;

    clear: both;

    background-color: #2b303b; /* Gleiches Dunkelblau-Grau */

    padding: 20px;

    color: #ffffff;

    text-align: center;

    font-size: 12px;

    line-height: 1.8;

    box-sizing: border-box;

    margin-bottom: 20px;

}



footer a {

    color: #ffffff !important;

    text-decoration: underline;

}



footer a:hover {

    text-decoration: none;

} 

/* --- 8. Styling für das Rapid-Contact-Formular --- */
/* Macht die Eingabefelder kompakt und verpasst ihnen die schwarze Konturlinie */
#wrapper .rapid_contact input[type="text"],
#wrapper .rapid_contact input[type="email"],
#wrapper .rapid_contact textarea {
    width: 100% !important;
    max-width: 400px;           /* Begrenzt die Breite, damit die Felder nicht zu lang werden */
    padding: 8px 10px !important;
    margin-bottom: 12px !important;
    border: 1px solid #000000 !important; /* Knallharte schwarze Konturlinie */
    background-color: #ffffff !important;
    font-family: Arial, sans-serif;
    font-size: 14px;
    box-sizing: border-box;
    display: block;
}

/* Die Textarea für die Nachricht etwas höher machen */
#wrapper .rapid_contact textarea {
    height: 120px !important;
    resize: vertical;           /* Erlaubt das Ziehen der Box nur nach unten */
}

/* Gestaltet den Text der Spam-Frage im Stil des Fließtextes */
#wrapper .rapid_contact form {
    font-size: 14px;
    line-height: 1.6;
    color: #333333;
}

/* Der Absende-Button im Stil deines Menüs */
#wrapper .rapid_contact input[type="submit"],
#wrapper .rapid_contact button {
    background-color: #2b303b !important; /* Das graublaue Dunkel */
    color: #ffffff !important;
    border: 1px solid #000000 !important;
    padding: 10px 20px !important;
    font-weight: bold !important;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: block;
    margin-top: 5px;
}

#wrapper .rapid_contact input[type="submit"]:hover {
    background-color: #4f5b66 !important; /* Helleres Grau beim Drüberfahren */
}

/* Abstandhalter nach unten zum Rest des Textes */
#wrapper .rapid_contact {
    margin-bottom: 25px;
}