/* Feuerwehr Hemsbach - style.css (updated) */
:root {
  --primary: #b00000;
  --primary-dark: #990000;
  --primary-hov: #e50000;
  --primary-disabled: #999;
  --primary-disabled-dark: #555;
  --bg: #ffffff;
  --muted: #666666;
  --navbar-bg: #313232;
  --navbar-hover-bg: var(--primary);
  --footer-bg: #111;
  --footer-border: var(--primary-dark);
  --footer-color: #ccc;
  --link-hover: #ff0000;
  --table-th-bg: #616262;
  /*overrides*/
  --bs-pagination-active-bg: #b00000;
  --bs-modal-zindex: 10055;
}

/* Body als Flex-Container */
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  color: #222;
  background: var(--bg);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Höhe mindestens Bildschirmgröße */
  font-size: 16px;
}
.no-scroll {
  overflow: hidden;
  height: 100%;
}

/* Hauptbereich soll den verbleibenden Platz füllen */
.site-content {
  flex: 1;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

a {
  color: var(--primary-dark);
}
a:hover {
  color: var(--link-hover);
}

/* Logo + Datum + Social */
.logo-social-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 2.5vw;
  flex-wrap: wrap;
}

.header-right .current-date {
  color: #555;
}

.header-right .social-icons {
  display: flex;
  gap: 1em;
}

.header-right .social-link {
  color: #000;
  font-size: 1.5rem;
  text-decoration: none;
}

.header-right .social-link:hover {
  color: var(--primary);
}

/* logo */
.logo {
  padding: 10px;
}
.logo img {
  height: 9em;
  width: auto;
  display: block;
}

/* Navbar sticky */
.navbar {
  width: 100%;
  background: var(--navbar-bg);
  position: sticky;
  top: 0;
  z-index: 100;
  margin-bottom: 0.7em;
  padding: 0;
  min-height: 2px;
}

.navbar .container {
  display: flex;
}

/* Hauptmenü horizontal */
.navbar .mod-menu {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
}

.navbar .mod-menu > li {
  position: relative;
  text-wrap: nowrap;
}

.navbar .mod-menu > li > a,
.navbar .mod-menu > li span {
  color: #fff;
  text-decoration: none;
  display: block;
  font-weight: bold;
  transition: background 0.3s;
  padding: 8px min(0.7vw, 12px); 
  text-wrap: nowrap;
}

.navbar .mod-menu > li span:hover {
  cursor: default;
}
.navbar .mod-menu > li > a:hover,
.navbar .mod-menu > li > span:hover {
  background: var(--navbar-hover-bg);
  border-radius: 0; /* keine Abrundung */
}
/*active menu*/
ul li.nav-item.current > a {
    box-shadow: inset 0 -4px 0 0 var(--navbar-hover-bg);
}

/* Untermenü (Dropdown) */
.navbar .mod-menu li.deeper ul.mod-menu__sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 180px;
  z-index: 101;
  background: var(--navbar-bg);
}

.navbar .mod-menu li.deeper:hover > ul.mod-menu__sub {
  display: block;
}

.navbar .mod-menu li.deeper ul.mod-menu__sub li a {
  color: #fff;
  padding: 8px 12px;
  font-weight: normal;
  text-decoration: none; /* keine Unterstreichung */
  display: block;
}

.navbar ul.mod-menu__sub {
    outline: solid 1px #ffffff44;
}

.navbar .mod-menu li.deeper ul.mod-menu__sub li a:hover {
  background: var(--navbar-hover-bg);
}

/* Pfeile für Untermenüs entfernen */
.navbar .mod-menu li.deeper > a:after {
  content: "";
}

/* Hamburger Icon */
.menu-toggle {
  display: none;
  border: none;
  background: var(--navbar-bg);
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  z-index: 201; /* über allem */
  position: fixed;
  right: 0.2em;
  top: 0.2em;
  border-radius: 0.3em;
}

/* Wrapper für das Menü */
.menu-wrapper {
  flex: 1;
}

