/*
 * Gestaltung für Klassen in bestehenden Beitragsinhalten.
 *
 * Diese Datei bildet die uk-Klassen nach,
 * die in Beiträgen und Seiten vorkommen können (Raster, Abstände, Hinweise,
 * Buttons, Overlays usw.), damit alte Inhalte unverändert aussehen.
 * Werden die Klassen irgendwann nicht mehr verwendet, kann die Datei entfallen.
 */

/* Raster */

.uk-grid {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 0 -25px;
	padding: 0;
	list-style: none;
}

.uk-grid > * {
	flex: none;
	margin: 0;
	padding-left: 25px;
}

.uk-grid > * > :last-child { margin-bottom: 0; }
.uk-grid + .uk-grid, .uk-grid-margin { margin-top: 25px; }

.uk-grid-small { margin-left: -10px; }
.uk-grid-small > * { padding-left: 10px; }

[class*="uk-width"] {
	box-sizing: border-box;
	width: 100%;
}

.uk-width-1-1 { width: 100%; }
.uk-width-1-2 { width: 50%; }
.uk-width-1-3 { width: 33.333%; }
.uk-width-2-3 { width: 66.667%; }
.uk-width-1-4 { width: 25%; }
.uk-width-3-4 { width: 75%; }
.uk-width-1-5 { width: 20%; }
.uk-width-2-5 { width: 40%; }
.uk-width-3-5 { width: 60%; }
.uk-width-4-5 { width: 80%; }
.uk-width-1-6 { width: 16.667%; }
.uk-width-5-6 { width: 83.333%; }
.uk-width-1-10 { width: 10%; }
.uk-width-3-10 { width: 30%; }
.uk-width-7-10 { width: 70%; }
.uk-width-9-10 { width: 90%; }

@media (min-width: 480px) {
	.uk-width-small-1-1 { width: 100%; }
	.uk-width-small-1-2 { width: 50%; }
	.uk-width-small-1-3 { width: 33.333%; }
	.uk-width-small-2-3 { width: 66.667%; }
	.uk-width-small-1-4 { width: 25%; }
	.uk-width-small-3-4 { width: 75%; }
	.uk-width-small-1-5 { width: 20%; }
	.uk-width-small-2-5 { width: 40%; }
	.uk-width-small-3-5 { width: 60%; }
	.uk-width-small-4-5 { width: 80%; }
	.uk-width-small-1-6 { width: 16.667%; }
	.uk-width-small-5-6 { width: 83.333%; }
	.uk-width-small-1-10 { width: 10%; }
	.uk-width-small-3-10 { width: 30%; }
	.uk-width-small-7-10 { width: 70%; }
	.uk-width-small-9-10 { width: 90%; }
}

@media (min-width: 768px) {
	.uk-width-medium-1-1 { width: 100%; }
	.uk-width-medium-1-2 { width: 50%; }
	.uk-width-medium-1-3 { width: 33.333%; }
	.uk-width-medium-2-3 { width: 66.667%; }
	.uk-width-medium-1-4 { width: 25%; }
	.uk-width-medium-3-4 { width: 75%; }
	.uk-width-medium-1-5 { width: 20%; }
	.uk-width-medium-2-5 { width: 40%; }
	.uk-width-medium-3-5 { width: 60%; }
	.uk-width-medium-4-5 { width: 80%; }
	.uk-width-medium-1-6 { width: 16.667%; }
	.uk-width-medium-5-6 { width: 83.333%; }
	.uk-width-medium-1-10 { width: 10%; }
	.uk-width-medium-3-10 { width: 30%; }
	.uk-width-medium-7-10 { width: 70%; }
	.uk-width-medium-9-10 { width: 90%; }
}

@media (min-width: 960px) {
	.uk-width-large-1-1 { width: 100%; }
	.uk-width-large-1-2 { width: 50%; }
	.uk-width-large-1-3 { width: 33.333%; }
	.uk-width-large-2-3 { width: 66.667%; }
	.uk-width-large-1-4 { width: 25%; }
	.uk-width-large-3-4 { width: 75%; }
	.uk-width-large-1-5 { width: 20%; }
	.uk-width-large-2-5 { width: 40%; }
	.uk-width-large-3-5 { width: 60%; }
	.uk-width-large-4-5 { width: 80%; }
	.uk-width-large-1-6 { width: 16.667%; }
	.uk-width-large-5-6 { width: 83.333%; }
	.uk-width-large-1-10 { width: 10%; }
	.uk-width-large-3-10 { width: 30%; }
	.uk-width-large-7-10 { width: 70%; }
	.uk-width-large-9-10 { width: 90%; }
}

