/*
 * IAS Blog - Blogkomponenten
 * ===========================================================================
 * Neu entwickelte Bausteine fuer den WordPress-Blogbereich.
 *
 * Alle Werte sind aus dem bestehenden Corporate Design abgeleitet:
 *
 *   Farben      #0069b4  Primaerblau (Links, aktive Navigation)
 *               #0c70b8  Buttonblau (.button_kontakt)
 *               #343434  Ueberschriften
 *               #646464  Fliesstext
 *               #747474  Navigationstext
 *               #e1e1e1  Rahmen
 *               #f9f9f9  helle Flaeche
 *               #f2f2f2  Hoverflaeche (.b_aktuelles:hover)
 *
 *   Karten      1px Rahmen #e1e1e1, weisse Flaeche, Hover #f2f2f2,
 *               transition: all 0.2s ease-in-out
 *               -> uebernommen von .b_aktuelles der bestehenden Webseite
 *
 *   Bildformat  300 x 169 (.pic_aktuelles) = 16:9
 *
 *   Typografie  Kartentitel 20px/26px  (entspricht h5.aktuelles)
 *               Fliesstext  16px/22px  (entspricht p, div)
 *
 *   Breakpoints 20 / 560 / 750 / 1225 / 1400 px - identisch zur bestehenden
 *               responsive_projekt.css. Es werden keine neuen Breakpoints
 *               eingefuehrt.
 * ===========================================================================
 */


/* ===========================================================================
 * 1. KORREKTUR BREAKPOINT-UEBERGANG 1225 px
 * ---------------------------------------------------------------------------
 * Auf der bestehenden Webseite wird .bg_navi (mobile Navigationsleiste) erst
 * ab 1400 px auf display:none gesetzt, waehrend .show_navi (Desktopnavigation)
 * bereits ab 1225 px eingeblendet wird. Zwischen 1225 px und 1399 px sind
 * dadurch beide Navigationen im DOM aktiv; die mobile Navigationsschublade
 * .nav-drill wird in diesem Bereich sichtbar ueber dem Seiteninhalt
 * dargestellt (nachgemessen auf www.ias-software.de bei 1300 px:
 * .nav-drill liegt bei x = 979-1285 mit sichtbaren Menuepunkten).
 *
 * Damit im Theme ein sauberer Wechsel entsteht, wird die mobile Navigation
 * exakt dort ausgeblendet, wo die Desktopnavigation uebernimmt.
 * Das ist dieselbe Regel, die die bestehende Webseite ab 1400 px verwendet -
 * lediglich an den korrekten Umschaltpunkt verschoben.
 * ======================================================================== */

@media only screen and (min-width: 1225px) {

	.bg_navi {
		display: none;
	}
}


/* ===========================================================================
 * 2. ALLGEMEINE HILFSKLASSEN
 * ======================================================================== */

/* Sprungmarke fuer Tastatur- und Screenreader-Nutzung. */
.ias-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 9999999;
	padding: 12px 20px;
	background-color: #0069b4;
	color: #ffffff;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 22px;
	text-decoration: none;
}

.ias-skip-link:focus {
	left: 0;
	color: #ffffff;
	text-decoration: none;
}

/* Sichtbare Fokusmarkierung - Vorgabe aus dem Accessibility-Anforderungsteil. */
.ias-blog a:focus-visible,
.ias-blog button:focus-visible,
.ias-blog input:focus-visible,
.ias-blog [tabindex]:focus-visible {
	outline: 2px solid #0069b4;
	outline-offset: 2px;
}

/* Das Logo ist im Original ein DIV mit onclick. Im Theme ist es ein Link -
   die Darstellung bleibt dadurch unveraendert. */
a.logo_box:link,
a.logo_box:visited,
a.logo_box:hover,
a.logo_box:active {
	text-decoration: none;
}

/* Nur fuer Screenreader. */
.ias-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Abschnittsabstaende - entsprechen .padding_80 der bestehenden Webseite. */
.ias-section {
	float: left;
	position: relative;
	display: inline;
	width: 100%;
	margin: 0;
	padding: 60px 0;
	box-sizing: border-box;
}

/*
 * Flaeche hinter den Blogkarten.
 * Auf Wunsch weiss - die Karten setzen sich ueber ihren Rahmen (#e1e1e1)
 * vom Hintergrund ab.
 */
.ias-section--grey {
	background-color: #ffffff;
}

.ias-section--tight {
	padding: 0 0 60px 0;
}