/* group */
.group {
  position: relative;
  overflow: hidden;
  border-radius: 0.5em;
  background: var(--navbar-bg);
}
.group img {
  width: 100%;
  min-height: 200px;
  object-fit: cover;
  display: block;
  filter: brightness(0.95);
  max-width: 2000px;
  margin-left: auto;
  margin-right: auto;
}
.group-text {
  position: absolute;
  left: 20px;
  bottom: 30px;
  color: #fff;
  text-shadow: 0 0 2px black;
}
.group-text h1 {
  margin: 0;
  color: #fff;
  font-size: 1.8rem;
}
.group-text p {
  margin: 6px 0 0;
}

/* module row */
.module-row {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.module-row > * {
  flex: 1 1 30%;
  background: #f7f7f7;
  padding: 15px;
  border-radius: 6px;
}

/* footer */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-color);
  padding: 20px;
  border-top: 4px solid var(--footer-border);
}
.site-footer p {
  margin: 6px 0 0;
  font-size: 0.9em;
}

.impress {
  color: #fff;
  float: right;
}
.loginIcon {
  position: absolute;
  left: 0.5em;
  color: #555;
  font-size: 1.2rem;
  margin-top: -2rem;
}

/* content */
h1 {
  font-size: 1.6em;
  color: var(--primary);
}
h2 {
  font-size: 1.4em;
  color: var(--primary-dark);
}
h3 {
  font-size: 1.2em;
  color: var(--primary-dark);
}

h1>a, h2>a, h3>a {
    text-decoration: none;
	/*box-shadow: inset 0px -3px 1px -2px var(--primary-dark);*/
}

h1[itemprop="headline"] {
    font-size: 1.4em; /*Korrektur*/
}
div:has(h1[itemprop="headline"]) h2 {
  font-size: 1.3em;
}
div:has(h1[itemprop="headline"]) h3 {
  font-size: 1.2em;
}

.main img {
  min-width: min(40em, 100%);
  max-width: min(40em, 100%);
  height: auto;
  outline: solid 1px #ddd;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.main {
  display: inline-block;
  background: #fafafa;
  box-sizing: border-box;
  padding: 20px 0;
  width: 100%;
  margin: 1em 0;
  border: solid 1px #f3d3c3;
}
.main > div:not(.blog) {
  margin: 0 2.5em;
}
.main:has(.blog) {
  background: none;
  border: none;
  margin: 0;
}
.main:has(.blog) div.blog-item {
  background: #fafafa;
  border: solid 1px #f3d3c3;
  padding: 1em 2.5em 0;
  margin: 1em 0;
}

.main img:hover {
  transform: scale(1.02);
}

.article-info {
    display: flex;
    gap: 1em;
    font-size: 0.9em;
    margin: 0;
    position: relative;
    left: -1em;
}
.createdby {
  	display: inline-block;
    text-indent: -5.8em;  /* nach links schieben, dass "Geschrieben " verschwindet */
    overflow: hidden;
} 

.published time[itemprop="datePublished"] {
    display: inline-block;
    text-indent: -6.4em;  /* nach links schieben, dass "Veröffentlicht: " verschwindet */
    overflow: hidden;
}
.readmore {
    margin-top: 2em;
}

thead {
  line-height:1em;
}


/* Pagination */
.pagination {
  --bs-pagination-color: #fff;
  --bs-pagination-bg: var(--primary-dark);
  --bs-pagination-border-color: var(--primary);
  --bs-pagination-hover-color: var(--primary);
  --bs-pagination-hover-border-color: var(--primary-hov);
  --bs-pagination-focus-color: var(--primary);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: var(--primary);
  --bs-pagination-active-border-color: var(--primary-hov);
}
.icon-angle-left,
.icon-angle-right,
.icon-angle-double-left,
.icon-angle-double-right {
  font-weight: bold;
  font-size: 0.9em;
  text-shadow: 0 0px 1px #fff;
}
.icon-angle-double-left:after {
  content: "<<";
}
.icon-angle-left:after {
  content: "<";
}
.icon-angle-double-right:after {
  content: ">>";
}
.icon-angle-right:after {
  content: ">";
}