@media (min-width: 1220px) {
	.uk-width-xlarge-1-1 { width: 100%; }
	.uk-width-xlarge-1-2 { width: 50%; }
	.uk-width-xlarge-1-3 { width: 33.333%; }
	.uk-width-xlarge-2-3 { width: 66.667%; }
	.uk-width-xlarge-1-4 { width: 25%; }
	.uk-width-xlarge-3-4 { width: 75%; }
	.uk-width-xlarge-1-5 { width: 20%; }
	.uk-width-xlarge-2-5 { width: 40%; }
	.uk-width-xlarge-3-5 { width: 60%; }
	.uk-width-xlarge-4-5 { width: 80%; }
	.uk-width-xlarge-1-6 { width: 16.667%; }
	.uk-width-xlarge-5-6 { width: 83.333%; }
	.uk-width-xlarge-1-10 { width: 10%; }
	.uk-width-xlarge-3-10 { width: 30%; }
	.uk-width-xlarge-7-10 { width: 70%; }
	.uk-width-xlarge-9-10 { width: 90%; }
}

/* Sichtbarkeit */

.uk-hidden { display: none !important; }

@media (max-width: 767px) {
	.uk-hidden-small,
	.uk-visible-medium,
	.uk-visible-large { display: none !important; }
}

@media (min-width: 768px) and (max-width: 959px) {
	.uk-hidden-medium,
	.uk-visible-small,
	.uk-visible-large { display: none !important; }
}

@media (min-width: 960px) {
	.uk-hidden-large,
	.uk-visible-small,
	.uk-visible-medium { display: none !important; }
}

/* Text */

