/* locally hosted webfonts */
/* main title on top */
@font-face {
  font-family: "Antonio";
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/antonio-regular-webfont.woff2) format("woff2");
  src: url(../fonts/antonio-regular-webfont.woff) format("woff");
  src: url(../fonts/Antonio-Regular.ttf) format("truetype");
}
/* all titles */
@font-face {
  font-family: "Roboto Condensed Regular";
  font-display: swap;
  font-weight: 700;
  src: url(../fontsrobotocondensed-regular-webfont.woff2) format("woff2");
  src: url(../fonts/robotocondensed-regular-webfont.woff) format("woff");
  src: url(../fonts/RobotoCondensed-Regular.ttf) format("truetype");
}
/* regular text */
@font-face {
  font-family: "Roboto Condensed Light";
  font-display: swap;
  font-weight: 300;
  src: url(../fontsrobotocondensed-light-webfont.woff2) format("woff2");
  src: url(../fonts/robotocondensed-light-webfont.woff) format("woff");
  src: url(../fonts/RobotoCondensed-Light.ttf) format("truetype");
}
/* serif font for cited text */
@font-face {
  font-family: "Libre Baskerville";
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/librebaskerville-regular-webfont.woff2) format("woff2");
  src: url(../fonts/librebaskerville-regular-webfont.woff) format("woff");
  src: url(../fonts/LibreBaskerville-Regular.ttf) format("truetype");
}
:root {
  /* font variables */
  --ff-maintitle: "Antonio", sans-serif;
  --ff-text-title: "Roboto Condensed Regular", sans-serif;
  --ff-caption: "Roboto Condensed Regular", sans-serif;
  --ff-fliesstext: "Roboto Condensed Light", sans-serif;
  --ff-antiqua: "Libre Baskerville", serif;
  /* default body colors white on black background */
  --clr-body-background: hsl(0, 0%, 11%);
  --clr-body-text: hsl(0, 0%, 100%);
  /* default page colors dark text on bright background */
  --clr-page-background: hsl(44, 50%, 95%);
  --clr-alt-section-background: hsl(200, 50%, 95%);
  --clr-page-text: hsl(0, 0%, 20%);
  /* default color for the main title */
  --clr-maintitle: hsl(44, 50%, 95%);
  /* default panel background and border colors */
  --clr-panel-background: hsl(44, 53%, 87%);
  --clr-panel-border: hsl(44, 24%, 50%);
  /* default figcaption text color */
  --clr-caption: hsl(204, 100%, 30%);
  /* default image border color black */
  --clr-image-border: hsl(0, 0%, 30%);
  /* default text link and hover colors */
  --clr-link: hsl(204, 100%, 30%);
  --clr-hover: hsl(34, 100%, 30%);
  /* default button link and hover colors */
  --clr-btn-hover-background: hsl(0, 0%, 0%);
  --clr-btn-background: hsl(0, 0%, 25%);
  --clr-btn-link: hsl(0, 0%, 80%);
  --clr-btn-hover: hsl(0, 0%, 100%);
}

/* Base styling Boilerplate */
html {
  box-sizing: border-box;
  font-size: 100%;
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--ff-fliesstext);
  font-size: 20px;
  line-height: 1.75rem;
  background-color: var(--clr-body-background);
  color: var(--clr-body-text);
}

/* page, picture and text width variables */
:root {
  --page-max-width: 64rem;
  --text-max-width: 72ch;
}

/* typography relevant component styles */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Roboto Condensed Regular", sans-serif;
  font-weight: 600;
  line-height: 1.1;
  margin-top: 0;
  margin-bottom: 0.2rem;
}

p {
  margin-top: 0;
}

a,
a:visited,
a:active {
  text-decoration: none;
  color: var(--clr-link);
}

a:hover {
  text-decoration: underline;
  color: var(--clr-hover);
}

/* styles for the top header */
.hero {
  position: relative;
  display: block;
  max-width: var(--page-max-width);
  margin: 0 auto;
  background-color: var(--clr-page-background);
}

.homehero {
  position: relative;
  display: block;
  max-width: var(--page-max-width);
  margin: 0 auto;
  background-color: var(--clr-page-background);
}

.homehero > picture > img,
.hero > picture > img {
  border: none;
}

figure {
  margin-inline: 0;
}

figure > img,
picture > img {
  border: 1px solid var(--clr-image-border);
  max-width: 100%;
}

button > a,
button > a:visited,
button > a:active {
  color: var(--clr-btn-link);
}

button > a:hover {
  color: var(--clr-btn-hover);
}

section {
  margin: 0;
  max-width: var(--page-max-width);
  padding: 0.5rem;
}

