/**
 * @file
 * Subtheme specific CSS.
 */

:root {
  --blau: #00509F;
  --bs-link-color: #00509F;
  --bs-link-hover-color: #7198bf;
  --hellblau: #7198bf;
  --lichtblau: #d0dbed; /* #C3CDDF; */
  --lichtlichtblau: #f4f6fa;
  --dunkelblau: #002F5F;
  --rot: #990033;
  --lichtrot: rgba(153, 0, 51, 0.1);
  --dunkelgrau: #454545;
  --grau: #999999;
  --hellgrau: #cccccc;
  --lichtgrau: #ededed;
  --lichtlichtgrau: #f4f4f4;
  --hellgelb: #fff9cf;
  --hellbeige: #F6EDC9;
  --lichtbeige: rgba(229, 224, 201, 0.2);
  --weiss: #ffffff;
  --schwarz: #000000;
}

.bg-blau { background-color: var(--blau) !important; }
.bg-hellblau { background-color: var(--hellblau) !important; }
.bg-lichtblau { background-color: var(--lichtblau) !important; }
.bg-lichtblau { background-color: var(--lichtlichtblau) !important; }
.bg-dunkelblau { background-color: var(--dunkelblau) !important; }
.bg-rot { background-color: var(--rot) !important; }
.bg-lichtrot { background-color: var(--lichtrot) !important; }
.bg-grau { background-color: var(--grau) !important; }
.bg-hellgrau { background-color: var(--hellgrau) !important; }
.bg-dunkelgrau { background-color: var(--dunkelgrau) !important; }
.bg-lichtgrau { background-color: var(--lichtgrau) !important; }
.bg-lichtlichtgrau { background-color: var(--lichtlichtgrau) !important; }
.bg-hellgelb { background-color: var(--hellgelb) !important; }
.bg-hellbeige { background-color: var(--hellbeige) !important; }
.bg-lichtbeige { background-color: var(--lichtbeige) !important; }
.bg-weiss { background-color: var(--weiss) !important; }
.bg-schwarz { background-color: var(--schwarz) !important; }

.text-blau { color: var(--blau); }
.text-hellblau { color: var(--hellblau); }
.text-lichtblau { color: var(--lichtblau); }
.text-dunkelblau { color: var(--dunkelblau); }
.text-rot, .rot { color: var(--rot); }
.text-lichtrot { color: var(--lichtrot); }
.text-grau { color: var(--grau); }
.text-hellgrau { color: var(--hellgrau); }
.text-dunkelgrau { color: var(--dunkelgrau); }
.text-lichtgrau { color: var(--lichtgrau); }
.text-hellgelb { color: var(--hellgelb); }
.text-hellbeige { color: var(--hellbeige); }
.text-lichtbeige { color: var(--lichtbeige); }
.text-weiss { color: var(--weiss); }
.text-schwarz { color: var(--schwarz); }

.rahmen-blau { border: 1px solid var(--blau) !important; }
.rahmen-grau { border: 1px solid var(--grau) !important; }
.rahmen-rot { border: 1px solid var(--rot) !important; }

body {
  font-size: var(--font-size-base);
  font-family: 'Calibri',sans-serif;
  line-height: 135%;
}

h1, .h1 {
  font-size: 1.8em;
}
h2, .h2 {
  font-size: 1.5em;
  color: var(--rot);
  margin-top: 1rem;
}
h3, .h3 {
  font-size: 1.4em;
  font-weight: bold;
  margin-top: 1rem;
}
h4, .h4 {
  font-size: 1.3em;
  margin-top: 0.5rem;
}
.box > h2, .box > h3, .box > h4 {
  margin-top: unset;
}
.sidebar h2 {
  font-size: 1.4rem;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0.25em;
}

a {
  color: var(--blau);
  text-decoration: none;
}
a:hover, a:focus {
  text-decoration: underline;
}
a.btn:hover, a.btn:focus {
  text-decoration: none;
}
.bg-blau a, .bg-dunkelblau a, .bg-dunkelgrau a {
  color: inherit;
  text-decoration: underline;
}
.nav-link {
  color: var(--blau);
}
span.extlink {
  display: inline-block;
  padding-left: 0.3em;
  font-size: 0.7em;
  opacity: 0.8;
  vertical-align: top;
}
a.pdf {
  background-image: url('/themes/contrib/bootstrap_barrio/images/icons/application-pdf.png');
  padding-left: 20px;
  display: inline-block;
  min-height: 16px;
  background-repeat: no-repeat;
  background-position: left center;
}

