:root {
	--bs-body-font-size: 1rem;
} 

@supports (display: grid) {
	.site-grid {
		display: grid;
		grid-template-areas: 
			". head head head head ."
			". top-a top-a top-a top-a ."
			". top-b top-b top-b top-b ."
			". comp comp comp comp ."
			". side-r side-r side-r side-r ."
			". side-l side-l side-l side-l ."
			". bot-a bot-a bot-a bot-a ."
			". bot-b bot-b bot-b bot-b ."
			". footer footer footer footer ."
			". debug debug debug debug .";
		grid-template-columns: 
			[full-start] minmax(0, 1fr)
			[main-start] repeat(4, minmax(0, 19.875rem))
			[main-end] minmax(0, 1fr)
			[full-end];
		grid-gap: 0 1em;
	}
	
	.site-grid > [class^=container-],
	.site-grid > [class*=" container-"] {
		width: 100%;
		max-width: none;
	}
	
	.site-grid:not(.has-sidebar-left) .container-component {
		grid-column-start: main-start;
	}
	
	.site-grid:not(.has-sidebar-right) .container-component {
		grid-column-end: main-end;
	}
	
	.site-grid > .full-width {
		grid-column: full-start/full-end;
	}
	
	@media (min-width: 768px) {
		.site-grid {
			grid-template-areas:
				". head head head head ."
				". top-a top-a top-a top-a ."
				". top-b top-b top-b top-b ."
				". side-l comp comp side-r ."
				". bot-a bot-b bot-b side-r ."
				". footer footer footer footer ."
				". debug debug debug debug .";
		}
	}
	
	.container-header {
		grid-area: head;
	}

	.container-top-a {
		grid-area: top-a;
	}

	.container-component {
		grid-area: comp;
	}
	
	.container-sidebar-left {
		grid-area: side-l;
	}
	
	.container-sidebar-right {
		grid-area: side-r;
	}
	
	.container-breadcrumb {
		grid-area: bread;
	}
	
	.container-bottom-a {
		grid-area: bot-a;
	}
	
	.container-bottom-b {
		grid-area: bot-b;
	}
	
	.container-footer {
		grid-area: footer;
	}
	
	.system-debug {
		grid-area: debug;
	}
}

.h1,h1 {
    font-size: calc(1.375rem + 1.5vw);
    color: #687b89;
}

@media (min-width: 1200px) {
    .h1,h1 {
        font-size:1.4rem
    }
}

.h2,h2 {
    font-size: calc(1.225rem + .9vw)
}

@media (min-width: 1200px) {
    .h2,h2 {
        font-size:1.3rem
    }
}

.h3,h3 {
    font-size: calc(1.3rem + .6vw)
}

@media (min-width: 1200px) {
    .h3,h3 {
        font-size:1.2rem
    }
}

.h4,h4 {
    font-size: calc(1.175rem + .3vw)
}

@media (min-width: 1200px) {
    .h4,h4 {
        font-size:1.1rem
    }
}

.h5,h5 {
    font-size: 1rem
}

.h6,h6 {
    font-size: 0.9rem
}

img {
	max-width: 100%;
}


body {
	color: #555555;
}

.site-grid {
	background-color: #595e62;
}

a {
	color: var(--svpfungen-color-link);
	text-decoration: none;
}

a:focus, a:hover {
	color: var(--svpfungen-color-hover);
}

.container-header {
/* 	padding: 0 0 1em 0; */
}

.brand-logo {
	display: block;
	padding-top: 1.5em;
}

.site-description {
	text-transform: uppercase;
	color: #fff;
	text-shadow: 3px 3px 1.5px rgb(0 0 0 / 50%);
	padding: .4em 0 0 .2em;
	font-size: 1.2rem;
	font-weight: 500;
}

.mod-list {
	padding-left: 0;
	list-style: none;
}

.mod-list li {
	padding: .25em 0;
}

.mod-list li.active a {
	color: #003dd2;
	font-weight: 700;
}

.mod-list li a {
	text-decoration: none;
}

.mod-list li a:hover {
	text-decoration: underline;
}

.mod-list {
	margin-bottom: 0;
}

.mod-menu {
	flex-direction: column;
}

.container-header .mod-menu {
	flex: 1 0 100%;
	padding: 0;
	margin: 0;
	color: #fff;
	list-style: none;
}

.container-header .mod-menu>li {
	position: relative;
}

.container-header .mod-menu>li>a {
	position: relative;
	color: currentColor;
	text-decoration: none;
}

.container-header .mod-menu>li.active:after,
.container-header .mod-menu>li.hover:after {
	background:  #fff;
	left: 0;
	right: 0;
}

.container-header .mod-list li a:hover {
	text-decoration: none;
}