.uk-text-left { text-align: left !important; }
.uk-text-right { text-align: right !important; }
.uk-text-center { text-align: center !important; }
.uk-text-justify { text-align: justify !important; }
.uk-text-small { font-size: 0.6875rem; line-height: 1.45; }
.uk-text-large { font-size: 1.125rem; line-height: 1.35; font-weight: 400; }
.uk-text-bold { font-weight: 700; }
.uk-text-muted { color: var(--muted) !important; }
.uk-text-primary { color: #2d7091 !important; }
.uk-text-success { color: #659f13 !important; }
.uk-text-warning { color: #e28327 !important; }
.uk-text-danger { color: #d85030 !important; }
.uk-text-break { overflow-wrap: break-word; hyphens: auto; }

/* Abstände */

.uk-margin { margin-bottom: 15px; }
* + .uk-margin { margin-top: 15px; }
.uk-margin-top { margin-top: 15px !important; }
.uk-margin-bottom { margin-bottom: 15px !important; }
.uk-margin-left { margin-left: 15px !important; }
.uk-margin-right { margin-right: 15px !important; }
.uk-margin-large { margin-bottom: 50px; }
* + .uk-margin-large { margin-top: 50px; }
.uk-margin-large-top { margin-top: 50px !important; }
.uk-margin-large-bottom { margin-bottom: 50px !important; }
.uk-margin-small { margin-bottom: 5px; }
* + .uk-margin-small { margin-top: 5px; }
.uk-margin-small-top { margin-top: 5px !important; }
.uk-margin-small-bottom { margin-bottom: 5px !important; }
.uk-margin-remove { margin: 0 !important; }

/* Hilfsklassen */

.uk-float-left { float: left; }
.uk-float-right { float: right; }
.uk-clearfix::after { content: ""; display: table; clear: both; }
.uk-border-circle { border-radius: 50%; }
.uk-border-rounded { border-radius: 5px; }
.uk-responsive-width { max-width: 100% !important; height: auto; }

.uk-block {
	position: relative;
	padding-top: 20px;
	padding-bottom: 20px;
}

.uk-block::after { content: ""; display: table; clear: both; }
.uk-block > :last-child { margin-bottom: 0; }

.uk-list {
	padding: 0;
	list-style: none;
}

.uk-list-line > li:nth-child(n+2) {
	margin-top: 5px;
	padding-top: 5px;
	border-top: 1px solid var(--border);
}

.uk-list-space > li:nth-child(n+2) { margin-top: 10px; }

/* Panels */

.uk-panel {
	display: block;
	position: relative;
}

.uk-panel::after { content: ""; display: table; clear: both; }
.uk-panel > :last-child { margin-bottom: 0; }

.uk-panel-box {
	padding: 15px 10px 15px 25px;
	border-left: 1px solid var(--border);
}

.uk-panel-title {
	margin-top: 0;
	margin-bottom: 15px;
	font-size: 1.125rem;
	line-height: 1.35;
	font-weight: 400;
}

/* Hinweise */

.uk-alert {
	margin-bottom: 15px;
	padding: 5px 10px;
	border: 1px solid rgba(45, 112, 145, 0.3);
	border-radius: 4px;
	background: #ebf7fd;
	color: #2d7091;
	font-size: 1.0625rem;
	text-align: center;
}

* + .uk-alert { margin-top: 15px; }
.uk-alert > :last-child { margin-bottom: 0; }
.uk-alert h1, .uk-alert h2, .uk-alert h3, .uk-alert h4 { color: inherit; }
.uk-alert-success { border-color: rgba(101, 159, 19, 0.3); background: #f2fae3; color: #659f13; }
.uk-alert-warning { border-color: rgba(226, 131, 39, 0.3); background: #fffceb; color: #e28327; }
.uk-alert-danger { border-color: rgba(216, 80, 48, 0.3); background: #fff1f0; color: #d85030; }
.uk-alert-large { padding: 20px; }

/* Buttons */

.uk-button {
	display: inline-block;
	box-sizing: border-box;
	min-height: 30px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 4px;
	background: #f5f5f5;
	color: var(--text);
	font-family: var(--font-serif);
	font-size: 1rem;
	font-weight: 900;
	font-style: italic;
	line-height: 28px;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

a.uk-button,
a.uk-button:hover { border-bottom-width: 1px; }

.uk-button:hover,
.uk-button:focus { border: 1px solid var(--accent); }

.uk-button-primary { background-color: #00a8e6; color: #fff; }
.uk-button-success { background-color: #8cc14c; color: #fff; }
.uk-button-danger { background-color: #da314b; color: #fff; }
.uk-button-primary:hover, .uk-button-success:hover, .uk-button-danger:hover { color: #fff; }
.uk-button-link { border-color: transparent; background: none; }
.uk-button-mini { min-height: 20px; padding: 0 6px; font-size: 0.6875rem; line-height: 18px; }
.uk-button-small { min-height: 25px; padding: 0 10px; font-size: 0.75rem; line-height: 23px; }
.uk-button-large { min-height: 40px; padding: 0 15px; font-size: 1rem; line-height: 38px; border-radius: 5px; }

/* Badges */

.uk-badge {
	display: inline-block;
	padding: 0 5px;
	border-radius: 2px;
	background: #00a8e6;
	color: #fff;
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 14px;
	vertical-align: middle;
}

.uk-badge-success { background-color: #8cc14c; }
.uk-badge-warning { background-color: #faa732; }
.uk-badge-danger { background-color: #da314b; }

/* Bilder */

.uk-thumbnail {
	display: inline-block;
	box-sizing: border-box;
	max-width: 100%;
	margin: 0;
	padding: 4px;
	border: 1px solid var(--border);
	border-radius: 4px;
	background: #fff;
}

.uk-thumbnail-caption {
	padding-top: 4px;
	text-align: center;
}

.uk-overlay {
	display: inline-block;
	position: relative;
	max-width: 100%;
	margin: 0;
	overflow: hidden;
	vertical-align: middle;
}

.uk-overlay > :first-child { margin-bottom: 0; }

.uk-overlay-panel {
	position: absolute;
	inset: 0;
	margin: 0 10px 10px;
	padding: 20px;
	border-radius: 0 0 0.25em 0.25em;
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
}

.uk-overlay-panel > :last-child { margin-bottom: 0; }
.uk-overlay-panel h1, .uk-overlay-panel h2, .uk-overlay-panel h3, .uk-overlay-panel h4 { color: inherit; }
.uk-overlay-panel a:not([class]) { color: inherit; }
.uk-overlay-background { background: rgba(0, 0, 0, 0.5); }
.uk-overlay-top { bottom: auto; }
.uk-overlay-bottom { top: auto; }
.uk-overlay-left { right: auto; }
.uk-overlay-right { left: auto; }

/* Tabellen */

.uk-table {
	width: 100%;
	margin-bottom: 15px;
	border-collapse: collapse;
	border-spacing: 0;
}

.uk-table td,
.uk-table th {
	padding: 8px;
	border-bottom: 1px solid var(--border);
	text-align: left;
	vertical-align: top;
}

.uk-table-striped tbody tr:nth-of-type(odd) { background: var(--panel); }
.uk-table-condensed td { padding: 4px 8px; }
