body {
	background-color: #D40000;
	background-image: url("/media/templates/site/cassiopeia/images/bg.gif");
	background-repeat: repeat;
}
@media print {
  body {
    print-color-adjust: economy !important;
    -webkit-print-color-adjust: economy !important;
    background-color: #ffffff !important;
    background-image: none !important;
  }
}

.header {
  margin: 12px 16px 0 16px;
  background-color: rgb(119, 119, 119);
  -webkit-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
}
.container-header {
   padding-top: 0.2em;
}
.container-header .container-nav {
  padding-bottom: 0.5em !important;
  padding-top: 0 !important;
}
nav.navbar.navbar-expand-lg {
  margin-top: 0 !important;
}
.metismenu.mod-menu .metismenu-item {
  padding-top: 0.1em;
}
.container-header .grid-child .container-nav {
  padding: 0;
}

.site-grid {
  margin: 0 16px 12px 16px;
  background-color: rgb(187, 187, 187);
  -webkit-border-radius: 0 0 10px 10px;
  -moz-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
}
@media (max-width: 992px) {
  .header {
    margin: 6px 2px 0 2px !important;
  }
  .site-grid {
    margin: 0 2px 6px 2px !important;
  }
}

@media (min-width: 992px) {
  .navbar-brand::after {
    content: url('/images/logo/since2002.png');
    display: inline-block;
    margin-left: 10px;
  }
}


h1, h2, h3 :not(.ig-menu-grid-text) {
  /* Nicht für Ignite Gallery Überschriften */
  color: #FCFC00 !important;
}
.ig-menu-grid-text h3 {
  font-size: 1.0rem !important;
}

.blog-items .blog-item {
    border-radius: 8px;
    padding: 6px;
    margin-bottom: 2px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* Sanfter Schatten */
    border: 1px solid #e9ecef; /* Sehr feine Außenlinie */
    transition: transform 0.2s ease-in-out;
}

/* Hover-Effekt */
.blog-items .blog-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.bottom-a {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 0;
}

/* Titel-Styling: Blau und kräftig */
.blog-items .page-header h2 a {
    color: #0056b3; /* Dunkelblau-Ton */
    text-decoration: none;
    font-weight: 700;
}

.blog-items .page-header h2 a:hover {
    color: #003d80;
    text-decoration: underline;
}

/* Beitragsbild-Anpassung */
.blog-items .item-image {
    margin-bottom: 15px;
    border-radius: 4px;
    overflow: hidden;
}

/* Weiterlesen-Button im Stil der Seite */
.blog-items .readmore .btn {
    background-color: #0056b3;
    border-color: #0056b3;
    color: #fff;
    border-radius: 50px; /* Abgerundete Buttons */
    padding: 8px 25px;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.blog-items .readmore .btn:hover {
    background-color: #003d80;
}

.metismenu.mod-menu .metismenu-item {
	padding: .1em 0.8em !important;
}

.metismenu-item.active > a, 
.metismenu-item.current > a {
    font-family: Arial, Helvetica, sans-serif;
}

/* Hintergrundfarbe des aktiven Menüpunkts anpassen */
.metismenu-item.active > a, 
.metismenu-item.current > a {
    font-weight: bold;
}

/* Optional: Hintergrundfarbe beim Drüberfahren (Hover) */
.metismenu-item > a:hover {
    background-color: #7d7d7d !important;
    border-radius: 4px;
}

/** Eingabefelder **/
button, .button {
	padding: 2px 4px 2px 4px;
	margin: 10px 2px 10px 2px;
	font-size: 12px;
	line-height: 1.3em;
	color: #fff;
	background-color: #E00000;
	border: 1px;
	border-style: solid;
	border-color: #000000;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	box-shadow: 0px 1px 3px #777777, 0px 1px 0px #E05555 inset;
	-moz-box-shadow: 0px 1px 3px #777777, 0px 1px 0px #E05555 inset;
	-webkit-box-shadow: 0px 1px 3px #777777, 0px 1px 0px #E05555 inset;
}
button:hover, .button:hover {
	background-color: #FF0000 !important;
	cursor: pointer;
	text-decoration: underline;
}
input, select, textarea {
	padding: 0.1em 0.2em !important;
	font-size: 12px;
	color: #fff;
	background-color: #666666 !important;
	border: 1px;
	border-style: solid;
	border-color: #000000;
}
input[type=radio] { 

}
select option {
	background-color: #555555 !important;
}
.form-select {
    /* Das Original-Bild hat einen weissen Hintergrund => Bild mit transparentem Hintergrund! */
    background-image: url("/media/templates/site/cassiopeia/images/select-bg-tr.svg?v=5ebba0") !important;
}
input:hover, textarea:hover  {
	background-color: #333333 !important;
}
input, select {
	margin: 0 0 5px 0 !important;
}

label#username-lbl, label#password-lbl {
	margin-top: 7px;
	display: block;
	float: left;
	width: 100px;
}
div.login-description, div.logout-description {
	font-size: 14px; font-style: oblique; font-weight: bold; text-transform: uppercase; color: #FCFC00; background-color: #EE0000;
	margin-bottom: 7px;
}
div.login input#secretkey, div.login label#secretkey-lbl {
	visibility: hidden;
	line-height: 0;
}
.footer .grid-child {
	padding: 0.5em;
}
.footer .grid-child p {
  margin: 0;
}

/* Meldungen */
joomla-alert {
  --bs-alert-color: #000000 !important;
  color: #000000 !important;
}

joomla-alert .joomla-alert--close, joomla-alert .joomla-alert-button--close {
    margin: 4px !important;
	padding: 0.4rem 0.8em !important;
}