/*next-button*/
span.pagination a.next {
    margin-left: 1em;
}

/* Suche */
.header-right .awesomplete {
    z-index: 200;
}
.awesomplete mark, .awesomplete li:hover mark {
	background: none;
}

/* button */
.btn, .btn-primary {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary-hov);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-active-bg: var(--primary);
  --bs-btn-active-border-color: var(--primary);
  color: #fff;
}
.btn:hover {
  color: #fff;
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    --bs-btn-disabled-bg: var(--primary-disabled);
    --bs-btn-disabled-border-color: var(--primary-disabled-dark);
}
.btn.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #6c757d;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5c636a;
    --bs-btn-hover-border-color: #565e64;
    --bs-btn-focus-shadow-rgb: 130,138,145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #565e64;
    --bs-btn-active-border-color: #51585e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
}

.link-no-deco {
  text-decoration: none;
}


/*editor*/
.main .edit {
    margin: 0;
}

.main:has(div.edit) {
    border: none;
}

.tox.tox-tinymce-aux {
    z-index: 10000;
}

div.tox-dialog {
    width: 95vw !important;
    height: 80vh !important;
    max-height: initial !important;
    max-width: initial !important;
}

.tox .tox-dialog__content-js {
    overflow: hidden !important;
}

/*margin für title*/
.control-group:has(input#jform_title)
{
  margin-bottom: 1em;
}

/*alias verstecken*/
.control-group:has(input#jform_alias) {
    display:none;
}

/*CMS-Content-Menü*/
/* Unerwünschte Items ausblenden */
.tox div .tox-collection__item[title="Beitrag"],
.tox div .tox-collection__item[title="Felder"],
.tox div .tox-collection__item[title="Kontakt"],
.tox div .tox-collection__item[title="Menü"],
.tox div .tox-collection__item[title="Modul"] {
    display: none;
}
/*menu*/
.tox .tox-menubar {
    background-color: #efefef;
}
.tox div .tox-collection__item[title="Bild..."],
.tox div .tox-collection__item[title="Medien..."],
.tox div .tox-collection__item[title="Vorlage einfügen..."],
.tox div .tox-collection__item[title="Codebeispiel..."] {
    display: none;
}
/*Veröffentlichen*/
.control-group:has(#jform_featured) {
  display: none;
}
.control-group.hidden, .control-group:has(.control-label:empty) {
    display: none;
}

/*modal*/
.modal-content {
    z-index: 2000000;
    top: 4rem;
}

.modal-body {
    padding: 0;
}

iframe.iframe {
    width: calc(100% - 2px);
}

/* Fahrzeuge */

.vehicle {
    border: solid 1px #ccc;
    padding: 1em;
    background-color: #eee;
}

.vehicle.container {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
}

.vehicle.container > div {
    margin-bottom: 2em;
}

.vehicle_type {
    font-size: 0.9em;
    color: #444;
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vehicle_header {
    line-height: 1em;
    margin-bottom: 1.5em;
}

.vehicle_header > div {
    overflow: hidden;
    display: block;
    text-overflow: ellipsis;
}

.vehicle h4 {
    margin: 0;
}

.vehicle_img {
  margin-bottom: 1.5em;
  aspect-ratio: 2;
  object-fit: contain;
}

.vehicle_img img:hover{
  transform:none;
}

ul.vehicle_features {
    list-style: none;
    list-style-type: none;
    font-size: 0.85em;
    margin: 0;
    padding: 0;
    color: #444;
    margin-bottom: 1.5em;
}

.vehicle .btn {
    margin-left: auto;
    margin-right: auto;
    display: block;
    font-size: 0.9em;
}


.vehicle-info {
    border: solid 1px #ccc;
    padding: 1em;
    background-color: #eee;
    margin-bottom: 1em;
}
.vehicle-info ul {
    list-style: square;
}

.fzgLnk {
    float: right;
    margin-right: 0.2em;
    margin-top: -0.7em;
}

/* Kontakt */
#jform_spacer-lbl {
  float: right;
  margin-right: 1em;
  font-size: 0.9em;
}
.contact-form .btn-primary {
  margin: 0.5em 0;
}

/* Login-Form */
.com-users-login__input {
  margin: 1rem 0;
}
.icon-eye,
.icon-eye-slash {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor; /* übernimmt Textfarbe */
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

.plg_system_webauthn_login_button {
  display:none;
}

.com-users-login__submit.control-group {
  margin: 1em;
}

.com-users-login__options.list-group {
  font-size: 0.8em;
  margin: 1em;
}

.com-users-login span.form-control-feedback {
  display: none;
}

dl, dd {
  max-width: 100%;
  overflow-wrap: anywhere;
}

#contact-form .btn-primary:disabled {
  opacity: 0;
}

#contact-form .form-control-feedback {
    color: #f00000;
    font-size: 0.9em;
    padding-left: 0.5em;
}