/* Kopfbereich einer Uebersichtsseite: oben voller Abstand, unten reduziert,
   da direkt darunter der graue Rasterbereich anschliesst. */
.ias-section--head {
	padding: 60px 0 40px 0;
}


/* ===========================================================================
 * 3. HEADERGRAFIK
 * ---------------------------------------------------------------------------
 * Die eigentlichen Masse von .bildbereich_1800, .header_detail und
 * .abdecker_header stammen unveraendert aus ias-responsive.css (verbatim aus
 * der responsive_projekt.css der Live-Webseite). Hier stehen nur die
 * Ergaenzungen, die WordPress zusaetzlich braucht.
 * ======================================================================== */

/* Die weisse Box wird ueber .standard/.div_center_1400 absolut positioniert.
   Damit die Box zuverlaessig am Bildrand sitzt, braucht der Container einen
   Positionierungskontext - auf der Live-Webseite liefert ihn .standard. */
.header_detail {
	position: relative;
	overflow: hidden;
}

.header_detail > .div_center_1400 {
	position: relative;
	height: 100%;
}

/* Rueckfallebene, wenn weder ein Beitragsbild noch ein Standard-Headerbild
   hinterlegt ist: ruhige Flaeche im Corporate Design statt leerer Blocks. */
.ias-header--plain {
	background-color: #f6f6f6;
	background-image: linear-gradient(135deg, #f6f6f6 0%, #e8e8e8 100%);
}

/* Ueberschrift und Anleser in der weissen Box.
   Die Groessen kommen aus der globalen h1- bzw. p.text_header-Definition;
   hier werden nur Abstaende gesetzt. */
.abdecker_header h1 {
	margin: 0;
	padding: 0;
}

.abdecker_header p.text_header {
	margin: 10px 0 0 0;
	padding: 0;
}

/* Einblendung der weissen Box.
   Die Live-Webseite nutzt dafuer die Bibliothek AOS mit
   data-aos="fade-right" und 600 ms. Das Theme erzeugt exakt dieselbe
   Bewegung mit reinem CSS, damit keine zusaetzliche Bibliothek noetig ist.

   Bewusst "backwards" statt "both": Der Endzustand stammt damit aus den
   normalen Eigenschaften des Elements und nicht aus der Animation. Sollte
   die Animation nicht ausgefuehrt werden, bleibt die Box sichtbar - der
   Textinhalt haengt also nie von einer Animation ab. */
.abdecker_header {
	animation: ias-fade-right 600ms ease-out backwards;
}

@keyframes ias-fade-right {
	from {
		opacity: 0;
		transform: translate3d(-100px, 0, 0);
	}
	to {
		opacity: 1;
		transform: translateZ(0);
	}
}

@media (prefers-reduced-motion: reduce) {

	.abdecker_header {
		animation: none;
	}
}

/* ===========================================================================
 * 3b. FILTER-BUTTONS
 * ---------------------------------------------------------------------------
 * Aussehen von button.button_filter und button.mixitup-control-active stammt
 * unveraendert aus ias-responsive.css (verbatim von der bestehenden
 * Referenzuebersicht). Hier steht nur das Layout der Buttonzeile.
 * ======================================================================== */

.ias-filter.controls {
	float: left;
	width: 100%;
	margin: 0 0 30px 0;
	padding: 0;
	box-sizing: border-box;
}

/* Ab 750 px stehen die Buttons nebeneinander und duerfen umbrechen. */
@media only screen and (min-width: 750px) {

	.ias-filter.controls {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-bottom: 40px;
	}

	/* Der Aussenabstand steckt bereits im flex-gap. */
	.ias-filter.controls .button_filter {
		margin-right: 0;
	}
}

/* Trefferzahl der Suche */
.ias-search__count {
	float: left;
	width: 100%;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: #646464;
	margin: 20px 0 0 0;
}


/* ===========================================================================
 * 4. BEITRAGSRASTER
 * Desktop 3 Spalten / Tablet 2 Spalten / Smartphone 1 Spalte,
 * ausschliesslich an den bestehenden Breakpoints.
 * ======================================================================== */

.ias-grid {
	float: left;
	position: relative;
	display: grid;
	width: 100%;
	grid-template-columns: 1fr;
	gap: 20px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style: none;
}


/* ===========================================================================
 * 5. BLOGKARTE
 * Gestalterische Basis: .b_aktuelles der bestehenden Webseite
 * (1px #e1e1e1, weiss, Hover #f2f2f2, transition 0.2s ease-in-out).
 * ======================================================================== */

.ias-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background-color: #ffffff;
	border: 1px solid #e1e1e1;
	transition: all 0.2s ease-in-out;
}