@media (min-width: 768px) {
	
	.container-header .mod-menu {
		display: flex;
		flex: 1 1 0%;
		flex-direction: row;
	}
	
	.container-header .mod-menu>li+li {
		margin-left: 1.55em;
	}
	
	.container-header .mod-menu>li:after {
		content: "";
		opacity: .6;
		background: transparent;
		height: 2px;
		margin: auto;
		transition: all .2s, background-color .2s;
		display: block;
		position: absolute;
		bottom: 0;
		right: 50%;
		left: 50%;
	}
}

.navbar-inner {
	padding-right: 20px;
	padding-left: 20px;
	border-radius: 4px;
	box-shadow: 2px 2px 2px rgb(0 0 0 / 30%);
	flex: auto;
}

.navbar-default .navbar-inner {
	background-image: none;
	background-color: #5b6b79;
}

.navbar-default .dropdown-menu {
	background-color: #5b6b79;
}

.navbar-default .nav-link {
	color: #fff;
	text-transform: uppercase;
	text-shadow: 2px 2px 1.5px rgb(0 0 0 / 50%);
	font-size: 1.1rem;
	font-weight: 500;
/* 	padding: 9px 15px 7px; */
}

.navbar-default .active .nav-link {
	text-shadow: 1px 1px #5b6b79;
}

.navbar-default .nav-link:hover {
	color: #c6d8e4;
/*	text-shadow: 1px 1px #5b6b79; */
}

.navbar-expand-md .navbar-nav .nav-link {
/* 	padding-right: 0; */
/* 	padding-left: 0; */
}

@media (min-width: 768px) {
	.navbar-expand-md .navbar-nav li+li {
/* 		padding-left: 1.5rem; */
	}
}

.navbar-default .navbar-nav .active>.nav-link,
.navbar-default .navbar-nav .show>.nav-link {
	color: #5B6B79;
	background-color: #d1dde2;
}

.navbar-default .navbar-toggler {
	margin: 6px 0 5px 0;
	color: #fff;
	border: 1px solid;
}

.navbar-default .navbar-toggler:focus {
	box-shadow: none;
}

.navbar-default .navbar-toggler.collapsed {
	color: #e5e5e5;
}

.breadcrumb {
	background-color: #e5e5e5;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.container-component {
	padding: 1rem;
	background-color: #fff;
	border: 1px solid rgba(0,0,0,.125);
	border-radius: 4px;
    margin-bottom: 1em;
	box-shadow: 2px 2px 2px rgb(0 0 0 / 30%);
}

.card {
	box-shadow: 2px 2px 2px rgb(0 0 0 / 30%);
}

.sidebar-left.card,
.sidebar-right.card {
	margin-bottom: 1em;
}

.bottom-a .mod-list li,
.bottom-b .mod-list li {
	padding: 0;
}

.mod-finder__search .form-control {
    min-height: calc(1.5em + .5rem + 2px);
    padding: .25rem .5rem;
    font-size: .875rem;
    border-radius: .2rem 0 0 .2rem;
	box-shadow: 2px 2px 2px rgb(0 0 0 / 30%);
}

.mod-finder__search .btn {
    padding: .25rem .5rem;
    font-size: .875rem;
    border-radius: .2rem;
    background-color: #5b6b79;
    border-color: #5b6b79;
	box-shadow: 2px 2px 2px rgb(0 0 0 / 30%);
}

.btn.jmodedit {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  z-index: 900;
  color: var(--svpfungen-color-link);
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid #58595a;
  border-radius: 0.25rem;
}

[dir=rtl] .btn.jmodedit {
  right: auto;
  left: 0;
}

[role=tooltip]:not(.show) {
  right: 5em;
  z-index: 1070;
  display: none;
  max-width: 100%;
  padding: 0.5em;
  margin: 0.5em;
  color: black;
  background: white;
  border: 1px solid #6d757e;
  border-radius: 0.25rem;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.8);
}
[role=tooltip]:not(.show)[id^=editarticle-] {
  right: auto;
  -webkit-margin-start: -10em;
          margin-inline-start: -10em;
}
[role=tooltip]:not(.show)[id^=editcontact-] {
  right: auto;
  -webkit-margin-start: -10em;
          margin-inline-start: -10em;
}
[dir=ltr] [role=tooltip]:not(.show) {
  text-align: left;
}
[dir=rtl] [role=tooltip]:not(.show) {
  text-align: right;
}

:focus + [role=tooltip],
:hover + [role=tooltip] {
  position: absolute;
  display: block;
}



.jviewport-height10 {
  height: 10vh;
}
.jviewport-height20 {
  height: 20vh;
}
.jviewport-height30 {
  height: 30vh;
}
.jviewport-height40 {
  height: 40vh;
}
.jviewport-height50 {
  height: 50vh;
}
.jviewport-height60 {
  height: 60vh;
}
.jviewport-height70 {
  height: 70vh;
}
.jviewport-height80 {
  height: 80vh;
}
.jviewport-height90 {
  height: 90vh;
}
.jviewport-height100 {
  height: 100vh;
}