#contact-form .control-group {
    margin: 0.5em 0;
}

/*Terminverwaltung*/
.filter-section {
    background-color: #f8f9fa;
    padding: 0.5em;
    border-radius: 5px;
    border: 1px solid #dee2e6;
    font-size: 0.9em;
    color: #888;
}
.filter-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1em;
}
.form-check-inline {
    margin-right: 15px;
}
.eventgroup {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
}

.eventline {
    margin-top: 0.2em;
    border: solid 1px #dee2e6;
    min-height:2.5em;
    position: relative;
    display: block;
    padding: 0.5em 1em;
    text-decoration: none;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

.eventline span {
    display: inline-block;
    vertical-align: top;
}

.eventline .eventtime{
	display: flex;
	flex-wrap: nowrap;
	gap: 1.2em;
}
.eventline .weekday {
    width:4.5em;
}

.eventline .date {
    width: 6em;
    white-space: normal;
	text-align: right;
}

.eventline .starttime {
    width: 5ch;
	max-width: 4em;
}

.eventline .eventtitle {
    margin-left: 0.8em;
    flex: auto;
    min-width: min(25em, 100%);
}

.eventline .eventinfo {
    color: #888;
    font-size: 0.9em;
    margin-left: auto;
    min-width: 9em;
    text-align: end;
	line-height: 0.9em;
}

.eventline .eventactions {
    text-align: end;
}

/*Einsätze*/
.einsatzTable {
  	margin-top: 1em;
    border-spacing: 0 0.4em;
    border-collapse: separate;
}

.einsatzTable td {
    border-top: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
}

.einsatzTable tr td:last-of-type {
    border-right: solid 1px #ccc;
}

.einsatzTable tr td:first-of-type {
    border-left: solid 1px #ccc;
}
.einsatzTable th {
    background-color: var(--table-th-bg);
    color: #fff;
    font-size: 0.9em;
    font-weight: normal;
}

td.einsatzNummer {
    font-size: 0.9em;
    color: white;
    background-color: var(--primary);
    width: 4em;
}

td.einsatzZeit, td.einsatzOrt, td.einsatzBericht {
    font-size: 0.9em;
    color: #333;
}
td.einsatzBericht {
  width: 2em;
  white-space: nowrap;
}

span.einsatzZeit-sm {
    display: none;
}
span.einsatzZeit-md {
    display: inline-block;
}

.com-einsatz .row {
    margin-bottom: 1em;
}
#createReportBtn, #deleteBtn {
    float: right;
  	margin-left: 0.3em;
}

/*login/logout*/
fieldset#users-profile-custom,
fieldset#users-profile-custom-actionlogs,
fieldset#users-profile-custom-webauthn,
fieldset#users-profile-custom-joomlatoken
{
    display: none;
}

li.nav-item:has(a.logout) {
  margin-left: auto;
  margin-right: 1em;
}
a.logout {
    outline: solid 1px #666;
    margin: 1px 0.5em;
    box-shadow: inset 0 0 2em 0.5em var(--primary-dark);
    padding: 0.3em 1em !important;
}