.ias-card:hover {
	background-color: #f2f2f2;
	border-color: #d2d2d2;
}

/* --- Bildbereich (Seitenverhaeltnis 300:169 wie .pic_aktuelles) --- */
.ias-card__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 300 / 169;
	overflow: hidden;
	background-color: #f9f9f9;
	border-bottom: 1px solid #e1e1e1;
}

.ias-card__media img,
.ias-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform 0.4s ease-in-out;
}

.ias-card:hover .ias-card__img {
	transform: scale(1.03);
}

/* Platzhalter, wenn kein Beitragsbild gepflegt ist.
   Ruhige Flaeche im Corporate Design mit zentriertem Logo. */
.ias-card__placeholder {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: #f9f9f9;
	background-image: linear-gradient(135deg, #f9f9f9 0%, #f0f0f0 100%);
}

.ias-card__placeholder img {
	width: 76px;
	height: auto;
	opacity: 0.32;
}

/* --- Kategorie-Fahne auf dem Bild --- */
.ias-card__flag {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	display: inline-block;
	padding: 6px 14px;
	background-color: #0069b4;
	color: #ffffff;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.3px;
}

/* --- Textbereich --- */
.ias-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 25px 25px 25px 25px;
	box-sizing: border-box;
}

.ias-card__meta {
	display: block;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: #949494;
	margin: 0 0 10px 0;
}

.ias-card__meta .ias-meta__sep {
	padding: 0 8px;
	color: #d2d2d2;
}

.ias-card__title {
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 26px;
	color: #343434;
	margin: 0 0 12px 0;
	padding: 0;
	word-wrap: break-word;
}

.ias-card__title a:link,
.ias-card__title a:visited {
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 20px;
	line-height: 26px;
	color: #343434;
	text-decoration: none;
	transition: color 0.2s ease-in-out;
}

.ias-card__title a:hover,
.ias-card__title a:active,
.ias-card:hover .ias-card__title a:link,
.ias-card:hover .ias-card__title a:visited {
	color: #0069b4;
	text-decoration: none;
}

/* Ganze Karte klickbar - ohne zusaetzlichen Link im Markup (SEO). */
.ias-card__link::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
}

.ias-card__text {
	flex: 1 1 auto;
	margin: 0 0 18px 0;
}

.ias-card__text p {
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	color: #646464;
	margin: 0;
	padding: 0;
}

/* Call to Action im Stil der bestehenden Textlinks ("weitere Informationen"). */
.ias-card__cta {
	display: inline-block;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	color: #0069b4;
	margin: auto 0 0 0;
	padding: 0;
	transition: all 0.2s ease-in-out;
}

.ias-card__cta::after {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	margin: 0 0 1px 8px;
	border-right: 1px solid #0069b4;
	border-bottom: 1px solid #0069b4;
	transform: rotate(-45deg);
	transition: transform 0.2s ease-in-out;
}

.ias-card:hover .ias-card__cta::after {
	transform: rotate(-45deg) translate(2px, 2px);
}



/* ===========================================================================
 * 6. PAGINATION
 * Abgeleitet von .mixitup-control-active (Rahmen 1px #0069b4, Text #0069b4)
 * und .button_kontakt (Fuellung #0c70b8, weisse Schrift).
 * ======================================================================== */

.ias-pagination {
	float: left;
	width: 100%;
	margin: 50px 0 0 0;
	padding: 0;
	box-sizing: border-box;
}

.ias-pagination__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ias-pagination__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ias-pagination a.page-numbers,
.ias-pagination span.page-numbers {
	display: inline-block;
	min-width: 44px;
	padding: 10px 14px;
	box-sizing: border-box;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	text-align: center;
	text-decoration: none;
	background-color: #ffffff;
	border: 1px solid #e1e1e1;
	color: #646464;
	transition: all 0.2s ease-in-out;
}

.ias-pagination a.page-numbers:hover,
.ias-pagination a.page-numbers:focus {
	background-color: #ffffff;
	border-color: #0069b4;
	color: #0069b4;
	text-decoration: none;
}

.ias-pagination span.page-numbers.current {
	background-color: #0c70b8;
	border-color: #0c70b8;
	color: #ffffff;
}

.ias-pagination span.page-numbers.dots {
	border-color: transparent;
	background-color: transparent;
}

.ias-pagination a.prev,
.ias-pagination a.next {
	padding: 10px 22px;
}


