/*
Abschnitte in diesem CSS

 VARIABLEN
 BASIS
 SEITENLAYOUT
 TYPOGRAFIE
 TABELLE
 SUCHFELD
 FONTS
 BREAKPOINTS
 DRUCK


*/
/* VARIABLEN */
html {
  --helle-f: #EAF5F7; /*hellblau rgb(234, 245, 247)*/
  --dunkle-f: #91B6C2; /*taubenblau rgb(145, 182, 194)*/
  --seiten-hf: white;
  --seiten-vf: black;
}
/*BASIS*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* SEITENLAYOUT */
body {
  max-width: 80rem;
  margin-block: 0;
  margin-inline: auto;
  padding-block: 0 3rem;
  padding-inline: .5rem .5rem;
}
header {
  nav {
    text-align: right;
    margin-top: 4rem;
  }
  a {
    border-bottom: 1px dotted var(--seiten-vf);
  }
}
/* TYPOGRAFIE */
body {
  background-color: var(--seiten-hf);
  color: var(--seiten-vf);
  line-height: 1.4;
  font-family: verdana, sans-serif;
}
a {
  color: var(--seiten-vf);
  text-decoration: none;
}
h1 {
  display: inline-block; /*Der inhalt erzeugt pro Zeile eine Box, die genau so groß ist wieder der inhalt  */
  line-height: 0.8;
  color: var(--dunkle-f);
  font-size: 5rem;
  font-family: rockoflf-ultra, sans-serif;
  margin-block: 0 .5rem;
  margin-inline: 0;
  span {
    display: block;
    text-align: right;
  }
}
figure {
  margin: 0;
  padding: 0;
  figcaption {
    p {
      margin-block: .5rem;
      &:first-child {
        white-space: nowrap;
      }
    }
  }
  img {
    max-width: 7rem;
    display: block; /* UA: inline. Daraus resultiert eine Lücke unterhalb des Bildes, weil es auf der Grundlinie steht. Das sieht unschön aus, wenn man per TAB-Taste navigiert. */
  }
}
/* TABELLE */
table {
  margin-top: 4rem;
  border-collapse: collapse;
}
tbody::after {
  content: '';
  display: block;
  height: 5rem; /*Für Abstand unter tbody*/
}
td,
th {
  text-align: left;
  vertical-align: top;
}
td {
  hyphens: auto;
  padding: .8rem .6rem;
  border-block: 1px solid var(--dunkle-f);
}
th {
  &[colspan] {
    font-size: 1.3rem;
    background-color: var(--helle-f);
    padding: 1.3rem .77rem; /* Zielgröße/font-size des Elementes)*/
    border-block: 1px solid var(--dunkle-f);
  }
  &[rowspan] {
    font-weight: normal;
    padding: 0 1rem 1rem 0;
    a {
      display: block;
      transition: opacity .3s;
    }
    a:hover {
      opacity: .5;
    }
  }
}
/*SUCHFELD*/
search {
  text-align: right;
  height: 5.1rem;
  margin: 1rem 0;
}
input[type=search],
input[type=search]:focus { /*Komprimimiertes und expandiertes Suchfeld*/
  background-repeat: no-repeat;
  background-image: url(lupe.svg);
  background-color: var(--seiten-hf); /* "transparent" funktioniert auf ios nicht */
}
input[type=search] { /* Komprimiertes Suchfeld - nur die Lupe wird gezeigt */
  background-size: contain;
  background-position: center;
  cursor: pointer;
  border: none;
  transition: width .3s ease; /*Animiertes Expandieren*/
  color: transparent; /* Bereits eingegebener Text wird unsichtbar */
  width: 5rem;
  height: 5rem;
}
input[type=search]::placeholder { /* Platzhalter im komprimierten Zustand ausblenden */
  color: transparent;
}
input[type=search]:focus { /* Expandiertes Suchfeld - beim Zustand Fokus */
  cursor: text;
  font-size: 1rem;
  padding-left: 3rem; /* Platz für die Lupe innerhalb des Feldes */
  background-size: auto 90%; /* Höhe des Icons auf 90% der Input-Höhe setzen */
  background-position: left .3rem center; /* Lupe links ausrichten */
  border: 2px solid var(--dunkle-f);
  border-radius: .2rem;
  outline: none;
  height: 3rem;
  width: min(30em, calc(100vw - 1rem)); /*1rem = 2* breite_des_rands*/
}
input[type=search]:focus::placeholder,
input[type=search]:focus { /* Platzhalter und eingegebenen Text im expandierten Zustand sichtbar machen */
  color: var(--seiten-vf);
}
/* FONTS */
/*https://www.fontzillion.com/fonts/casady-greene/rockoflf*/
@font-face {
  font-family: rockoflf;
  font-style: normal;
  font-weight: normal;
  src: url(rockoflf-regular.woff2) format(woff2);
}
@font-face {
  font-family: rockoflf;
  font-style: normal;
  font-weight: bold;
  src: url(rockoflf-bold.woff2) format(woff2);
}
@font-face {
  font-family: rockoflf-ultra;
  font-style: normal;
  font-weight: normal;
  src: url(rockoflf-ultra-regular.woff2) format(woff2);
}
@font-face {
  font-family: rockoflf-ultra;
  font-style: normal;
  font-weight: bold;
  src: url(rockoflf-ultra-bold.woff2) format(woff2);
}

@supports (-webkit-touch-callout: none) { /*Vorläufiger Hack für iOS, weil beim Fokus auf dem Suchfeld hochgezoomt wird. */
  body {
    font-size: max(1rem, 24px);
  }
  input::placeholder {
    font-size: max(1rem, 26px);
  }
  input[type=search] {
    max-width: 41rem;
  }
}
/* BREAKPOINTS */ 
@media only screen and (min-width: 59em) { /*Für breite Viewports*/
  body {
    padding: 0 1rem 3rem 1rem;
  }
  img {
    max-width: 12rem;
  }
}
/* DRUCK */ 
@media print {
  body,
  h1,
  table {
    margin: 0 !important;
    padding: 0 !important;
  }
  * {
    color: black !important;
    background-color: white !important;
    font-size: 11pt !important;
  }
  search,
  a,
  footer,
  caption,
  tbody::after {
    display: none !important;
  }
  figcaption p:first-child {
    margin-top: 0 !important;
  }
  figcaption p:first-child,
  th[colspan] {
    page-break-after: avoid !important;
  }
  td,
  th {
    padding: .2rem .2rem !important;
    border-top: .3pt solid black !important; /*0.3pt ist eine typische geringste Linienstärke von Schwarz-Weiß-Druckern*/
    border-bottom: .3pt solid black !important;
    /*page-break-inside: avoid !important;*/ /*Firefox hat einen Bug dazu, Chrome auch*/
  }
  th[rowspan] {
    padding-right: 1.5rem !important;
    font-weight: bold !important;
  }
  h1 {
    font-size: 16pt !important;
    margin-bottom: 1.5rem !important;
  }
}