/*admin*/
.icons {
    position: relative;
    float: right;
    top: -1.6rem;
    background: #fafafa;
}
.icon-edit {
    display: inline-block;
    width: 24px;
    height: 24px;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg%3E%3Cpath d='M21.25 19.5c.4 0 .75.35.75.75s-.35.75-.75.75H8.05l1.05-1.5zm-17.9-2.35l3.15 2.2L3 21zM13.9 2.1c.55-.8 1.8-1.05 2.65-.45l.136.1c.783.625.932 1.745.364 2.55l-9.7 13.8-3.15-2.2z' fill-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E");
    background-color: var(--primary-dark);
}
.icon-edit:hover {
    background-color: var(--primary-hov);
    cursor: pointer;
}
a:has(.icon-edit) {
    position: relative;
    font-size: 0;
}
a .icon-edit {
    font-size: 16px;
}
a[aria-describedby] [role="tooltip"] {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    white-space: nowrap;
    background: #333;
    color: #fff;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
    z-index: 1000;
}
a[aria-describedby]:hover [role="tooltip"] {
    display: block;
}
/*neuer beitrag*/
.mb-2 .btn {
    margin: 1em 0 0;
}

/*Bildanzeige*/
img.md, img.sm{
  /*kleine Anzeige*/
    min-width: auto;
    width: max(calc(100% / 2 - 0.5em), 30em);
    box-shadow: 0px 0px 0px 1px #f3d3c3;
    margin: 0.5em;
    vertical-align: top;
}
img.sm { 
  width: max(calc(100% / 4 - 0.5em), 15em); 
}

img.org, img.icon {
  	width:auto;
	min-width:auto;
	box-shadow: 0px 0px 0px 1px #f3d3c3;
    margin: 0.5em;
    vertical-align: top;
    cursor: default;
}
img.org:hover,  img.icon:hover {
	transform: none;  
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
    gap: 1em;
	margin-bottom:0.5em;
}
.gallery img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    box-shadow: 0 0 0 1px #f3d3c3;
}

div[class='row'] div[class^='col-md'] img.md {
    margin: 0;
}
figcaption {
    font-size: 0.9em;
    color: #793a3a;
    font-style: italic;
    padding-left: 0.2em;
    padding-top: 0.2em;
}


#imageModal {
    transform: scale(1.1);
    --bs-modal-width: 90vw;
    z-index: 20000;
}

img#modalImage {
    background-color: #fff;
    max-height: 70vh;
}

#imageModal div.modal-body {
    margin: 1rem;
}

#imageModal .btn-close {
    opacity: 0.8;
    margin: 0.2em !important;
}
#imageModal .carousel-control-next, 
#imageModal .carousel-control-prev {
  opacity: 0.7;
  width: auto;
}

/* --------------------------- */
/* Responsive Styles */
/* --------------------------- */
@media (min-width:900px) {
   ul li ul li.nav-item.current > a {
     background: var(--navbar-hover-bg);
  }
  /* news - blog-layout */
  .blog-container {
      display: inline-flex;
      gap: 1em;
      padding-left: 0;
      padding-right: 0;
      font-size: 1em;
  }

  .main .blog-container > div.blog-item {
      flex-basis: 33%;
      padding-right: 2em;
      padding-left: 2em;
      padding-bottom: 1em;
  }
  .blog-container > .blog-item .page-header {
      overflow: hidden;
      text-overflow: ellipsis;
      line-clamp: 2;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      height: 2.4lh;
  }

  .blog-container > .blog-item .article-info {
      display: none;
  }

  .blog-container > .blog-item div.item-content {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 12;
      line-clamp: 12;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 0.95em;

  }

  .blog-container > .blog-item div.item-content img {
      height: 15em;
      width: auto;
      min-width: auto;
      max-width: calc(100% - 2px);
      object-fit: contain;
      float: none !important;
      display: block;
      margin: 0.5em auto 1em;
      text-align: center;
  }

  .main .blog-container > div.blog-item:first-of-type {
      flex-grow: 1;
  }
  .blog-container > .blog-item div.item-content img:not(:first-of-type) {
    display: none !important;
  }
}