[class*=jviewport-height] iframe {
  height: 100%;
}

.modal-dialog.jviewport-width10 {
  width: 10vw;
  max-width: none;
}
.modal-dialog.jviewport-width20 {
  width: 20vw;
  max-width: none;
}
.modal-dialog.jviewport-width30 {
  width: 30vw;
  max-width: none;
}
.modal-dialog.jviewport-width40 {
  width: 40vw;
  max-width: none;
}
.modal-dialog.jviewport-width50 {
  width: 50vw;
  max-width: none;
}
.modal-dialog.jviewport-width60 {
  width: 60vw;
  max-width: none;
}
.modal-dialog.jviewport-width70 {
  width: 70vw;
  max-width: none;
}
.modal-dialog.jviewport-width80 {
  width: 80vw;
  max-width: none;
}
.modal-dialog.jviewport-width90 {
  width: 90vw;
  max-width: none;
}
.modal-dialog.jviewport-width100 {
  width: 100vw;
  max-width: none;
}




.modal iframe {
  width: 100%;
}

.modal header {
	padding: 0 15px;	
}

.pagination {
  margin: 1rem;
}

a {
	color: #2a69b8;
}

.table {
	color: #495057;
}

.tbody-icon {
  padding: 0 3px;
  text-align: center;
  background-color: transparent;
  border: 0;
}
.tbody-icon [class^=icon-],
.tbody-icon [class*=" icon-"],
.tbody-icon [class^=fa-],
.tbody-icon [class*=" fa-"] {
  width: 26px;
  height: 26px;
  font-size: 1rem;
  line-height: 22px;
  color: #cdcdcd;
  border: 2px solid var(--border);
  border-radius: 50%;
}
.tbody-icon .icon-publish,
.tbody-icon .icon-check,
.tbody-icon .fa-check {
  color: var(--success);
  border-color: var(--success);
}
.tbody-icon .icon-home,
.tbody-icon .icon-color-featured,
.tbody-icon .icon-star.featured,
.tbody-icon .fa-star.featured {
  color: var(--warning);
  border-color: var(--warning);
}
.tbody-icon .icon-archive,
.tbody-icon .icon-folder,
.tbody-icon .fa-folder {
  color: var(--atum-text-dark);
  border-color: #495057;
}
.tbody-icon .icon-checkedout,
.tbody-icon .icon-lock,
.tbody-icon .fa-lock {
  width: auto;
  height: auto;
  font-size: 1.2rem;
  line-height: 1rem;
  color: var(--atum-text-dark);
  border: 0;
}
.tbody-icon.home-disabled, .tbody-icon.featured-disabled, .tbody-icon.color-featured-disabled, .tbody-icon.icon-star-disabled, .tbody-icon.fa-star-disabled {
  cursor: not-allowed;
  opacity: 1;
}
.tbody-icon.disabled .icon-home, .tbody-icon.disabled .fa-home {
  color: var(--warning);
  border-color: var(--warning);
}



.field-media-wrapper .field-media-preview {
  width: 100%;
  max-width: none;
}


.form-control {
	color: #555555;
	padding: 0.375rem 0.75rem;
}

.form-control:focus {
  color: var(--text-dark);
  background-color: #fff;
  border-color: #95b4db;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(42, 105, 183, 0.25);
}

.form-control:focus, .form-select:focus {
  border-color: #39f;
  box-shadow: 0 0 0 0.2rem #eaeaea;
}

.form-select {
	color: #555555;
	padding: 0.375rem 0.75rem;
}

.invalid {
  color: var(--danger);
  border-color: var(--danger);
}

.valid {
  border-color: var(--success);
}

.card ul li a {
	font-size: 0.95rem;
    color: #575757;
    text-decoration: none;
    text-align: left;
    border-bottom: 1px solid #E5E5E5;
    padding: 3px 5px 3px 5px;
    display: block;
}

.page-header {
	padding-bottom: 0;
	margin: 2px 0 20px 0;
}

.page-header h1, .page-header h2 {
	border-bottom: 1px solid #687b89;
	padding-bottom: 5px;
	margin: 2px 0 5px 0;
}

/* Bottom Bereich gleich hohe Cards */

.container-bottom-a,
.container-bottom-b {
    height: 100%;
}

/* linke Card volle Höhe */
.container-bottom-a .card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* rechte Spalte */
.container-bottom-b {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* rechte Cards teilen sich Höhe */
.container-bottom-b .card {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Card Body wächst */
.container-bottom-a .card-body,
.container-bottom-b .card-body {
    flex-grow: 1;
}

.container-footer {
	color: #fff;
	padding: .5rem 0;
}