/* Joomla 6 Cassiopeia Child - Anpassungen */

/* Header Hintergrundfarbe */
:root {
    --cassiopeia-color-primary: #130802 !important;
    --cassiopeia-color-hover: #130802 !important;
}

.container-header {
    background-color: #130802 !important;
    background-image: none !important;
}

/* Logo verkleinern */
.brand-logo img {
    max-height: 50px !important;
    width: auto !important;
    height: auto !important;
}

/* Sicherstellen dass Container das Logo nicht größer macht */
.brand-logo {
    display: inline-block;
    max-height: 50px !important;
}

/* -----------------------------------------------------------
   Hintergrundbild für gesamte Seite
----------------------------------------------------------- */
body {
    font-size: clamp(14px, 1vw + 0.5rem, 18px);

    /* Hintergrundbild */
    background-image: url("/images/Home/bg_home.jpeg");
    background-size: cover;        /* skaliert proportional */
    background-repeat: no-repeat;  /* keine Wiederholung */
    background-position: center;   /* zentriert */
    background-attachment: fixed;  /* bleibt beim Scrollen */
}

/* Detaillierte Kontrolle nach Viewport */
html {
    font-size: 14px; /* Basis für Smartphones */
}

/* Ab Tablet/Desktop (1024px) */
@media (min-width: 1024px) {
    html {
        font-size: 15px;
    }
}

/* Ab großen Bildschirmen (1920px+) */
@media (min-width: 1920px) {
    html {
        font-size: 18px;
    }
}

/* Für alle Textelemente die relative Größen verwenden */
p, li, a, span, div {
    font-size: clamp(14px, 0.875rem + 0.2vw, 18px);
}

/* Überschriften responsive skalieren */
h1 {
    font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
}

h2 {
    font-size: clamp(1.5rem, 1.5vw + 0.875rem, 2rem);
}

h3 {
    font-size: clamp(1.25rem, 1.25vw + 0.75rem, 1.75rem);
}

h4 {
    font-size: clamp(1.125rem, 1vw + 0.625rem, 1.5rem);
}

h5, h6 {
    font-size: clamp(1rem, 0.875vw + 0.5rem, 1.25rem);
}

/* -----------------------------------------------------------
   Dezente Hintergrundfarben für Spalten (wf-column etc.)
   Cassiopeia Child Template
----------------------------------------------------------- */

.wf-bg-soft-blue {
    background-color: #e8f2ff;
    padding: 20px;
    border-radius: 6px;
}

.wf-bg-soft-green {
    background-color: #e9f8ef;
    padding: 20px;
    border-radius: 6px;
}

.wf-bg-soft-yellow {
    background-color: #fff9e5;
    padding: 20px;
    border-radius: 6px;
}

.wf-bg-soft-red {
    background-color: #ffecec;
    padding: 20px;
    border-radius: 6px;
}

.wf-bg-soft-purple {
    background-color: #f3edff;
    padding: 20px;
    border-radius: 6px;
}

.wf-bg-soft-grey {
    background-color: #f5f7fa;
    padding: 20px;
    border-radius: 6px;
}