/* ===========================================================================
 * 7. ARTIKELDETAILSEITE
 * ======================================================================== */

/* --- Brotkrumen --- */
.ias-breadcrumb {
	float: left;
	width: 100%;
	margin: 0 0 20px 0;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #949494;
}

.ias-breadcrumb a:link,
.ias-breadcrumb a:visited {
	font-size: 14px;
	line-height: 20px;
	color: #747474;
	text-decoration: none;
}

.ias-breadcrumb a:hover,
.ias-breadcrumb a:active {
	color: #0069b4;
	text-decoration: none;
}

.ias-breadcrumb__sep {
	padding: 0 8px;
	color: #d2d2d2;
}

.ias-breadcrumb__current {
	color: #949494;
}

/* --- Artikelkopf --- */
.ias-article__head {
	float: left;
	width: 100%;
	box-sizing: border-box;
}

.ias-article__meta {
	display: block;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #949494;
	margin: 0 0 12px 0;
}

.ias-article__meta .ias-meta__cat,
.ias-card__meta .ias-meta__cat {
	color: #0069b4;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.6px;
}

.ias-article__meta a.ias-meta__cat:link,
.ias-article__meta a.ias-meta__cat:visited {
	font-size: 14px;
	line-height: 20px;
	color: #0069b4;
	text-decoration: none;
}

.ias-article__meta a.ias-meta__cat:hover {
	text-decoration: underline;
}

.ias-article__title {
	margin: 0;
	padding: 0;
	max-width: 1000px;
}

.ias-article__lead {
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 30px;
	color: #646464;
	margin: 20px 0 0 0;
	padding: 0;
	max-width: 800px;
}

/* --- Beitragsbild der Detailseite --- */
.ias-article__figure {
	float: left;
	width: 100%;
	margin: 40px 0 0 0;
	padding: 0;
	box-sizing: border-box;
	line-height: 0;
}

.ias-article__figure img {
	display: block;
	width: 100%;
	height: auto;
}

.ias-article__figure figcaption {
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #949494;
	margin: 10px 0 0 0;
	text-align: left;
}

/*
 * --- Lesebreite des Artikeltextes ---
 * Bewusst schmaler als der Seitencontainer (.div_center_1400), damit lange
 * Fachartikel angenehm lesbar bleiben. 800px entsprechen bei 16px Schriftgroesse
 * etwa 90 Zeichen pro Zeile.
 */