@media (max-width: 991px) {
  .main img:not(.md):not(.sm):not(.icon):not(.org) {
    width: 100%;
	max-width: initial;
    height: auto;
  }
}
@media (max-width: 900px) {
  /* Body */
  body {
    font-size: 1.1em;
    line-height: 1.6;
  }

  /* Header / Logo */
  .site-header {
    margin-right: 3em;
  }
  .current-date {
    display: none;
  }
  .logo img {
    height: auto;
    width: 50vw;
  }

  .header-right .bi {
    font-size: 1.5rem;
  }

  .navbar .mod-menu {
    flex-direction: column;
    flex-wrap: wrap;
  }
  .navbar .mod-menu li.deeper ul.mod-menu__sub {
    position: static;
    background: none;
  }
  .navbar ul.mod-menu__sub {
    outline: none;
  }

  ul.mod-menu__sub li {
    width: calc(90vw - 1em);
    position: relative;
    left: 1em;
    border-top: solid 1px #000;
    border-bottom: none;
    padding: 0.5em;
  }
  .navbar .mod-menu li.deeper:hover > ul.mod-menu__sub {
    display: none;
  }

  /* Hamburger Menu */
  .navbar .container {
    justify-content: space-between;
    align-items: center;
    position: relative;
  }
  .menu-toggle {
    display: block;
  }
  .menu-wrapper {
    display: none;
  }
  .menu-wrapper.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    inset: 0;
    background: rgba(49, 50, 50, 0.98);
    z-index: 20000;
    max-height: 100vh;
    overflow-y: auto;
    padding-bottom:1em;
  }
  .menu-wrapper .mod-menu {
    flex-direction: column;
    align-items: baseline;
    gap: 1.2em;
  }
  .menu-wrapper .mod-menu li a,
  .menu-wrapper .mod-menu li span {
    font-size: 1.3rem;
    color: #fff;
  }
  .menu-wrapper .mod-menu li a:hover {
    background: var(--primary);
  }
  .nav-item {
    border-bottom: solid 1px #fff;
    width: 90vw;
  }
  .navbar:has(div.active) {
    z-index: 10999;
  }
  .navbar .mod-menu > li:first-of-type {
    margin-top: 1.2rem;
  }
  a.logout {
    margin:0;
  }

  /* Group / Images */
  .grid {
    flex-direction: column;
  }
  .sidebar {
    flex-basis: auto;
    width: 100%;
  }
  .group img {
    height: auto;
    min-height: initial;
    max-height: 200px;
  }
  .group-text {
    display: none;
  }
  
  /* admin */
  .mb-2 .btn {
    width: 100%;
  }
  .edit.item-page {
    margin: 0;
  }

  /* Content */
  .main > div:not(.blog) {
    margin: 0 1.5em;
  }
  .main {
  	overflow-y: auto;
  }
  .main:has(.blog) > div {
    margin: 0;
  }
  .main:has(.blog) div.blog-item {
    padding: 1em 1.5em 0;
    margin: 1em 0;
  }
  h1 {
    font-size: 1.5em;
  }
  h2 {
    font-size: 1.3em;
  }
  h3 {
    font-size: 1.2em;
    color: var(--primary-dark);
  }
  .page-header {
    width: calc(100% + 1em);
    position: relative;
    left: -0.5em;
  }
  .article-info {
    font-size: 0.8em;
    left: -1.5em;
  }
}

