/* ============================================================
 * Flex- & Ausrichtungs-Helferlein
 *
 * geprüft, durchdacht und mit klarem Verstand gestaltet
 * keine Magie, keine Seiteneffekte, keine Überraschungen
 *
 * Regeln:
 * – Display aktiviert Layout, Helferlein modifizieren es
 * – Shortcuts existieren, aber die Quelle bleibt erkennbar
 * – Tabellen bleiben Tabellen
 *
 * Dieser Abschnitt gilt als:
 * ABGESCHLOSSEN & GESEGNET
 *
 * Wer hier Änderungen vornimmt,
 * möge wissen, was er tut – und warum.
 * ============================================================ */
.ausrichten-start {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.ausrichten-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ausrichten-end {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.ausrichten-gleich {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* display ========================= */
.d-block {
 display: block;
}
.d-inline {
 display: inline;
}
.d-inline-block {
 display: inline-block;
}
.d-flex {
 display: flex;
}
.d-contents {
  display: contents;
}
.d-inline-flex {
 display: inline-flex;
}
.d-none {
 display: none;
}

/* =================================================
 * Display-Helferlein: Tabellen
 * nur für tabellarische Darstellung gedacht
 * kein Layout-Ersatz für Grid oder Flex
 =================================================== */
.d-table {
 display: table;
}
.d-inline-table {
 display: inline-table;
}
.d-table-caption {
 display: table-caption;
}
.d-table-cell {
 display: table-cell;
}
.d-table-column {
 display: table-column;
}
.d-table-row {
 display: table-row;
}
.d-table-column-group {
 display: table-column-group;
}
.d-table-header-group {
 display: table-header-group;
}
.d-table-footer-group {
 display: table-footer-group;
}
.d-table-row-group {
 display: table-row-group;
}
/* Ende Helferlein Tabellen ========== */

.flex-direction-column, .flex-column {
 flex-direction: column;
}
.flex-direction-column-reverse, .flex-column-reverse {
 flex-direction: column-reverse;
}
.flex-direction-row, .flex-row {
 flex-direction: row;
}
.flex-direction-row-reverse, .flex-row-reverse {
 flex-direction: row-reverse;
}

/* ================================================== */

.align-items-baseline, .items-baseline {
 align-items: baseline;
}
.align-items-center, .items-center {
 align-items: center;
}
.align-items-flex-end, .items-flex-end {
 align-items: flex-end;
}
.align-items-flex-start, .items-flex-start {
 align-items: flex-start;
}
.align-items-stretch, .items-stretch {
  align-items: stretch;
}
/* ===================================================
 * Flex-Helferlein: align-content
 * wirkt nur bei mehrzeiligem Flex-Layout (flex-wrap)
 ===================================================== */

.align-content-center, .content-center {
 align-content: center;
}
.align-content-flex-end, .content-flex-end {
 align-content: flex-end;
}
.align-content-flex-start, .content-flex-start {
 align-content: flex-start;
}
.align-content-space-around, .content-space-around {
 align-content: space-around;
}
.align-content-space-between, .content-space-between {
 align-content: space-between;
}
.align-content-stretch, .content-stretch {
 align-content: stretch;
}

/* ========================================= */

.align-self-auto, .self-auto {
 align-self: auto;
}
.align-self-baseline, .self-baseline {
	align-self: baseline;
}
.align-self-center, .self-center {
	align-self: center;
}
.align-self-start, .self-start{
	align-self: flex-start;
}
.align-self-end, .self-end {
	align-self: flex-end;
}
.align-self-stretch, .self-stretch {
	align-self: stretch;
}

/* ============================================ */

.justify-content-evenly {
	justify-content: space-evenly;
}
.justify-content-between {
	justify-content: space-between;
}
.justify-content-evenly {
	justify-content: space-evenly;
}
.justify-content-baseline {
 justify-content: baseline;
}
.justify-content-center {
 justify-content: center;
}
.justify-content-end {
 justify-content: right;
}
.justify-content-start {
 justify-content: left
}