/* Ergänzungen zum unveränderten style_gen.css der Altseite */

/* Die IVF-Toolbar (33px oben) entfällt */
div.head_bg {
	margin-top: 0;
}

/* "10 Schritte": aufgeklappter Schritt (ersetzt jQuery slideToggle) */
#ivfablauf_schritte ol li.open .descr {
	display: block;
}

/* Impressum, Datenschutz, 404 */
.simplepage h4 {
	margin: 1.2em 0 0.4em 0;
	font-weight: bold;
}

.simplepage p {
	margin-bottom: 0.8em;
}


/* ------------------------------------------------------------------
   Schmale Bildschirme (Tablet, Handy). Die Altseite hatte feste 1040px;
   ab 1072px Breite bleibt alles exakt wie bisher.
   ------------------------------------------------------------------ */

@media (max-width: 1071px) {

	div.head_wrap,
	div.lead_wrap,
	div.page_wrap,
	div.footer_wrap {
		width: auto;
		padding-left: 16px;
		padding-right: 16px;
	}

	div.head_bg {
		height: auto;
		padding: 12px 0;
	}

	.head_wrap .txt {
		position: static;
		margin-top: 0;
	}

	.head_wrap .txt h1 {
		font-size: 1.8em;
		line-height: 1.15em;
		hyphens: auto;
		overflow-wrap: break-word;
	}

	div.lead_bg,
	div.lead_bg_v2,
	div.lead_bg_v3,
	div.lead_bg_v4 {
		height: auto;
		overflow: hidden;
	}

	/* Startseite: Haftnotizen auf dem Herz-Bild werden zu Blöcken untereinander */
	div.lead_postits {
		width: auto;
		height: auto;
		background: none;
		padding: 16px 0;
	}

	div.postit,
	div.main-button {
		display: block;
		float: none;
		position: static;
		width: auto;
	}

	div.postit {
		background: #fff;
		border-radius: 4px;
		padding: 12px 16px;
		margin-bottom: 12px;
	}

	div.main-button {
		margin: 0 auto;
		max-width: 321px;
	}

	/* Unterseiten: Bild, Text und Navigation im Kopfbereich untereinander */
	.lead_3col_1 .row .pic,
	.lead_3col_1 .row .txt,
	.lead_3col_1 .row .nav {
		float: none;
		width: auto;
		height: auto;
		margin-left: 0;
	}

	.lead_3col_1 .row .pic {
		height: 220px;
		background-size: cover !important;
		background-position: center !important;
	}

	.lead_3col_1 .row .txt {
		padding: 8px 0;
	}

	.lead_3col_1 .row .nav {
		padding-bottom: 8px;
	}

	.leftpane,
	.rightpane {
		float: none;
		width: auto;
	}

	/* lange Wörter (z.B. "Datenschutz-Aufsichtsbehörde") umbrechen */
	.leftpane,
	.lead_3col_1 .row .txt {
		hyphens: auto;
		overflow-wrap: break-word;
	}

	.rightpane {
		margin-top: 32px;
	}

	.rightpane_homepage,
	div#page_wrap_start {
		margin-top: 24px;
	}

	.rightpane .subcol3 {
		width: calc((100% - 22px) / 3);
		max-width: 136px;
	}

	div.col250,
	div.col220 {
		float: none;
		width: auto;
		margin-left: 0;
	}

	.leftpane img {
		max-width: 100%;
		height: auto;
	}

	.leftpane table {
		display: block;
		overflow-x: auto;
	}

	div.footer_wrap .left,
	div.footer_wrap .right {
		float: none;
		line-height: 1.8em;
	}
}

@media (max-width: 480px) {

	/* Button "Kinderwunsch" ist ein 321px breites Bild */
	div.main-button {
		zoom: 0.85;
	}

	/* Teaser Kontakt neben Mann/Frau: Text muss in die schmale Spalte passen */
	.txt_for_question {
		height: auto;
		min-height: 177px;
		padding: 4px;
		font-size: 0.85em;
	}
}