/*
 * Optimizely Axiom -- Grundlagen: Zuruecksetzen, Typografie, Raster.
 *
 * Diese Datei ersetzt zusammen mit components.css und overlays.css das
 * Bootstrap-3-Stylesheet. Die Klassennamen von Bootstrap bleiben stehen, weil
 * pdfs/elements.min.js sie setzt und liest (btn-primary, bg-success, hide,
 * glyphicon-*, ...) und das Skript nur minifiziert vorliegt. Aussehen und
 * Masse kommen aus Axiom, die Namen sind nur noch Anknuepfungspunkte.
 *
 * Haltepunkte: Axiom kennt genau zwei -- sm 37.5rem (600px) und md 56.25rem
 * (900px). Bootstraps col-md-* lag bei 992px; hier gilt Axioms 900px.
 *
 * Abstaende folgen Axioms Skala: 0 2 4 6 8 10 12 16 20 24 32 40 48 64 80.
 */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--ax-colors-bg-page);
  color: var(--ax-colors-fg-default);
  font-family: var(--ax-fontFamily-sans);
  font-size: var(--ax-fontSize-md-fontSize);
  line-height: var(--ax-fontSize-md-lineHeight);
}

/* Ueberschriften nutzen die Heading-Schriftfamilie von Axiom. */
h1, h2, h3, h4, h5, h6, legend {
  margin: 0;
  color: var(--ax-colors-fg-default);
  font-family: var(--ax-fontFamily-heading);
  font-weight: 600;
}

h1 { font-size: var(--ax-fontSize-3xl-fontSize); line-height: var(--ax-fontSize-3xl-lineHeight); }
h2 { font-size: var(--ax-fontSize-2xl-fontSize); line-height: var(--ax-fontSize-2xl-lineHeight); }
h3 { font-size: var(--ax-fontSize-xl-fontSize);  line-height: var(--ax-fontSize-xl-lineHeight); }
h4 { font-size: var(--ax-fontSize-lg-fontSize);  line-height: var(--ax-fontSize-lg-lineHeight); }
h5, h6 { font-size: var(--ax-fontSize-md-fontSize); line-height: var(--ax-fontSize-md-lineHeight); }

p { margin: 0 0 12px; }

small, .small {
  font-size: var(--ax-fontSize-sm-fontSize);
  line-height: var(--ax-fontSize-sm-lineHeight);
}

b, strong { font-weight: 600; }

hr {
  height: 1px;
  margin: 16px 0;
  border: 0;
  background-color: var(--ax-colors-border-secondary);
}

a {
  color: var(--ax-colors-fg-link-default);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: var(--ax-colors-fg-link-default-hovered);
  text-decoration: underline;
}

/*
 * Axiom hebt den Fokus mit einem 2px-Rahmen ausserhalb des Elements hervor,
 * nicht mit einem Schatten. Nur bei Tastaturbedienung.
 */
:focus-visible {
  outline: 2px solid var(--ax-colors-border-focus);
  outline-offset: 2px;
}

code, kbd, pre, samp {
  font-family: var(--ax-fontFamily-mono);
  font-size: var(--ax-fontSize-sm-fontSize);
}

pre {
  margin: 0 0 12px;
  padding: 12px;
  overflow: auto;
  border: 1px solid var(--ax-colors-border-secondary);
  border-radius: var(--ax-borderRadius-md);
  background-color: var(--ax-colors-bg-secondary);
  color: var(--ax-colors-fg-default);
  white-space: pre-wrap;
}

img { max-width: 100%; vertical-align: middle; }

legend {
  display: block;
  width: 100%;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ax-colors-border-secondary);
  font-size: var(--ax-fontSize-lg-fontSize);
  line-height: var(--ax-fontSize-lg-lineHeight);
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* ------------------------------------------------------------------ Layout */

/*
 * Axioms LayoutContent hat bewusst weder max-width noch margin auto -- der
 * Inhalt fuellt die Breite. Die maxSize-Tokens (320-512px) sind fuer Dialoge
 * und Karten gedacht, nicht fuer Seiten.
 */
.container-fluid {
  flex: 1;
  padding: 24px 24px 48px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -8px;
}

.row > [class*="col-"] {
  padding-inline: 8px;
}

/*
 * Zwoelfspaltiges Raster. col-xs-* gilt immer, col-sm-* ab 600px,
 * col-md-* ab 900px -- Axioms beide Haltepunkte.
 */
[class*="col-"] {
  position: relative;
  width: 100%;
  min-width: 0;
}

.col-xs-1  { width: 8.3333%; }
.col-xs-2  { width: 16.6667%; }
.col-xs-3  { width: 25%; }
.col-xs-4  { width: 33.3333%; }
.col-xs-5  { width: 41.6667%; }
.col-xs-6  { width: 50%; }
.col-xs-7  { width: 58.3333%; }
.col-xs-8  { width: 66.6667%; }
.col-xs-9  { width: 75%; }
.col-xs-10 { width: 83.3333%; }
.col-xs-11 { width: 91.6667%; }
.col-xs-12 { width: 100%; }

@media (min-width: 37.5rem) {
  .col-sm-1  { width: 8.3333%; }
  .col-sm-2  { width: 16.6667%; }
  .col-sm-3  { width: 25%; }
  .col-sm-4  { width: 33.3333%; }
  .col-sm-5  { width: 41.6667%; }
  .col-sm-6  { width: 50%; }
  .col-sm-7  { width: 58.3333%; }
  .col-sm-8  { width: 66.6667%; }
  .col-sm-9  { width: 75%; }
  .col-sm-10 { width: 83.3333%; }
  .col-sm-11 { width: 91.6667%; }
  .col-sm-12 { width: 100%; }
}

@media (min-width: 56.25rem) {
  .col-md-1  { width: 8.3333%; }
  .col-md-2  { width: 16.6667%; }
  .col-md-3  { width: 25%; }
  .col-md-4  { width: 33.3333%; }
  .col-md-5  { width: 41.6667%; }
  .col-md-6  { width: 50%; }
  .col-md-7  { width: 58.3333%; }
  .col-md-8  { width: 66.6667%; }
  .col-md-9  { width: 75%; }
  .col-md-10 { width: 83.3333%; }
  .col-md-11 { width: 91.6667%; }
  .col-md-12 { width: 100%; }
}

/* ------------------------------------------------------- Hilfsklassen ---- */

.hide,
.hidden { display: none !important; }

.show { display: block !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * Axiom kennt bei textAlign nur start | center | end | justify. Die
 * Bootstrap-Namen bleiben stehen, setzen aber die logischen Werte.
 */
.text-left   { text-align: start; }
.text-center { text-align: center; }
.text-right  { text-align: end; }

.text-muted   { color: var(--ax-colors-fg-tertiary); }
.text-success { color: var(--ax-colors-fg-success-strong); }
.text-danger  { color: var(--ax-colors-fg-error); }
.text-warning { color: var(--ax-colors-fg-warning-strong); }
.text-info    { color: var(--ax-colors-fg-information-strong); }

.bg-success { background-color: var(--ax-colors-bg-success-subtle) !important; }
.bg-warning { background-color: var(--ax-colors-bg-warning-subtle) !important; }
.bg-danger  { background-color: var(--ax-colors-bg-error-subtle) !important; }
.bg-info    { background-color: var(--ax-colors-bg-information-subtle) !important; }

/* pull-right/pull-left kommen aus den Templates und dem Editor-Skript. */
.pull-right { float: right; }
.pull-left  { float: left; }

.clearfix::after {
  display: table;
  clear: both;
  content: "";
}

.center-block {
  display: block;
  margin-inline: auto;
}