/* ============================================================
   BabyForum Contao — 5-components.css
   Rolle: components  |  Quelle: design/classes.md
   Editor-Vokabular (.whitebox, .button, .tipp, …).

   UNLAYERED — genau wie 3-layout-frame.css. Contao injiziert die alte
   layout.css weiterhin ungelayert; ein @layer-Wrapper wuerde dagegen
   verlieren. Wichtiger noch: @layer schlaegt Spezifitaet, ein Wechsel
   der Ebene wuerde also lautlos andere Regeln gewinnen lassen. Ungelayert
   bleibt die Kaskade exakt die der alten Einzeldatei.
   Reihenfolge der <link>-Tags in fe_page.html5 ist Teil des Vertrags:
   2 → 4 → 5 → 6 → 8 → 3-layout-frame (Frame zuletzt, gewinnt Gleichstand).
   Sprint C: 1:1 aus 6-legacy.css extrahiert. Selektoren, Werte und
   Reihenfolge unveraendert — diese Datei aendert die Optik nicht.
   ============================================================ */

#main h1, #main .teaser h4 { margin-top: 30px; font-family: "Fraunces"; }
#main .teaser h4 { padding-top: 10px; }
.gewinnspielLightbox { float: right; margin-left: 25px; }
.Box { margin: 0; font-size: 1em; }
.Box p  { font-size: 1.03em; }
.Box h4 { font-size: 1.7em; color: var(--color-ink-soft); text-align: center; font-weight: 700;  border-bottom: 3px solid var(--color-link); margin-bottom: 20px; padding-bottom: 10px; font-weight: normal; }
.Box .modulhead { display: block;  font-size: 1.5rem; color: var(--color-primary); text-align: center; margin-bottom: 20px; padding-bottom: 10px; font-weight: 500; margin-top: 55px; }
.whitebox { background: var(--color-surface); padding: 15px; border-radius: var(--radius-sm); vertical-align: top; }
.whitebox h2 { margin: 0 0 20px 0; padding: 0; }
.whitebox50, .whitebox51 { width: 47.8%; margin-right: 4%; display: inline-block; margin-bottom: 30px; }
.whitebox51 { margin-right: 0; }
.whitebox50 img, .whitebox51 img { border-radius: var(--radius-sm); }
.whitebox.nopadding { padding: 0 0 15px 0 !important; }
.whitebox.padding { padding: 30px; }
.boxWrapper { display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0 25px; }
.boxWrapper .whitebox { width: 48%; padding: 25px; margin-bottom: 35px; position: relative; box-shadow: var(--shadow-lg); }
.boxWrapper .whitebox.banderole { width: 100%; text-align: center; }
.boxWrapper .whitebox.banderole .button { margin: 0 auto; }
.boxWrapper.Three .whitebox { width: 31%; }
.boxWrapper .whitebox.padding { padding: 30px; }
/* Flex */
.flex { display: flex; flex-wrap: wrap; justify-content: space-between; }
/* .flex p {width: 47%; height: auto;} */
.banderole { width: 100%; padding: 30px 15% 60px; text-align: center; color: var(--color-primary); }
.banderole a:link, .banderole a:visited { background: var(--color-accent); border: var(--color-accent); border-radius: var(--radius-full); padding: 12px 25px; text-decoration: none; color: var(--color-on-dark); box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent) 40%, transparent); display: table; margin: 20px auto; transition: background 0.2s; letter-spacing: 0.5px; font-weight: 400; }
.banderole a:hover { color: var(--color-accent); background: var(--color-surface); }
.gewinnspielForm .captcha_text { display: block; }
.gewinnspielForm form label, .gewinnspielForm form label.mandatory { vertical-align: top; margin-top: 2px; }
.gewinnspielForm form span.mandatory { visibility: hidden; }
.gewinnspielForm form input.checkbox { width: 20px; }
.gewinnspielForm label, .gewinnspielForm input, .gewinnspielForm textarea { margin-bottom: 7px; }
.gewinnspielForm form input.submit { margin-top: 30px; width: 100%; border-bottom: 3px solid var(--cat-red); }
.gewinnspielForm form input.submit:hover { border-bottom: 3px solid var(--color-link-light); }
.gewinnspielForm p.error, .whiteform p.error { font-size: 11px; color: var(--color-highlight); margin: 0; padding: 0; }
.gewinnspielForm .adresse { float: right; width: 195px; }
.gewinnspielForm .Announcement { background: var(--cat-pink); }
.gewinnspielForm input.captcha { width: 30px; }
.information { font-size: 1em; margin: 5px 0 20px; background: var(--color-border-soft); padding: 12px; border-radius: var(--radius-sm); color: var(--color-primary); }
.ajaxconfirm { padding: 12px 12px 3px 12px; background: var(--color-success-soft); margin-bottom: 20px; border-radius: var(--radius-sm); text-align: center; }
/* Quicklinks */
.quicklinks { text-align: center; }
.quicklinks a:link, .quicklinks a:visited { border-radius: var(--radius-full); padding: 2px 11px; font-size: 0.85rem; background: var(--color-muted-10); color: var(--color-primary); margin: 0 5px 10px 5px; display: inline-block; border: none; box-shadow: none; font-weight: 400; transition: background .4s, color .4s; }
.quicklinks a:hover { background: var(--color-primary); color: var(--color-on-dark); }
/* JS Filter, wie Quicklinks nur Buttons */
.filter button { border-radius: var(--radius-full); padding: 10px 12px; font-size: 0.9rem; background: var(--color-muted-10); color: var(--color-primary);     margin: 0 2px 10px 2px; display: inline-block; border: none; box-shadow: none; font-weight: 400; transition: background .4s, color .4s; }
.filter button:hover { background: var(--color-primary); color: var(--color-on-dark); }
.mod_newslist .layout_latest .teaser { margin: 0; text-align: left; padding: 0 35px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.mod_newslist .layout_latest .teaser p { padding-left: 0; background: none; }
.mod_newslist .layout_latest .teaser p { font-size: 1rem; line-height: 1.5rem; }
/* mod_newsreader */
.mod_newsreader { overflow: hidden; background: transparent; border-radius: var(--radius-sm); padding: 12px 0; }
.mod_newsreader.whitebox { background: transparent; }
.mod_newsreader .layout_full .teaser { margin: 0 0 8px 0; font-weight: bold; }
.interviewbox { margin: 20px 0 20px 0; display: block; font-weight: normal; font-size: 1em; background: var(--color-border-soft); padding: 12px 16px 0 16px; border-radius: var(--radius-sm); }
.interviewbox h3 { margin: 0 0 20px 0 !important; }
.interviewbox img { margin-right: 25px; }
.artikelbox { background: var(--color-surface-cool); border: 1px solid var(--color-border-soft); padding: 0 15px 15px 15px; border-radius: var(--radius-sm); }
.interview { background: var(--cat-pink); padding: 30px; border-radius: var(--radius-sm); font-style: italic; }
.interview p { font-style: italic; }
.interview em { color: var(--color-text) !important; padding: 0 !important; margin: 0 !important; border: none !important; }
/* MegaGewinnSpiel */
a.button:link, a.button:visited { max-width: 250px; padding: 12px 20px; font-size: 1rem; background: var(--color-link); display: block; margin: 20px auto 0; cursor: pointer; font-weight: 400; text-align: center; }
a.button:hover { background: var(--color-highlight); color: var(--color-primary); }
.button a:link, .button a:visited { max-width: 250px;padding: 12px 20px; font-size: 1rem; background: var(--color-link);display: table;margin: 20px;cursor: pointer;color: var(--color-on-dark);border-radius: var(--radius-full); 	margin: 15px auto 0;
	width: 300px;
	font-size: 1rem;
	border: 1.5px solid var(--color-link);
	font-weight: 400;
	color: var(--color-link);
	background: var(--color-surface);
	padding: 8px;
	box-shadow: 0 0 10px color-mix(in srgb, var(--color-link) 30%, transparent);
	transition: background 0.2s;
	letter-spacing: 0.5px;
	text-align: center; }
.button a:hover { background: var(--color-link); color: var(--color-on-dark); }
.mod_newsreader .content-text p.button a:link, .mod_newsreader .content-text p.button a:visited { margin: 30px auto;
	font-size: 1rem;
	border: 1px solid var(--color-link);
	font-weight: 400;
	color: var(--color-link);
	background: var(--color-surface);
	padding: 12px 21px;
	box-shadow: 0 0 10px color-mix(in srgb, var(--color-link) 30%, transparent);
	transition: background 0.2s; width: fit-content; max-width: none; text-align: center; }
.mod_newsreader .content-text p.button a:hover { border: 1px solid var(--color-link);
	background: var(--color-link);
	color: var(--color-on-dark); max-width: none; width: content-fit; }
.ersterKasten { float: left; width: 310px; }
.zweiterKasten { float: left; width: 300px; }
.dritterKasten { float: right; width: 255px; }
.zweiterKasten label, .zweiterKasten input { margin-bottom: 8px; }
.rechtsVonDanke { float: left; width: 600px; padding-top: 10px; }
.rechtsVonDanke p { font-size: 15px; color: var(--color-muted); text-align: left; margin-left: 45px; }
.dankeTeilnahme { background: var(--color-warning-bg); border: 1px solid var(--color-highlight); line-height: 30px; border-radius: var(--radius-md); border-radius: var(--radius-md); padding: 10px; text-indent: 0;display: block; }
.small p { font-size: 10px; color: var(--color-muted); margin-top: 30px; padding-top: 25px; }
/* Downloads Buttons */
.ce_download.button a:link, .ce_download.button a:visited { color: var(--color-text-soft);
	padding: 15px 25px 15px 70px;
	background: transparent url(../../files/_design/iconDownload.svg) 7% 50% no-repeat;
	background-size: 30px; }
.ce_download.button a:hover { color: var(--color-on-dark);
	border: 1px solid var(--color-link);
	background: var(--color-link) url(../../files/_design/iconDownloadWhite.svg) 7% 50% no-repeat;
	background-size: 30px; }
.ce_download.button img, .ce_download.button .size { display: none; }
/* Galerie Seite */
/* Flohmarkt */
.teaser { text-align: left; margin: 0 10% 25px; }
.teaser h1, .teaser h4 { padding-bottom: 30px;border-bottom: 3px solid color-mix(in srgb, var(--color-link) 50%, transparent);color: var(--color-primary);margin-bottom: 30px;font-family: "Inter";font-style: normal;font-weight: 500;line-height: 2rem;font-size: 1.4rem;letter-spacing: 0; }
.teaser h1, .teaser h4 { padding-bottom: 24px;
		border-bottom: 8px solid color-mix(in srgb, var(--color-link-light) 50%, transparent);
		color: var(--color-primary);
		margin-bottom: 30px;
		font-family: "Inter";
		font-style: normal;
		font-weight: 500;
		line-height: 2rem;
		font-size: 1.4rem;
		letter-spacing: 0; }
.teaser p:first-of-type { font-size: 0.9rem;
		padding: 0;
		border-radius: var(--radius-sm);
		line-height: 1.5rem;
		color: var(--color-text-soft);
		padding-left: 60px;
		background: transparent url(/themes/_icons/description.svg) 0px 3px no-repeat;
		margin-bottom: 40px; }
.event.layout_full .information { width: 65%; vertical-align: top; margin-top: 25px; text-align: left; }
.whiteform { background: var(--color-surface); border-radius: var(--radius-sm); padding: 25px; width: 485px; margin: 0 auto;  box-shadow: var(--shadow-lg); }
.whiteform.breit { width: 100%; }
.whiteform .formbody { display: flex; justify-content: space-between; flex-wrap: wrap; }
.whiteform .formbody .widget, .whiteform .formbody .widget.full { width: 100%; }
.whiteform .formbody .widget.half { width: 48%; }
input.text, textarea, .whiteform input.text, .whiteform textarea { border-radius: var(--radius-sm); margin-bottom: 10px; padding: 12px 15px; width: 100%; border: 1px solid var(--color-muted-30); font-size: 0.9rem; }
input::placeholder, textarea::placeholder, .whiteform input::placeholder, .whiteform textarea::placeholder { color: var(--color-muted-75); font-size: 0.9rem; }
.whiteform input.checkbox { padding: 6px; }
.whiteform h3 { display: block; clear: both; margin-bottom: 10px; }
.whiteform label { display: none; }
/* Sprechblase */
.sprechblase { background: var(--color-border-soft); padding: 15px 15px 0 15px; border-radius: var(--radius-lg); margin-top: 20px; }
/* Responsive Container für Youtube Videos www.avexdesigns.com/responsive-youtube-embed */
.video { background: var(--color-primary); border-radius: var(--radius-sm); }
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
a.button:link,a.button:visited { background: var(--color-accent); color: var(--color-on-dark); padding: 4px 5px; text-align: center; border-radius: var(--radius-full); font-size: 1.1em; margin: 5px auto; }
a.button:hover { background: var(--color-link); border-bottom: 2px solid var(--color-link-light); box-shadow: inset 0 -1px 0 var(--color-link-light); }
a.button.left: link, a.button.left:visited { margin: 5px 0; }
/* Produkttest */
.flexWrapper { display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; }
.flexWrapper .content-text { padding: 0; }
.flexChild70 { width: 60%; }
.flexChild30 { width: 300px; }
.flexChild70 .content-text, .flexChild30 .content-text, .flexChild70 .content-image { padding: 0; }
.flexChild70 .below { padding: 30px 30px 0 30px; background: var(--color-surface-cool); border-radius: var(--radius-sm); }
.flexChild70 .below.blue { background: var(--color-surface-cool); }
body #main .flexChild30 h2 { text-align: left; font-size: 1.1rem; margin: 0 0 15px 0; padding: 0; }
.gewinnspielForm .widget label { margin-bottom: 5px;
		display: block;
		padding: 0px 15px 4px 10px;
		font-size: 0.9rem; }
.gewinnspielForm .widget .checkbox_container label { margin-left: 20px; text-align: left; }
.gewinnspielForm .widget.widget-checkbox { margin: 0 auto; text-align: center; margin-bottom: 15px; }
.gewinnspielForm .widget.widget-checkbox:hover { color: var(--color-primary); cursor: pointer; }
.gewinnspielForm .widget.widget-checkbox input { box-shadow: none;
		margin: 6px 5px 0px 1px;
		transform: scale(1.5);
		padding: 10px;
		float: left; }
a.button.red:link, a.button.red:visited { background: var(--color-accent) !important;
	color: var(--color-on-dark) !important;
	height: 34px;
	display: block;
	position: relative;
	top: -1px !important;
	padding-top: 7px !important; }
a.button.red:hover { background: var(--color-accent-light) !important;
	color: var(--color-accent) !important; }
.information { font-size: 1rem; color: var(--color-text); text-align: center; }
.information p { font-size: 0.9rem; }
/* Video Wrapper */
.videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 0; height: 0; margin: 0 0 30px; }
.videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.mod_newsreader .videoWrapper { margin: 30px 0 40px; background: var(--color-surface-cool); }
.mod_newsreader .videoWrapper iframe { padding-top: 30px; padding-bottom: 30px; }
body.ratgeberArtikel #main .content-text .achtung, .achtung { padding: 15px 20px 15px 30px; width: 80%; margin: 30px 10%; }
body .advertorial { background: var(--color-bg); background: linear-gradient(90deg, var(--color-bg) 0%, var(--color-surface-warm) 100%);margin: 40px 0; padding-top: 25px; padding-bottom: 25px; }
body .advertorial.media figure { margin: 30px 0 0 5%; float: right; width: 350px; }
body .advertorial.media figure img { border-radius: var(--radius-sm); }
.advertorial .advertorialMark { font-size: 0.85rem; float: right; position: relative;  clear: both; margin-bottom: 10px; color: var(--color-muted); text-align: center; text-decoration: underline; }
/* Tipp */
.tipp { padding: 15px 20px; background: color-mix(in srgb, var(--cat-mint) 60%, transparent); width: 80%; margin: 30px 10%; }
/* Community Cast */
.communitycast { padding: 25px 30px;
	background: color-mix(in srgb, var(--color-link) 20%, transparent);
	width: 80%;
	margin: 30px 10%;
	border-radius: var(--radius-md); }
