@import "../vendor/bootstrap/dist/css/bootstrap.min-cf4cd0b7e86ca2d4039dfed2b7d527d5.css";

@import "../vendor/leaflet/dist/leaflet.min-eca67356f10ad8812f66fd3ac8e63d08.css";

@font-face {
    font-family: 'Roboto Condensed';
    src: url("../fonts/RobotoCondensed-Regular-54fd1586bd68271cdaabca9fd585f5c7.ttf") format('truetype');
}

@font-face {
    font-family: 'Roboto';
    src: url("../fonts/Roboto-Regular-b5a9f10b5a77405283d8c0ceca197847.ttf") format('truetype');
}

@font-face {
    font-family: 'Familjen Grotesk SemiBold';
    src: url("../fonts/FamiljenGrotesk-SemiBold-10f55dc8564f371c6acdf58927803e6c.ttf") format('truetype');
}

@font-face {
    font-family: 'Familjen Grotesk Italic';
    src: url("../fonts/FamiljenGrotesk-Italic-4327dab3f306af1a6d1a270b4000bc70.ttf") format('truetype');
}

@font-face {
    font-family: 'Unna Italic';
    src: url("../fonts/Unna-Italic-9908672b14f337679d42081715f8910f.ttf") format('truetype');
}

@font-face {
    font-family: 'EBGaramond';
    src: url("../fonts/EBGaramond-Italic-VariableFont_wght-9afd1b57c0a5b8aa91bcad3b81808ea5.ttf") format('truetype');
}

@font-face {
    font-family: 'Source Serif 4';
    src: url("../fonts/SourceSerif4-Italic-VariableFont_opsz,wght-66ba52ebad10dc30fd3f241aca149a48.ttf") format('truetype');
}

:root {
  --primary-highlight: #89c600; /*#181818 green, #b6f23a latest green, for dark blue-grey: #BDCFA1*/
  --primary-highlight-darker: #89c600; /*#89c600 darker green highlight*/
  --secondary-highlight: rgb(41,52,79); /* rgb(41,52,79); #7764a5; dark blue-grey: #323f60*/
  --primary-bg-color: #ffffff;
  --primary-color: #121212;
  --primary-grey: #5d5d5d;
}

body {
	background-color: var(--primary-bg-color);
  color: var(--primary-color);
  font-family: 'Roboto', sans-serif;
  font-size: 1.2rem;
  line-height: 1.5;
  /*margin-left: 0;
	margin-right: 0;*/
}

#map {
    height: 50vh;
    width: 100%
}

.abstract {
  font-family: 'Roboto', sans-serif;
  background: rgba(119, 100, 165, 0.06);
  padding: 1rem;
  border-left: 0.4rem solid var(--secondary-highlight);
}

.abstract-down{
  background-color: rgb(41,52,79);
  color: snow;
  border: none;
  font-size: 2rem;
}

.abstract-down a {
  text-decoration: none;
  color: inherit;
}

.abstract-down a:hover {
  font-weight: bold;
  color: inherit;
}

/*3 columns for abstract (optional), needs media query for smaller*/
.text-3col {
  text-align: justify; 
  column-count: 1;
  column-gap: 2.5rem;
  /*g-5 für horizontal muss noch gemacht werden mit media-queries*/
}

@media (min-width: 768px) {
  .text-3col {
    column-count: 3;
  }
}

