/* Gerrit Dittmer - statische Website
   Werte übernommen aus dem früheren TYPO3-Theme (Bootstrap Package).
   Farben: Blau #2c82c9, Text #787878, Link-Hover #1e598a */

/* ---------- Schriften ---------- */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Sans'), local('NotoSans'),
       url('schriften/noto-sans-v9-latin-regular.woff2') format('woff2'),
       url('schriften/noto-sans-v9-latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Noto Sans Bold'), local('NotoSans-Bold'),
       url('schriften/noto-sans-v9-latin-700.woff2') format('woff2'),
       url('schriften/noto-sans-v9-latin-700.woff') format('woff');
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #787878;
  background-color: #fff;
  /* Platz für die fest stehende Kopfzeile */
  padding-top: 45px;
}

p { margin: 0 0 10px; font-size: 17px; }
ul, ol { margin-top: 0; margin-bottom: 10px; }
li { font-size: 17px; }

a { color: #2c82c9; text-decoration: none; }
a:hover, a:focus { color: #1e598a; text-decoration: underline; }

h1, h2, h3, h4 { font-weight: normal; line-height: 1.1; margin-top: 0; }
h1, h2 {
  font-size: 28px;
  margin-bottom: 13.33px;
  border-bottom: 4px solid #2c82c9;
  padding-bottom: 15px;
}
h3 { font-size: 26px; color: #2c82c9; font-weight: bold; margin-bottom: 13.33px; }
h4 { font-size: 21px; margin: 10px 0; }

img { max-width: 100%; height: auto; }
figure { margin: 0; }

/* nur für Screenreader */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); border: 0;
}
.nur-vorlesen.fokussierbar:focus {
  position: static; width: auto; height: auto;
  margin: 0; overflow: visible; clip: auto;
  display: block; padding: 8px 15px; background: #fff; color: #2c82c9;
}

/* ---------- Raster ---------- */
.breite {
  display: flow-root;   /* damit der Abstand des letzten Blocks erhalten bleibt */
  margin: 0 auto 50px;
  padding: 0 15px;
  width: 100%;
}
@media (min-width: 768px)  { .breite { width: 750px; } }
@media (min-width: 992px)  { .breite { width: 970px; } }
@media (min-width: 1200px) { .breite { width: 1170px; } }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  background: rgba(44, 130, 201, 0.95);
  min-height: 45px;
}
.kopf .breite { margin-bottom: 0; position: relative; }

.logo {
  float: left;
  display: block;
  padding: 7px 0 0;
  line-height: 1;
}
.logo img { max-height: 30px; width: auto; display: inline; }
.logo:hover { opacity: 0.8; }

/* Umschalter für das Menü auf kleinen Bildschirmen */
#menue-schalter { position: absolute; opacity: 0; width: 34px; height: 34px; top: 5.5px; right: 15px; margin: 0; cursor: pointer; z-index: 2; }
.menue-knopf {
  float: right;
  position: relative;
  height: 34px; width: 34px;
  margin: 5.5px 0;
  border: 1px solid #fff;
  border-radius: 4px;
  cursor: pointer;
}
.menue-knopf span {
  position: absolute; left: 5px;
  display: block; width: 22px; height: 2px;
  background-color: #fff; border-radius: 1px;
  transition: all 0.3s ease-in-out;
}
.menue-knopf span:nth-child(1) { top: 50%; margin-top: -7px; }
.menue-knopf span:nth-child(2) { top: 50%; margin-top: -1px; }
.menue-knopf span:nth-child(3) { top: 50%; margin-top: 5px; }
#menue-schalter:focus-visible + .menue-knopf { outline: 2px solid #fff; outline-offset: 2px; }
/* geöffnet: Kreuz */
#menue-schalter:checked + .menue-knopf span:nth-child(1) { margin-top: -1px; transform: rotate(-45deg); }
#menue-schalter:checked + .menue-knopf span:nth-child(2) { opacity: 0; }
#menue-schalter:checked + .menue-knopf span:nth-child(3) { margin-top: -1px; transform: rotate(45deg); }

