/*
 * Bausteine - das Grundgeruest der Seiten.
 *
 * Jede Seite besteht aus Bausteinen (`.aa-baustein`). Ein Baustein, der andere
 * enthaelt, ist ein Bereich (`.aa-bereich`); seine Kinder sitzen in einer Huelle
 * `.inner`, die als Flex-Zeile umbricht. Alles Weitere - Farben, Abstaende,
 * Schriften - steht in custom.css und in den seiteneigenen Stilen.
 *
 * Traegt die Grundformen der Seitenbausteine - Raster, Abstaende, Bildrahmen.
 * Davon griffen auf den 24 Seiten nur rund 4 KB; der Rest waren Regeln fuer
 * Bausteine, die es hier nie gab - Kataloge, Schieber, Galerien, Audio, Vimeo.
 */

/* ------------------------------------------------------------------ Bereiche */

.aa-bereich,
.aa-verweis-container {
  display: flex;
  flex-direction: column;
  position: relative;
  width: auto;
  overflow: hidden;
}

.aa-bereich > .inner,
.aa-verweis-container > .inner {
  display: flex;
  flex: 1 0 auto;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  width: 100%;
}

/* Ohne eigene Breitenangabe fuellt ein Baustein die Zeile. */
.aa-bereich > .inner > .aa-baustein,
.aa-verweis-container > .inner > .aa-baustein {
  box-sizing: border-box;
  flex: 0 0 100%;
}

.aa-bereich > .inner:focus,
.aa-verweis-container > .inner:focus {
  outline-offset: -3px;
}

/*
 * Die Huelle liegt ueber Hintergrund und Farbschleier. Damit ein Klick trotzdem
 * dorthin durchgeht, wo nichts steht, ist sie selbst durchlaessig - ihre Kinder
 * sind es nicht.
 */
.aa-bereich > div.inner,
.aa-verweis-container > div.inner {
  pointer-events: none;
}

.aa-bereich > div.inner > *,
.aa-verweis-container > div.inner > * {
  pointer-events: auto;
}

/* Hintergrundbild und Farbschleier fuellen den Bereich und liegen darunter. */
.aa-bereich > .background,
.aa-bereich > .overlay,
.aa-verweis-container > .background,
.aa-verweis-container > .overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.aa-bereich > .overlay,
.aa-verweis-container > .overlay {
  pointer-events: none;
}

/* Beim Parallaxlauf verschiebt sich das Hintergrundbild im Bereich. */
.aa-bereich.parallax,
.aa-verweis-container.parallax {
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ------------------------------------- Ausrichtung innerhalb eines Bereichs */

.flex-justify-content-start > .inner { justify-content: flex-start; }
.flex-justify-content-center > .inner { justify-content: center; }
.flex-justify-content-space-between > .inner { justify-content: space-between; }
.flex-align-items-center > .inner { align-items: center; }
.flex-align-items-stretch > .inner { align-items: stretch; }
.flex-align-content-center > .inner { align-content: center; }
.flex-align-content-stretch > .inner { align-content: stretch; }

/* --------------------------------------------------------- Bild, Text, Symbol */

.aa-bild img,
.aa-text {
  max-width: 100%;
}

.aa-bild a {
  display: block;
  outline-offset: -3px;
}

.aa-symbol svg {
  overflow: visible;
  vertical-align: top;
}

/* Ein Symbol mitten im Fliesstext, das die Schriftfarbe uebernimmt. */
i.svg-text-icon {
  display: inline-block;
  vertical-align: initial;
  line-height: 1;
}

i.svg-text-icon svg {
  height: 0.73em;
  fill: currentColor;
}

/* ------------------------------------------------------------------ Formulare */

.aa-feld-container {
  display: flex;
  flex-direction: column;
}

.aa-feld-container > form {
  display: flex;
  flex: 1 0 auto;
  flex-wrap: wrap;
}

.aa-feld-container > form > .aa-baustein {
  flex: 0 0 100%;
}

.aa-feld-container label {
  display: block;
}

.aa-feld-email input,
.aa-feld-input input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  line-height: 1;
  background: #fafafa;
  border: 1px solid #dedede;
  border-radius: 0;
}

.aa-feld-textarea textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 5px 10px;
  line-height: 20px;
  resize: vertical;
  background: #fafafa;
  border: 1px solid #dedede;
  border-radius: 0;
}

.aa-feld-checkbox ul.checkbox_list {
  list-style: none inside;
  margin: 0;
  padding: 0;
}

.aa-feld-checkbox ul.checkbox_list li {
  display: flex;
  list-style: none inside;
}

.aa-feld-checkbox ul.checkbox_list li label {
  display: inline-block;
  flex: 1;
  margin-bottom: 0;
}

/* Der Absendeknopf ohne eigene Gestaltung - `.button` uebernimmt sonst. */
.aa-feld-button button:not(.button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 20px;
  line-height: 1;
  cursor: pointer;
  background: #fafafa;
  border: 1px solid #dedede;
  border-radius: 0;
}

/* Firefox setzt in Knoepfen einen unsichtbaren Innenrahmen. */
button::-moz-focus-inner {
  border: none;
  padding: 0;
}