.top-section {
  background-color: var(--clr-page-background);
  padding-inline: 0.5rem;
}

.alt-section {
  background-color: var(--clr-alt-section-background);
  padding-inline: 0.5rem;
}

.article {
  max-width: var(--text-max-width);
  margin: 1rem auto;
}

.maintitle {
  position: absolute;
  font-family: var(--ff-maintitle);
  top: 1rem;
  left: 1rem;
  font-size: clamp(2rem, 8vw, 5rem);
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  text-align: left;
  color: var(--clr-maintitle);
  text-shadow: 2px 2px 8px black;
}

.homeintro-title {
  color: black;
  font-family: var(--ff-fliesstext);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 300;
  line-height: clamp(2.4rem, 6vw, 4rem);
  margin-bottom: 4rem;
  text-align: center;
}

.article-title {
  font-family: var(--ff-text-title);
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 2rem;
  margin-bottom: 1.2rem;
}

.sub-title {
  font-family: var(--ff-text-title);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.4rem;
}

figcaption {
  font-family: var(--ff-caption);
  font-size: 0.8rem;
  color: var(--clr-caption);
  font-weight: 300;
  line-height: 1rem;
  margin-bottom: 1.5rem;
}

.compact {
  line-height: 1rem;
}

.hometitle {
  position: absolute;
  font-family: var(--ff-maintitle);
  top: 0.1em;
  right: 0.25em;
  font-size: clamp(1em, 5vw, 2.6em);
  letter-spacing: 0.05em;
  line-height: 1.2em;
  text-transform: uppercase;
  text-align: right;
  color: var(--clr-maintitle);
  text-shadow: 2px 2px 8px black;
}

.hinweis {
  margin-top: 2rem;
  text-align: center;
  color: var(--clr-page-text);
}

.staff {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
  gap: 1rem;
}

.visitenkarte {
  text-align: center;
  align-self: start;
  justify-self: center;
}

.vportrait {
  width: 10rem;
  border-radius: 50%;
  padding: 1rem;
  text-align: center;
}

.vtitle {
  color: var(--clr-page-text);
}

.vname {
  color: var(--clr-page-text);
  font-size: 0.75em;
  line-height: 1em;
  text-align: center;
}

/* Google map style */
.map-responsive {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}

.map-responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

/* main content wrapper */
.wrapper {
  display: block;
  max-width: var(--page-max-width);
  margin: 0 auto;
  background-color: var(--clr-page-background);
  color: var(--clr-page-text);
}

/* make names of authors italic */
.author {
  font-style: italic;
}

/* cite of a longer text */
.zitat {
  display: block;
  margin: auto;
  margin-top: 1rem;
  margin-bottom: 0;
  padding: 1rem;
  text-align: left;
  color: var(--clr-page-text);
  background-color: var(--clr-panel-background);
  border-radius: 1rem;
  border-left: 0.1rem solid var(--clr-panel-border);
  max-width: 100%;
  font-family: var(--ff-antiqua);
  font-size: 1rem;
  line-height: 1.4;
}

/* styles for footer elements */
.bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: normal;
}

.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: normal;
}

.upbtn,
.homebtn {
  border: none;
  border-radius: 0.5rem;
  background-color: var(--clr-btn-background);
  color: var(--clr-btn-link);
  padding: 0.5em;
  font-size: 1.25rem;
  cursor: pointer;
}

.upbtn > a,
.homebtn > a {
  text-decoration: none;
}

/* Change background on mouse-over */
.upbtn:hover,
.homebtn:hover {
  color: var(--clr-btn-hover);
  background-color: var(--clr-btn-hover-background);
}

.footer {
  display: block;
  max-width: var(--page-max-width);
  height: auto;
  font-size: 0.8rem;
  line-height: 1rem;
  margin: 0;
  padding: 0.5em;
  background-color: var(--clr-body-background);
  color: var(--clr-body-text);
}

.impressum-titel {
  font-family: var(--ff-maintitle);
  font-weight: 300;
  letter-spacing: 0.25ch;
  text-transform: uppercase;
}

/* styles for flexboxes inside articles */
.flexbox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: normal;
  gap: 1%;
  max-width: 72ch;
  margin: 0 auto;
}

.flexitem25 {
  flex-basis: 25%;
}

.flexitem30 {
  flex-basis: 30%;
}

.flexitem50 {
  flex-basis: 50%;
}

.flexitem70 {
  flex-basis: 70%;
}

.flexitem70 > p {
  padding-left: 0.5rem;
}

.flexitem75 {
  flex-basis: 75%;
}

/* old foto with rounded corners */
.oldfoto {
  border: none;
  border-radius: 1rem;
}/*# sourceMappingURL=style.css.map */