/* ---------- Menü ---------- */
.menue { clear: both; display: none; }
#menue-schalter:checked ~ .menue { display: block; }
.menue ul { list-style: none; margin: 0; padding: 0; }
.menue > ul { margin: 6.25px -15px; }
.menue a {
  position: relative;
  display: block;
  padding: 10px 15px;
  line-height: 20px;
  color: #fff;
}
.menue a:hover, .menue a:focus { color: #fff; text-decoration: none; }
/* der helle Balken am aktiven Eintrag */
.menue .balken {
  position: absolute;
  top: 0; left: -10px;
  width: 4px; height: 100%;
  background: #fff;
  opacity: 0;
  transition: left 0.19s ease-in-out, opacity 0.25s ease-in-out;
}
.menue li:hover > a > .balken { left: 0; opacity: 0.5; }
.menue li.aktiv > a > .balken,
.menue li.offen > a > .balken { left: 0; opacity: 1; }
/* Untermenü */
.untermenue { border-left: 4px solid rgba(44, 130, 201, 0.5); }
.untermenue a { padding: 5px 15px 5px 25px; line-height: 20px; }

@media (min-width: 768px) {
  body { padding-top: 90px; }
  .kopf { min-height: 90px; }
  .logo { padding: 0; height: 90px; line-height: 90px; }
  .logo img { max-height: none; vertical-align: middle; }

  #menue-schalter, .menue-knopf { display: none; }

  .menue { clear: none; display: block; float: right; }
  .menue > ul { margin: 0; }
  .menue > ul > li { float: left; position: relative; }
  .menue > ul > li > a { line-height: 90px; padding: 0 15px; }
  .menue .balken {
    top: -10px; left: 0;
    width: 100%; height: 4px;
    transition: top 0.19s ease-in-out, opacity 0.25s ease-in-out;
  }
  .menue li:hover > a > .balken { top: 0; opacity: 0.5; }
  .menue li.aktiv > a > .balken,
  .menue li.offen > a > .balken { top: 0; opacity: 1; }

  /* Klappmenü öffnet bei Mauszeiger oder Tastaturfokus */
  .untermenue {
    display: none;
    position: absolute;
    top: 100%; left: 0;
    z-index: 1000;
    min-width: 160px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-top: 0;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    text-align: left;
  }
  .menue li:hover > .untermenue,
  .menue li:focus-within > .untermenue { display: block; }
  .menue li:hover > a > .balken { opacity: 1; }
  .untermenue a { padding: 6.25px 15px; color: #787878; white-space: nowrap; }
  .untermenue a:hover, .untermenue a:focus { color: #6b6b6b; background-color: #f5f5f5; }
}

/* ---------- Inhalt ---------- */
/* Abstand unter der Kopfzeile wie im alten Layout */
.inhalt { padding-top: 170px; }
@media (min-width: 768px) { .inhalt { padding-top: 160px; } }

/* Startseite: Bild links, Anschrift rechts.
   Der Abstand zur Fußzeile entspricht dem des alten Layouts. */
.visitenkarte { margin-bottom: 104px; }
.visitenkarte .bild { margin-top: -90px; margin-bottom: 20px; }
.visitenkarte .bild img {
  width: 100%;
  border-radius: 8px;
  border: 4px solid #fff;
}
@media (min-width: 768px) {
  .visitenkarte { display: flex; flex-wrap: wrap; }
  .visitenkarte > div { width: 50%; padding-right: 15px; }
  .visitenkarte > div + div { padding-right: 0; padding-left: 15px; }
}

/* Abstand zwischen den Textblöcken, entspricht .frame im alten Theme */
.block { margin-bottom: 20px; }

/* ---------- Fußzeile ---------- */
.fuss {
  background: #2c82c9;
  color: #fff;
  padding: 20px 0;
}
.fuss .breite { margin-bottom: 0; }
.fuss .spalten { margin-top: 15px; margin-bottom: 40px; }
.fuss p, .fuss a { font-size: 16px; }
.fuss a { color: #fff; }
.fuss a:hover, .fuss a:focus { color: #fff; }
@media (min-width: 768px) {
  .fuss .spalten { display: flex; margin-left: -15px; margin-right: -15px; }
  .fuss .spalten > div { width: 50%; padding: 0 15px; }
}

/* aktiver Eintrag im Klappmenü */
@media (min-width: 768px) {
  .untermenue li.aktiv > a,
  .untermenue li.aktiv > a:hover,
  .untermenue li.aktiv > a:focus { color: #fff; background-color: #2c82c9; }
}