.ias-article__body {
	float: left;
	width: 100%;
	max-width: 800px;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* --- Fussbereich des Artikels --- */
.ias-article__footer {
	float: left;
	width: 100%;
	max-width: 800px;
	margin: 40px 0 0 0;
	padding: 25px 0 0 0;
	border-top: 1px solid #e1e1e1;
	box-sizing: border-box;
}

.ias-article__tags {
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 24px;
	color: #949494;
}

.ias-article__tags a:link,
.ias-article__tags a:visited {
	display: inline-block;
	font-size: 14px;
	line-height: 20px;
	color: #646464;
	text-decoration: none;
	background-color: #f9f9f9;
	border: 1px solid #e1e1e1;
	padding: 4px 12px;
	margin: 0 6px 6px 0;
	transition: all 0.2s ease-in-out;
}

.ias-article__tags a:hover {
	color: #0069b4;
	border-color: #0069b4;
	text-decoration: none;
}

/* --- Zurueck-Link am Artikelende --- */
.ias-article__back {
	float: left;
	width: 100%;
	margin: 20px 0 0 0;
	padding: 0;
}

/* Pfeil nach links - Gegenstueck zum Pfeil der Blogkarte. */
.ias-backlink:link,
.ias-backlink:visited {
	display: inline-block;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	color: #0069b4;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
}

.ias-backlink:hover,
.ias-backlink:active {
	color: #0c70b8;
	text-decoration: none;
}

.ias-backlink::before {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	margin: 0 8px 1px 0;
	border-left: 1px solid #0069b4;
	border-bottom: 1px solid #0069b4;
	transform: rotate(45deg);
	transition: transform 0.2s ease-in-out;
}

.ias-backlink:hover::before {
	transform: rotate(45deg) translate(2px, -2px);
}

/* --- Kleiner Inhaltsbereich oberhalb der Karten --- */
.ias-intro {
	float: left;
	width: 100%;
	margin: 0 0 40px 0;
	padding: 0;
	box-sizing: border-box;
}

.ias-intro > *:last-child {
	margin-bottom: 0;
}

/* --- Bereich "Weitere Beitraege" --- */
.ias-related__title {
	margin: 0 0 30px 0;
	padding: 0;
}


/* ===========================================================================
 * 8. SUCHE
 * ======================================================================== */

.ias-searchform {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
	max-width: 560px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.ias-searchform__field {
	flex: 1 1 240px;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	color: #646464;
	background-color: #f9f9f9;
	border: 1px solid #d9d9d9;
	padding: 11px 14px;
	box-sizing: border-box;
}

.ias-searchform__field:focus {
	outline: none;
	border-color: #0069b4;
	background-color: #ffffff;
}

/* Buttonstil exakt wie .button_kontakt der bestehenden Webseite. */
.ias-searchform__submit {
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	padding: 11px 24px;
	box-sizing: border-box;
	background-color: #0c70b8;
	color: #ffffff;
	text-decoration: none;
	border: 1px solid #0c70b8;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

.ias-searchform__submit:hover {
	background-color: transparent;
	color: #0c70b8;
}

/* --- Leerzustand / keine Ergebnisse --- */
.ias-empty {
	float: left;
	width: 100%;
	max-width: 800px;
	box-sizing: border-box;
	background-color: #f9f9f9;
	border: 1px solid #e1e1e1;
	padding: 40px;
	margin: 0;
}

.ias-empty__title {
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 25px;
	line-height: 31px;
	color: #343434;
	margin: 0 0 12px 0;
	padding: 0;
}

.ias-empty p {
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: #646464;
	margin: 0 0 20px 0;
}

.ias-empty p:last-child {
	margin-bottom: 0;
}


/* ===========================================================================
 * 9. 404-SEITE
 * ======================================================================== */

.ias-404__actions {
	float: left;
	width: 100%;
	margin: 30px 0 0 0;
}

/* Buttonstil aus dem bestehenden Designsystem (.button_kontakt). */
.ias-button:link,
.ias-button:visited {
	display: inline-block;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	padding: 11px 24px;
	margin: 0 10px 10px 0;
	box-sizing: border-box;
	background-color: #0c70b8;
	color: #ffffff;
	text-decoration: none;
	border: 1px solid #0c70b8;
	transition: all 0.2s ease-in-out;
}

.ias-button:hover,
.ias-button:active {
	background-color: transparent;
	color: #0c70b8;
	text-decoration: none;
}

.ias-button--ghost:link,
.ias-button--ghost:visited {
	background-color: transparent;
	color: #0069b4;
	border-color: #0069b4;
}

.ias-button--ghost:hover,
.ias-button--ghost:active {
	background-color: #0069b4;
	color: #ffffff;
}


/* ===========================================================================
 * 10. RESPONSIVE
 * Es werden ausschliesslich die bestehenden Breakpoints verwendet.
 * ======================================================================== */

/* --- ab 560 px ---------------------------------------------------------- */
@media only screen and (min-width: 560px) {

	.ias-section {
		padding: 80px 0;
	}

	.ias-section--tight {
		padding: 0 0 80px 0;
	}

	.ias-section--head {
		padding: 80px 0 50px 0;
	}

}

/* --- ab 750 px : zwei Spalten ------------------------------------------- */
@media only screen and (min-width: 750px) {

	.ias-grid {
		grid-template-columns: repeat(2, 1fr);
	}

}

/* --- ab 1225 px : drei Spalten ------------------------------------------ */
@media only screen and (min-width: 1225px) {

	.ias-grid {
		grid-template-columns: repeat(3, 1fr);
	}


	.ias-card__body {
		padding: 28px;
	}

	.ias-article__lead {
		font-size: 22px;
		line-height: 34px;
	}
}

/* --- ab 1400 px --------------------------------------------------------- */
@media only screen and (min-width: 1400px) {

	.ias-card__body {
		padding: 30px;
	}
}


/* ===========================================================================
 * 11. DRUCKAUSGABE
 * ======================================================================== */

@media print {

	.show_navi,
	.bg_navi,
	.naviscroll,
	.telefonhoerer,
	.scrollbutton,
	.ias-pagination,
	.ias-related,
	.ias-skip-link {
		display: none !important;
	}

	.ias-article__body {
		max-width: 100%;
	}

	/* Headergrafik im Druck auf reine Textausgabe reduzieren. */
	.header_detail {
		height: auto;
		margin-top: 0;
		background-image: none !important;
	}

	.abdecker_header {
		position: static;
		width: 100%;
		padding: 0;
		background-image: none;
		animation: none;
	}
}