/*For titles on topic-pages*/
h1, h1 a {
	color: var(--primary-color);
  font-family: 'Familjen Grotesk SemiBold', sans-serif;
	text-decoration: none;
  font-size: 1.8rem;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

/*For topic-titles on cards on homepage*/
h2, h2 a {
	color: var(--primary-color);
  font-family: 'Familjen Grotesk SemiBold', sans-serif;
	text-decoration: none;
	font-size: 1.6rem;
  line-height: 1.1;
}

/*For sub-heading on accordion menus*/
h3, h3 a, h3 .accordion-button, h3 .accordion-button a {
  color: var(--primary-color);
  font-family: 'Familjen Grotesk SemiBold', sans-serif;
	text-decoration: none;
  font-size: 1.3rem;
	line-height: 1.1;
}

/*styles for topic-teaser-cards on homepage*/

.topic-teaser {
  height: 100%;
  text-align: justify;
  font-size: 1.1rem;
  border-radius: 0.4rem;
}

.topic-teaser:hover {
	background-color: rgba(41,52,79, 0.1);/*rgb(245, 222, 179); green: rgba(182, 242, 58, 0.2)*/
}

.topic-teaser a img, .topic-teaser div {
	padding: 13px; /*7px 10px 7px*/
}

/*developing styles for topic-templates*/
.caption {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 0.9rem;
  line-height: 1.2;
	color: var(--primary-grey); /*#4B4B4B*/
	margin-top: 5px;
}

.quote {
  font-size: 1.2rem;
  line-height: 1.2;
  margin-top: 1rem;
  font-family: 'Familjen Grotesk Italic', sans-serif;
  /*font-family: 'Source Serif 4', serif;*/
}

.quote::before {
  content: "»\00A0";
}

.quote::after {
  content: "\00A0«";
}

.interview-container .quote, .container-fluid .quote {
  font-size: 1.8rem;
  margin-top: 0;
}

.title {
  margin-top: 1rem;
}

.keywords {
  font-size: 1rem;
}

.biography {
  color:#6c757d;
  font-size: 1rem;
  line-height: 1.2;
}

.transcript {
  font-size: 1rem;
  text-align: justify;
  line-height: 1.5;
  /*padding: 0.75rem;
  border-radius: 0.2rem;
  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.12);*/
}

/*mentioned places*/
.metadata, .meta-places, .topic-more {
  font-size: 1rem;
  line-height: 1.3;
  font-family: 'Roboto Condensed', sans-serif;
  background: rgba(41,52,79, 0.06);
  padding: 0.75rem;
  border-radius: 0.4rem;
  /*border-left: 0.2rem solid var(--secondary-highlight);
  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.12);
  border-radius: 0.2rem;*/
}

.transcript-colour {
  padding: 0.85rem;
  border-radius: 0.4rem;
  background-color: rgba(41,52,79, 0.06);
  font-size: 1rem;
}

.bibl-container, .more-interviews {
  padding: 0.85rem;
  border-radius: 0.4rem;
  background-color: rgba(41,52,79, 0.06);
}

.audio-caption {
  font-size: smaller;
  color:#6c757d;
}

/* Accordion menus in topic-templates */
.accordion {
    --bs-accordion-border-radius: 0px;
    --bs-accordion-inner-border-radius: 0px;
}

/*accordion header*/
.accordion-button {
  color: #181818;
  background-color: white;
	font-family: 'Familjen Grotesk SemiBold', sans-serif;
	text-decoration: none;
	font-size: 1.1rem;
}

/*accordion header when shown*/
.accordion-button:not(.collapsed) {
  color: #181818;
  background-color: rgba(41,52,79, 0.2); /*green: rgba(182, 242, 58, 0.2)*/
  border-radius: 0px;
}

/* Hover-Effect */
.accordion-button:hover {
    background-color: rgba(41,52,79, 0.4); /*green: rgba(182, 242, 58, 0.4)*/
}

/* Focus-Effect: saubere lösung? */
.accordion-button:focus {
    box-shadow: 0 0 0 0;
}

/*volume icon for accordion headers*/
.icon-interview {
  height: 0.8rem;
  padding-right: 1.5rem;
}

/*styles for navigation*/

.navbar-brand-subtitle-container{
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.3rem; 
  line-height: 1; 
  color: var(--primary-color);
	max-width: 300px;
	white-space: normal;
}

.navbar-brand-subtitle-container a{
  color: var(--primary-color);
}

.navbar-brand-subtitle-container a:hover{
  color: var(--primary-color);
}

.logo-icon img {
	width: 200px;
	height: auto;
	min-width: 40px;
	/*display: flex;
	align-items: center;
	justify-content: center;*/
}

.dropdown-menu.show {
    /*background-color: #A2A629; rgb(0, 25, 118);*/
    /*border-color: rgb(94, 66, 138);*/
    border-radius: 0%;
    border-color: #e4e4e0;
}

.dropdown-menu.show .dropdown-item {
  font-size: 1.1rem;
}

.dropdown-menu.show .dropdown-item:active {
  background-color: #e4e4e0;
  color: var(--primary-color);
}

.navbar {
  /*padding-bottom: 0;
  background-color: var(--primary-bg-color);*/
  border-bottom: 1px solid #e4e4e0;
}

.navbar-nav .nav-item {
  font-family: 'Roboto Condensed', sans-serif;
  /*font-size: 0.875rem;*/
  color: var(--primary-grey);
  padding: 0.3rem 0.75rem;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  /*	text-decoration: underline;
  text-decoration-color: orange;*/
  color: var(--primary-color);
}

.selected {
  color: var(--primary-color);
  font-weight: 500;
}

nav a {
  color: var(--primary-grey);
  text-decoration: none;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%235d5d5d' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-toggler {
  border-color: var(--primary-grey);
}

.navbar-toggler:focus {
  box-shadow: none; /* entfernt den blauen Bootstrap-Fokusring */

}

/* Sprachauswahl */
.lang-select {
  font-size: 0.8rem;
  color: #6c757d;
  border: 1px solid #dee2e6;
  border-radius: 5px;
  padding: 0.25rem 0.5rem;
  background: transparent;
  cursor: pointer;
}

.lang-select:focus {
  outline: none;
  border-color: #adb5bd;
}

/* Mobile: Menü unter dem Toggler */
@media (max-width: 991.98px) {
  .navbar-collapse {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
  }

  .navbar-nav .nav-link {
    padding: 0.55rem 0.25rem;
  }
}

/*Footer*/
footer {
  /*border-top: 0.05rem solid var(--primary-highlight);*/
  /*border-top: 1px solid rgb(0, 15, 70);*/
  font-size: 1rem;
}

.footer-link:hover {
  color: var(--primary-highlight);
}

/*styles for interview-cards in topic-templates*/
.card {
  height: 100%;
  border-radius: 0.4rem;
  /*border-color: var(--secondary-highlight);*/
  border: none;
  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.12);
}