/* Cassiopeia Dark Mode für das Login-Modul / die Login-Seite */

/* Input-Felder (Benutzername & Passwort) */
.mod-login .form-control,
.login .form-control {
  color: #ffffff !important;
}

/* Input-Felder beim Anklicken (Focus) */
.mod-login .form-control:focus,
.login .form-control:focus {
  color: #ffffff !important;
}

/* Primary Button (Anmelden) */
.mod-login .btn-primary,
.login .btn-primary {
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Links (Passwort/Benutzername vergessen) */
.mod-login a,
.login a {
  color: #818cf8 !important;
}

.mod-login a:hover,
.login a:hover {
  color: #a5b4fc !important;
  text-decoration: underline !important;
}

/* Beide Input-Gruppen flexibel auf gleiche Höhe bringen */
.mod-login .input-group,
.login .input-group {
  display: flex !important;
  align-items: center !important;
  height: 2.75rem !important; /* Standardisierte Gesamthöhe */
}
/* Alle Kind-Elemente (Inputs, Text-Addons & Passwort-Toggle-Button) anpassen */
.mod-login .input-group > .form-control,
.login .input-group > .form-control,
.mod-login .input-group > .input-group-text,
.login .input-group > .input-group-text,
.mod-login .input-group > button,
.login .input-group > button {
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
}
/* "Angemeldet bleiben" Checkbox & Label in eine Zeile zwingen */
.mod-login .form-check,
.login .form-check,
.mod-login #form-login-remember,
.login #form-login-remember,
.mod-login .control-group-remember,
.login .control-group-remember {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;        /* Abstand zwischen Checkbox und Text */
  white-space: nowrap !important; /* Verhindert den Zeilenumbruch */
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
}

/* Position der Checkbox korrigieren */
.mod-login .form-check-input,
.login .form-check-input,
.mod-login input[type="checkbox"],
.login input[type="checkbox"] {
  margin: 0 !important;
  float: none !important;        /* Hebt störende Bootstrap-Floats auf */
  flex-shrink: 0 !important;     /* Verhindert Quetschen der Checkbox */
  cursor: pointer !important;
}

/* Label-Text anpassen */
.mod-login .form-check-label,
.login .form-check-label,
.mod-login label[for="remember"],
.login label[for="remember"] {
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
/* Hintergrund und Icon-Farbe für die Input-Group-Addons (Benutzer/Schlüssel Icon) */
.mod-login .input-group-text,
.login .input-group-text,
.mod-login .input-group-text span,
.login .input-group-text span,
.mod-login .input-group-text i,
.login .input-group-text i,
.mod-login .input-group-text svg,
.login .input-group-text svg {
  background-color: #334155 !important; /* Dunklerer Hintergrund für das Icon-Feld */
  border-color: #334155 !important;     /* Passender Rahmen */
  color: #94a3b8 !important;            /* Helles/Silbernes Icon (gut sichtbar) */
  fill: #94a3b8 !important;             /* Für SVG-Icons */
}

/* Optional: Icon-Farbe aufhellen, wenn das Feld fokussiert wird */
.mod-login .input-group:focus-within .input-group-text,
.login .input-group:focus-within .input-group-text {
  color: #6366f1 !important;            /* Indigo Akzent-Farbe beim Tippen */
  fill: #6366f1 !important;
}
/* Farb-Anpassung für den Passwort-Toggle Button (Auge-Icon) */
.mod-login .input-group button.btn,
.login .input-group button.btn,
.mod-login .input-group .btn-outline-secondary,
.login .input-group .btn-outline-secondary {
  background-color: #334155 !important; /* Identischer dunkler Hintergrund */
  border-color: #334155 !important;     /* Identischer Rahmen */
  color: #94a3b8 !important;            /* Helligkeit/Farbe des Icons */
  fill: #94a3b8 !important;             /* Falls ein SVG-Icon genutzt wird */
}

/* Hover- & Focus-Zustand für das Passwort-Icon */
.mod-login .input-group button.btn:hover,
.login .input-group button.btn:hover,
.mod-login .input-group button.btn:focus,
.login .input-group button.btn:focus {
  background-color: #475569 !important; /* Leichte Aufhellung beim Darüberfahren */
  border-color: #475569 !important;
  color: #6366f1 !important;            /* Indigo Akzent-Farbe */
  fill: #6366f1 !important;
  box-shadow: none !important;
}
/* Links unter dem Login auf Dunkelblau setzen */
.mod-login a,
.login a,
.mod-login .form-links a,
.login .form-links a {
  color: #1e3a8a !important; /* Kräftiges Dunkelblau (Tailwind Blue 900) */
  font-weight: 500 !important;
}

/* Hover-Zustand für die Links */
.mod-login a:hover,
.login a:hover,
.mod-login .form-links a:hover,
.login .form-links a:hover {
  color: #2563eb !important; /* Etwas helleres Blau beim Darüberfahren für Feedback */
  text-decoration: underline !important;
}

/* Kalender */
@media (max-width: 992px) {
  div#jevents_body {
    font-size: clamp(30%, 2.3vw, 100%) !important;
    /*font-size: 60% !important; */
  }
  a.cal_titlelink {
    font-size: clamp(10%, 1.8vw, 100%) !important;
  }
}

/* Pagination */
@media (max-width: 576px) {
  .page-item {
    display: none;

    &:nth-of-type(4) {
      position: relative;
      padding-right: 45px;

      &::after {
        content: '\2026';
        position: absolute;
        font-size: 24px;
        top: 0;
        left: 45px;
      }
    }

    &:nth-child(-n+4),
    &:nth-last-child(-n+4) {
      display: block;
    }
  }

  .counter {
    display: none;
  }
}