/* ============================================================
   Lungwitz Safety – Corporate Design für Cassiopeia (Joomla 5)
   Sicherheitsblau (#004C97) + Feuerwehrrot (#CC0000)
   ============================================================ */

/* 1) Farben / Variablen */
:root{
  --ls-blue:#004C97;
  --ls-red:#CC0000;
  --ls-text:#1E1E1E;
  --ls-white:#FFFFFF;
}

/* 2) Grundtypografie / Links */
html,body{
  color:var(--ls-text);
  background:#fff;
  line-height:1.7;
}

body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

h1,h2,h3,h4,h5{
  color:var(--ls-blue);
  font-weight:600;
  line-height:1.25;
  margin:1.2rem 0 .6rem;
}

p{margin:0 0 1.1rem;}

a{
  color:var(--ls-blue);
  text-decoration:none;
  transition:color .2s,border-color .2s;
}
a:hover{color:var(--ls-red);}

h2::after{content:none!important;}

/* 3) Buttons */
.btn,.btn-primary,button{
  color:#fff!important;
  background:var(--ls-blue)!important;
  border:1px solid var(--ls-blue)!important;
  font-weight:600;
  transition:background .2s,border-color .2s;
}

.btn:hover,.btn-primary:hover,button:hover{
  background:var(--ls-red)!important;
  border-color:var(--ls-red)!important;
}

/* 4) Header & Branding */
.container-header,
.header{
  background:var(--ls-blue)!important;
  color:#fff!important;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}

/* Abstände im Header */
.container-header .grid-child,
.header .grid-child{
  padding-top:10px;
  padding-bottom:10px;
}

/* Brand + Menü untereinander anordnen */
.header .container-nav{
  display:grid;
  grid-template-rows:auto auto;
  grid-template-columns:1fr;
  row-gap:.35rem;
}

/* Titelblock links */
.header .navbar-brand{
  justify-self:start;
}

/* Site-Titel & Slogan */
.header .navbar-brand .site-title,
.header .site-title,
.brand .site-title{
  color:#fff!important;
  font-weight:800;
  letter-spacing:.2px;
  font-size:clamp(1.2rem,2.4vw,1.6rem);
  display:block;
}

.header .navbar-brand .site-description,
.header .site-description,
.brand .site-description{
  color:rgba(255,255,255,.85)!important;
  font-weight:400;
  font-size:clamp(.82rem,1.3vw,.95rem);
  display:block;
  margin-top:.1rem;
}

/* Logo-Bild (falls später gewünscht, display:none entfernen) */
.header .navbar-brand img,
.brand img{
  display:none!important;
}

/* 5) Hauptnavigation oben */
.header .mod-menu{
  justify-self:center;
}

.header .mod-menu ul{
  list-style:none!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  gap:6px!important;
}

.header .mod-menu a{
  color:#fff!important;
  font-weight:600;
  text-decoration:none!important;
  padding:8px 12px;
  border-bottom:3px solid transparent;
  transition:border-color .2s,color .2s,background-color .2s;
}

.header .mod-menu a:hover,
.header .mod-menu a:focus{
  color:#fff!important;
  border-bottom-color:var(--ls-red);
}

.header .mod-menu .current a,
.header .mod-menu .active> a{
  color:#fff!important;
  border-bottom-color:var(--ls-red);
}

/* 6) Content-Bereich (Textspalte) */
.container-component{
  max-width:1080px;
  margin:2rem auto;
  padding:0 1rem;
  position:relative;
  z-index:1; /* über dem Hintergrundbild */
}

.container-component img{
  border-radius:6px;
}

.container-component img[align="right"],
.container-component img.align-right,
img[style*="float: right"]{
  margin-left:16px!important;
  margin-bottom:8px!important;
  max-width:240px;
  height:auto;
  border-radius:6px;
}

/* 7) Zufälliges Hintergrundbild hinter dem Content
   (body-Klasse kommt aus index.php: bg1 / bg2 / bg3) */
.container-component::before{
  content:"";
  position:absolute;
  inset:0;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  opacity:0.25;           /* Helligkeit: 0.5 = heller, 0.9 = kräftiger */
  pointer-events:none;
  z-index:-1;
}

/* Bildzuordnung zu den bg-Klassen */
body.bg1 .container-component::before{
  background-image:url("/images/bilder/IMG_7413.jpg");
}

body.bg2 .container-component::before{
  background-image:url("/images/bilder/IMG_7437.jpg");
}

body.bg3 .container-component::before{
  background-image:url("/images/bilder/IMG_7481.jpg");
}

/* 8) Footer */
.container-footer,
footer{
  background:var(--ls-blue)!important;
  color:#fff!important;
  text-align:center;
  padding:16px 0!important;
}

/* Footer-Menü zentrieren */
.container-footer .mod-menu{
  display:flex;
  justify-content:center;
  gap:12px;
}

.container-footer .mod-menu ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:12px;
}

.container-footer a,
footer a{
  color:#fff!important;
  border-bottom:2px solid transparent;
  transition:border-color .2s;
}

.container-footer a:hover,
footer a:hover{
  border-bottom-color:var(--ls-red);
}

/* 9) Responsive */
@media (max-width:768px){
  .container-component{
    padding:0 .8rem;
  }

  .container-header .grid-child,
  .header .grid-child{
    padding-top:8px;
    padding-bottom:8px;
  }

  .header .mod-menu ul{
    flex-wrap:wrap;
    justify-content:center;
  }

  .header .mod-menu a{
    padding:6px 8px;
  }

  .navbar-brand{
    width:100%;
    padding:4px 0!important;
  }

  .header .site-title{font-size:1.25rem;}
  .header .site-description{font-size:.82rem;}
}
/* gesamter Bereich zwischen Header und Footer */
body.site {
    background-color: #e9eef5 !important;
}

/* Beitragsbereich bleibt transparent/weiß */
.container-component {
    background: transparent !important;
}