.btn {
  padding: .25rem .75rem;
}
.btn-primary {
  background-color: var(--blau);
  border-color: var(--dunkelblau);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--dunkelblau);
  color: var(--weiss);
}
.btn-outline-primary {
  color: var(--blau);
  border-color: var(--blau);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: var(--lichtblau);
  color: inherit;
}

.btn.kompakt {
  padding: 0 0.2rem 0.1rem;
  line-height: 105%;
}
.btn.breit {
  min-width: 100%;
}

p {
  margin-bottom: 0.7rem
}
.kompakt p {
  margin-bottom: 0.3rem;
}

p.text-intro {
  font-size: 1.3rem;
  line-height: 125%;
  margin-bottom: 1em;
  margin-top: 1em;
  font-weight: lighter;
}

div.box, .sidebar .block {
  padding: 0.7em;
  border-radius: 0.5em;
  /* height: 100%; */
  border: 1px solid var(--hellgrau);
  margin-bottom: 1em;
}
div.box p:last-child, .sidebar .block > p:last-child, td p:last-child {
  margin-bottom: 0;
}

div.hinweis, p.hinweis {
  background-color: var(--hellgelb);
  padding: 0.7em;
  margin-bottom: 0.7em;
}

.kleiner  { font-size: 0.85em; }
.winzig   { font-size: 0.65em; }
.groesser { font-size: 1.25em; }
.riesig   { font-size: 2em; }
.text-muted { font-size: 0.85em; }

code {
  color: var(--dunkelgrau);
}
mark {
  background-color: var(--hellgelb);
}

/* hervorgehobenes Format z.B. für einen Link oder Button */
.highlight {
  display: inline-block;
  margin: 1em 0;
  font-size: 1.75em;
  font-weight: bold;
}

.table > :not(:first-child) {
  border-top-color: var(--hellgrau);
}

.table.table-bordered > :not(:first-child) {
  border-top-color: var(--dunkelgrau);
}
.table-bordered > :not(caption) > * > * {
  border-width: 1px;
  border-color: var(--dunkelgrau);
}

table {
  font-size: inherit;
}
table tr {
  background: inherit;
}
table tr th {
  color: inherit;
  background: var(--hellgrau);
}
table tr th a {
  color: var(--blau);
}
table tr th a:hover {
  color: inherit;
}
.table-unstriped > tbody > tr:nth-child(odd),
.table-unstriped > tbody > tr:nth-child(odd) > td {
/*.table-unstriped > tbody > tr:nth-child(even) > td {*/
  background-color: transparent;
  box-shadow: none;
}

video {
  max-width: 100%;
  height: auto;
}

@media (min-width: 560px) {
  .node .field--type-image {
    margin: inherit;
  }
}

.list-group-item {
  background-color: inherit;
  color: inherit;
  border: inherit;
}

/** Anpassung Kommentare/Mitteilungen */

article.comment {
  display: inherit; /* warum ist unklar */
}

.navbar-brand > img {
  max-width: 25vw;
  max-height: 120px;
  padding-top: 1%;
  padding-bottom: 1%;
}

#block-vertriebsportal-account-menu {
  max-width: 30vw;
}
#block-vertriebsportal-account-menu h2 {
  margin-bottom: 0;
  padding: 0;
}
#block-vertriebsportal-account-menu .nav-link {
  display: inline-block;
  padding: 0.2rem 1rem 0 0;
  font-size: 0.9rem;
}

.breadcrumb {
  padding: 0.5em 0;
  background-color: inherit;
}


/** Anpassung Feld-Ausgabe aus Node-Ansicht und auch von Views so erzeugt */
.views-field {
  margin-bottom: 0.2rem;
}
.field__label {
  color: var(--grau);
  padding-right: 1rem;
}
.field--label-inline .field__label,
.views-field span.field__label {
  display: inline-block;
  width: 30%;
  min-width: 10rem;
  max-width: 15rem;
  vertical-align: top;
}
.sidebar .views-field span.field__label {
  min-width: inherit;
  width: inherit;
  padding-right: 0.5rem;
}
.field--type-entity-reference {
  margin-bottom: inherit;
}
.field--label-inline > .field__items {
  display: inline-block;
}
/* Ansicht Benutzer-Profil Felder zurücksetzen */
body.path-user .field--label-inline .field__item {
  margin: inherit;
  background: inherit;
  padding: inherit;
  border-radius: inherit;
  min-width: inherit;
}
body.path-user .field--label-inline .field__label {
  width: 30%;
}