.img-interview {
  height: auto; 
  width: 100%; 
  opacity: 0.95;
}

.img-vol {
  opacity: 0.75;
}

.img-vol:hover, .img-vol:active {
  opacity: 0.9;
}

/*styles for interview-container*/
.detail-close {
    position: absolute;
    top: 0rem;
    right: 1rem;
    /*background: rgba(255,255,255,0.2);*/
    background-color: var(--primary-bg-color);
    /*border: 1px solid var(--primary-color);*/
    border: none;
    color: var(--primary-color);
    /*width: 30px;
    height: 30px;
    border-radius: 50%;
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.12);*/
    font-size: 1.5rem;
    line-height: 1;
    /*transition: background 0.2s;*/
}

.interview-detail {
    display: none;
    position: relative;
}

.interview-detail.open {
    display: block;
}

.transcript-full {
    display: none;
}

/*GENERAL STYLES*/
a {
  color: var(--primary-grey);
}

a:hover {
  color: var(--secondary-highlight);
}

/*designs for footnotes*/
li a, sup a {
	text-decoration: none;
}

/*bibliography*/
.bibliography {
	list-style-type: none;
	padding-left: 0;
}

.bibliography li {
	margin-top: 0.4rem;
}

/*grid-layout with flex for images and text*/
@media (max-width: 768px) {
  .content-grid { 
    display: flex;
    flex-direction: column; 
  }
  .bilder1, .bilder2, .bilder3, .absatz1, .absatz2, .absatz3 { 
    grid-column: unset;
    grid-row: unset; 
    order: var(--grid-order);
  }

  #text-col, #img-col {
    display: contents !important;
  }

  .row.img-flex {
    display: flex;
    flex-direction: column;
  }

  .row.img-flex [data-order] {
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    padding-right: calc(var(--bs-gutter-x) * 0.5);
  }

  /* Reihenfolge per data-order-Attribut */
  [data-order="1"] { order: 1; }
  [data-order="2"] { order: 2; }
  [data-order="3"] { order: 3; }
  [data-order="4"] { order: 4; }
  [data-order="5"] { order: 5; }
  [data-order="6"] { order: 6; }
  [data-order="7"] { order: 7; }
  [data-order="8"] { order: 8; }
}