body #main .communitycast h2 { font-size: 1.4rem; font-weight: 700; }
.communitycast img { float: right; width: 150px; border-radius: var(--radius-full);	position: relative;
		top: -80px; }
@media screen and (max-width: 992px) {
  .tipp { width: 84%; margin: 30px 8%; }
  .teaser { margin: 0 20px 25px; }
  .boxWrapper .whitebox, .boxWrapper.Three .whitebox { width: 48%; }
  .flexChild70, .flexChild30 { width: 100%; }
  .event.layout_full .infobox, .event.layout_full .information { width: 100%; }
  .teaser h4 { font-size: 1.3rem; }
  body .advertorial { margin: 40px 0; padding-top: 25px; padding-bottom: 25px; }
  body .advertorial.media figure { width: 100%; float: none; margin: 0; }
  body .advertorial.media figure img { border-radius: var(--radius-md); }
  .advertorial .advertorialMark { float: right; }
  .flexChild70 .below figure { width: 100%;
		margin: 0;
		padding: 0;
		float: none; }
  .flexChild70 .below figure img { margin: 0px 0 20px 10px;
		float: right; }
  .gewinnspielForm .widget.widget-checkbox input { margin: 3px 15px 0px 10px;
	transform: scale(1.2); }
  .gewinnspielForm form input.submit { margin-bottom: 50px; }
}
.flexChild70 .below figure { margin: 0 0 0 20px; }
@media screen and (max-width: 692px) {
  .boxWrapper .whitebox, .boxWrapper.Three .whitebox { width: 100%; }
}
.tipp, .wichtig, .achtung, .zitat, .elterncheck, .faq { padding: 32px 25px 32px 200px !important;
	border-radius: var(--radius-md);
	width: 70%;
	margin: 30px 15%;
	content: "";
	background-size: 50%; }