.view .view-filters {
  background-color: var(--lichtblau);
}
/* Views Exposed-Filters mit mehr Inline */
.views-exposed-form .container-inline fieldset {
  display: inline-block;
  margin-bottom: 0 !important;
  padding: 0;
}

/* kompakte Darstellung der Views-Exposed-Filter-Felder (in einer Zeile) */
.view.filters-kompakt .view-filters .container-inline div:not(.form-actions),
.view.filters-kompakt .view-filters .container-inline label {
  width: 10em;
  vertical-align: top;
}
.view.filters-kompakt .view-filters .container-inline fieldset .form-no-label.mb-3 {
  margin-bottom: 0.2em !important;
  margin-top: -0.4em;
}


.horizontal-tabs,
.horizontal-tabs .horizontal-tabs-list,
.horizontal-tabs .horizontal-tab-button,
.horizontal-tabs ul.horizontal-tabs-list li a, .horizontal-tabs ul.horizontal-tabs-list li.selected a {
  border-radius: 1em 1em 0 0;
}
.horizontal-tabs ul.horizontal-tabs-list {
  background-color: unset;
}
.horizontal-tabs .horizontal-tab-button {
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc;
}
.horizontal-tabs {
  border: 0;
}
.horizontal-tabs-panes {
  margin-top: -0.3em;
  padding-top: 1em;
  border-style: solid;
  border-color: #ccc;
  border-width: 0 1px 1px 1px;
}
/* Margin/Padding verschieben, damit Sprung-Position des Anker ("#antrag") besser passt */
.horizontal-tabs-panes .horizontal-tabs-pane {
  margin-top: -4em;
  padding-top: 4em;
}

.form-select, .input-group-text {
  padding-top: .1rem;
  padding-bottom: .1rem;
  margin-top: 0.2rem
}
.form-control {
  padding: .1rem .25rem;
  margin: 0.2rem 0;
}
.form-control.form-date, .form-control.form-time {
  width: inherit;
}
.container-inline > .form-type-date.mb-3,
.container-inline > .form-type-time.mb-3 {
  margin-bottom: 0 !important;
}
.field--widget-datetime-timestamp, div.field--type-datetime {
  margin-bottom: 1rem;
}

.accordion-flush .accordion-button {
  padding: 0;
}
.accordion-flush .accordion-button:not(.collapsed) {
  background-color: var(--lichtblau);
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.accordion-flush .accordion-button:focus {
  border-color: transparent;
  box-shadow: none;
}

details {
  border: 1px solid var(--hellgrau);
  border-radius: 0.5em;
  padding: 0 0.5em;
  margin-bottom: 1em;
  /*margin-top: 1em;*/
}
details > summary {
  background-color: var(--lichtblau);
  margin-left: -9px;
  margin-right: -9px;
  padding: 4px 0 4px 9px;
  font-size: 1rem;
  text-shadow: 0 0 1px var(--grau);
  border-radius: 0.3em;
}
details .details-wrapper {
  padding-top: 0.5em;
}
:host([open]) summary {
  border-radius: 0.3em 0.3em 0 0;
}

fieldset {
  border-radius: 0.5em;
  padding: 0.5em;
  border: 1px solid var(--hellgrau);
  margin-bottom: 0.5em;
}
textarea.form-control {
  line-height: 1.2;
}

legend {
  font-size: inherit;
  float: inherit;
  width: inherit;
  padding: 0.2em 0.5em;
  margin-bottom: 0;
  line-height: inherit;
}

/* Darstellung von Fieldset mit Legend mittels Box simulieren */
.box.with-legend {
  padding-top: 1.2em;
  margin-top: 1.5em;
  position: relative;
}
.box.with-legend > .legend {
  position: absolute;
  top: -0.7em;
  background-color: white;
  padding: 0 0.5em;
  display: inline-block;
  line-height: 120%;
  left: 0.5em;
  border-radius: 0.3em;
}


.error {
  color: var(--rot);
  border-color: var(--rot);
}
.form-required {
  text-shadow: 0 0 1px var(--hellblau);
}
.form-required::after {
  content: '*';
  vertical-align: unset;
  width: unset;
  height: unset;
  margin: 0 0.2em;
  color: var(--rot);
  font-weight: bold;
  background: unset;
}
.form-control.required {
  box-shadow: 0 0 1px var(--hellblau);
}
.form-control.required.error {
  border-color: var(--rot);
}
fieldset .description-before {
  margin-bottom: 1em;
}

.form-control::-moz-placeholder {
  color: var(--hellgrau);
}
.form-control::placeholder {
  color: var(--hellgrau);
}

.js-form-type-radio > label {
  min-width: 5em;
  padding: 0.1rem 0;
}

.js-form-type-radio:hover > label {
  background-color: var(--lichtgrau);
}

section.comment-wrapper {
  background-color: var(--lichtgrau);
  font-size: 0.9em;
  margin: 1em 0;
  padding: 0.5em;
  border-radius: 0.5em;
}

/* Titel/Label am Feld inline anzeigen */
@media (min-width: 768px) {
  .title-inline > label {
    display: inline-block;
    width: calc(40% - 0.5em);
    min-width: 12em;
    vertical-align: top;
  }
  .title-inline > .form-input,
  .title-inline > .form-select {
    display: inline-block;
    width: 60%;
  }
}

.term-reference-tree .form-check {
  display: inline-block;
  min-height: unset;
}
.term-reference-tree .form-check.mb-2 {
  margin-bottom: 0 !important;
}

/** Formulare im Hauptbereich der Seite mit etwas Farbe versehen */
main :not(.sidebar) form {
  background-color: var(--lichtlichtblau);
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--lichtblau);
}
main :not(.sidebar) form fieldset,
main :not(.sidebar) form details {
  background-color: rgba(255, 255, 255, 0.5);
}