@media (max-width: 800px) {
  /* suche als icon */
  .modsearch input[type="text"] {
    width: 1.2em;
    padding: 0;
    height: 2em;
    opacity: 0;
  }
  .modsearch {
    position: relative;
  }
  .modsearch::before {
    content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-search%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M11.742%2010.344a6.5%206.5%200%201%200-1.397%201.398h-.001q.044.06.098.115l3.85%203.85a1%201%200%200%200%201.415-1.414l-3.85-3.85a1%201%200%200%200-.115-.1zM12%206.5a5.5%205.5%200%201%201-11%200%205.5%205.5%200%200%201%2011%200%22/%3E%3C/svg%3E");
    position: absolute;
    left: 0.3em;
    top: 50%;
    transform: translateY(-50%) scale(1.3);
    font-size: 1.4rem;
    pointer-events: none;
  }
  .modsearch input[type="text"]:focus {
	padding:0.5em;
	height: initial;
    opacity: 1;
    position: fixed;
    width: 85vw;
    left: 1vw;
    top: 1vw;
  }
  .modsearch input[type="text"]:focus ~ *::before,
  .modsearch:focus-within::before {
    content: "";
  }
  .awesomplete ul {
    position: fixed;
    left: 1vw;
    top: calc(1vw + 2.6em);
  }
  /*einsatzliste*/
  .main > div.com-einsatzliste {
    margin: 0 1em;
  }
  .einsatzTable {
    font-size: 0.9em;
  }
  /*termine*/
  .eventline {
      gap: initial;
  }
  .eventline .eventtime {
      font-size: 0.9em;
      justify-content: space-between;
      gap: initial;
      width: 100%;
      min-width: 13em;
  }
  .eventline .eventtitle {
      margin-left: 0;
      width: 100%;
      font-size:0.9em;
  }
  .eventline .weekday {
    width:auto;
    margin-right:1em;
  }
  .eventline .date {
      text-align: left;
      margin-right: auto;
      width: auto;
  }
  .eventactions a.btn {
    padding: 0.15em 0.35em;
    margin: -1em 0 0 1em;
  }
}
@media (max-width: 700px) {
  h1,h2,h3 {
    margin-left: -0.2em;
	margin-right: -0.2em;
  }
  img.md {
    width: 100%;
    margin: 0.5em 0;
  }
  img.sm {
    width: calc(100% / 2 - 0.5em);
    margin: 0.5em 0.5em 0.5em 0;
  }
  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(7em, 0.45fr));
  }
  /*termine*/
  .ical-date {
    margin-left: -0.5em;
  }
  .ical_summary {
    display: contents;
  }
  .ical_summary span {
    width: calc(100vw - 19.5em);
  }
  /*einsatzliste*/
  .main > div.com-einsatzliste {
    margin: 0 0.5em;
  }
  .table > :not(caption) > * > * {
    padding: 0.3em;
  }
  /*termine*/
  .eventline .weekday {
      font-family: monospace;
      font-size: 1.2em;
      width: 2ch;
      overflow: hidden;
      margin-right: 1ch;
  }
  
  /*einsätze*/
  td.einsatzNummer {
    width: 2em;
  }
}
@media (max-width: 576px) {
  img.sm {
    width: 100%;
    margin: 0.5em 0;
  }
  .header-right .social-icons {
      gap: 0.5em;
  }
  .modsearch::before {
    left: 0.1em;
  }
  /*termine*/
  div.com-terminverwaltung {
    margin: 0 0.5em;
  }
  .eventline .eventinfo {
      font-size: 0.85em;
  }
  
  /*einsätze*/
  span.einsatzZeit-sm {
      display: inline-block;
  }
  span.einsatzZeit-md {
      display: none;
  }
  .einsatzTable>:not(caption)>*>* {
      padding: 0.5em 0.2em;
  }
  td.einsatzZeit {
    width: 3.5em;
    padding-right: 0;
    font-size: 0.85em;
  }
  td.einsatzStichwort {
    font-size: 0.95em;
  }
  td.einsatzBericht {
      padding-left: 0;
	  font-size: 0.85em;
  }
  td.einsatzOrt {
    padding-right: 0;
	font-size: 0.85em;
	overflow: hidden;
    max-width: 6em;
    text-overflow: ellipsis;
  }
  .einsatzBericht .btn {
      padding: 0.15em 0.35em;
      margin: 0 0.2em;
  }
  /*Fahrzeuge*/
  .vehicle.container > div {
    padding: 0;
  }
}