/*NEW STYLES (from 29th of July forward)*/
.overview h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

dl {
  margin-bottom: 0;
  font-family: 'Roboto Condensed', sans-serif;
}

dl div dd {
  margin-bottom: 0.2rem;
}

dt {
  float: left;
  padding-right: 0.5rem;
  font-weight: 400;
  color: var(--secondary-highlight);
}

dt::after {
  content: ":";
}

.toggle-transcript, .transcript-preview {
  display: inline;
}

/*location/geo icon*/
.icon-places {
  height: 0.8rem;
  padding-right: 0.5rem;
  margin-bottom: 0.2rem;
}

/*tag icon*/
.icon-tag {
  height: 0.8rem;
  padding-right: 0.5rem;
}

.info-link {
  font-size: 1rem;
  line-height: 1.3;
  font-family: 'Roboto Condensed', sans-serif;
  background: rgba(41,52,79, 0.06);
  padding: 0.75rem;
  border-radius: 0.4rem;
  /*box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.12);
  border-left: 0.2rem solid var(--secondary-highlight);
  border-radius: 0.2rem;
  border: 1px solid var(--secondary-highlight);*/
  color: var(--primary-color);
}

a.info-link {
  text-decoration: none;
}
a.info-link:hover, a.info-link:active {
  text-decoration: underline;
  color: var(--secondary-highlight);
}


/*
Delete this styling, keep until publication for safety

.subtitle {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.3rem;
  line-height: 1.1;
	font-weight: lighter;
}

.with-color {
	color: #000 !important;
  background-color: #f1f1f1 !important;
}

.test-color::before {
	color: #000 !important;
  background-color: #f1f1f1 !important;
}

.teaser-text {
  font-size: 1.2rem;
}

.gallery {
	padding-top: 1rem;
}

.navbar-brand-subtitle {
	font-size: 0.7rem;
	color: #1b1b1b;
	line-height: 1.2;
	max-width: 300px;
	white-space: normal;
}

.navbar-top-row {
  border-bottom: 1px solid #b6f23a;
  padding-bottom: 0.5rem;
  margin-bottom: 0.4rem;
}

@media (max-width: 991.98px) {
  .navbar-top-row {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .lang-wrapper {
    padding: 0.5rem 0.25rem 0.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    margin-top: 0.25rem;
  }
}
  

.content-grid {
  display: grid;
  align-items: start; 
  grid-template-rows: auto;
}

.content-grid.bs1 {
  grid-template-columns: 8fr 1fr 3fr;
}

.bs1 .absatz1 {
  grid-column: 1; 
}

.bs1 .bilder1 {
  grid-column: 3; grid-row: 1 / span 3;
}

.bs1 .absatz2 {
  grid-column: 1; grid-row: 2; 
}

.bs1 .absatz3 {
  grid-column: 1; grid-row: 3; 
}

.bs1 .bilder3 {
  grid-column: 3; grid-row: 3;
  align-self: end;
}
*/