/* Reset für Breite in boostrap-Form */
.w-unset {
  width: unset !important;
}
.flex-none {
  flex: none !important;
}


.is-unpublished, .node--unpublished, .media--unpublished {
  box-shadow: 0 0 5px inset rgba(255, 165, 0, 0.5);
  outline: rgba(255, 165, 0, 0.5) dashed thin;
}
.node--unpublished, .media--unpublished {
  box-shadow: 0 0 10px rgba(255, 165, 0, 0.7);
  padding: inherit;
}
.is-missing {
  box-shadow: 0 0 5px inset rgb(255, 0, 0);
  outline: rgba(255, 0, 0, 0.5) dashed thin;
}


/* Ansicht von Medienlisten */
div.medienliste {
  margin-bottom: 1em;
}

div.medienliste.view-mode-preview .medienliste-item,
div.medienliste .medienliste-item {
  border: 0;
}

div.medium.view-mode-preview,
div.medium.view-mode-list,
div.media-preview {
  margin-bottom: 0.5em;
  padding-left: 0.7em;
}

div.media-preview p:last-child {
  margin-bottom: 0;
}

div.medienliste.view-mode-preview .field--name-field-media-oembed-video,
div.medienliste.view-mode-preview .field--name-field-media-video-file {
  max-width: 280px;
}

div.medienliste.view-mode-preview .field--name-thumbnail img {
  max-width: 100%;
  height: auto;
}

div.media-preview .field--type-image img {
  margin-bottom: 0;
}

div.medienliste.view-mode-list .media-field-datum {
  /* margin-left: 20px; */ /* Breite des Icon */
}


/* Menü in der rechten Seitenleiste */
.sidebar .block-menu .nav {
  display: inherit;
  margin-left: 0;
  hyphens: auto;
  font-size: 0.95rem;
  padding-top: 0;
}
.sidebar .block-menu .nav-item {
  margin-left: 0;
  margin-right: 0;
}
.sidebar .block-menu .nav-link {
  padding: .2rem 0;
}
.sidebar .block-menu .menu-item--collapsed {
}
.sidebar .block-menu ul.menu {
  list-style: none;
  padding-left: 1.2rem;
}
.sidebar .block-menu .nav-link.active,
.sidebar .block-menu .nav-link.is-active {
  font-weight: bold;
}
/* Block mit dem nachfolgenden Block in einen Rahmen zusammenfassen */
.block.combine-next {
  margin-bottom: 0 !important;
  border-bottom: 0;
  border-bottom-left-radius: unset;
  border-bottom-right-radius: unset;
}
.block.combine-next + .block {
  border-top: 0;
  padding-top: 0;
  border-top-left-radius: unset;
  border-top-right-radius: unset;
}

/** Footer / Fussbereich der Seite kompakter */
.site-footer {
  background-color: var(--dunkelgrau);
  padding: 0;
  margin-top: 4em;
}
.site-footer__bottom .region {
  margin-top: 0;
}

.page-user-login main .region-content,
.page-user-password main .region-content {
  max-width: inherit;
  background: inherit;
  padding: inherit;
}