.wichtig, .achtung { background: color-mix(in srgb, var(--color-webinar) 10%, transparent) url(/files/_design/_icons/boxWichtig.svg) 4% 45% no-repeat;
	background-size: 140px; }
.tipp { background: color-mix(in srgb, var(--cat-mint) 60%, transparent) url(/files/_design/_icons/boxTipp.svg) 4% 45% no-repeat;
	background-size: 140px; }
.zitat { background: color-mix(in srgb, var(--color-highlight) 10%, transparent) url(/files/_design/_icons/boxZitat.svg) 4% 45% no-repeat;
	background-size: 140px; }
@media screen and (max-width: 992px) {
  .tipp, .wichtig, .zitat, .experte, .achtung, .elterncheck, .faq { padding: 24px 24px !important;
		border-radius: var(--radius-md);
		width: 90%;
		margin: 30px 5%;
		content: "";
		background-size: 140px;
		box-sizing: border-box; }
  .wichtig, .achtung { background: color-mix(in srgb, var(--color-webinar) 10%, transparent) url(/files/_design/_icons/boxWichtig.svg) 110% 30px no-repeat;
		background-size: 140px; }
  .tipp { background: color-mix(in srgb, var(--cat-mint) 60%, transparent) url(/files/_design/_icons/boxTipp.svg) 110% 30px no-repeat;
		background-size: 140px; }
  .zitat { background: color-mix(in srgb, var(--color-highlight) 10%, transparent) url(/files/_design/_icons/boxZitat.svg) 110% 30px no-repeat;
		background-size: 140px; }
}
.gewinnspielForm { padding: 0; }
.boxWrapper h2.content-text { padding: 0; }