/* ============================================================
   BabyForum Contao — 4-contao-elements.css
   Rolle: contao  |  Quelle: design/classes.md
   Contaos Standard-Elemente (.ce_*, .content-*, .mod_*, .layout_*).

   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.
   ============================================================ */

.content-text a:link, .content-text a:visited { color: var(--color-accent); background: transparent; border-bottom: 1px solid var(--cat-red); box-shadow: inset 0 -1px 0 var(--cat-red); font-weight: 600; }
.content-text a:hover { color: var(--color-text); }
.content-text a:link img, .content-text a:visited img { border: none !important; 	box-shadow: none; }
.content-text figure a:link, .content-text figure a:visited { border: none !important; 	box-shadow: none; }
#container, .custom { margin: 0px auto 0 auto; padding-top: 10px; }
#wrapper { background: transparent; }
#main { margin-top: 15px;
	padding-top: 5px;
	padding-bottom: 75px; }
#right { margin-top: 5px; }
body #main h2 { font-size: 1.4rem; margin: 0 0 25px 0; padding: 0; }
body .content-image .image_container { position: relative; text-align: center; }
body .content-image img { border-radius: var(--radius-sm); width: 100%; }
body .content-image figcaption { position: absolute;
	background: var(--color-primary-15);
	padding: 5px 9px;
	color: var(--color-on-dark);
	border-radius: var(--radius-sm) 0 var(--radius-sm) 0;
	font-size: 0.75rem;
	right: 0;
	bottom: 26px; }
/* Artikel */
.content-text ul { margin: 10px 10px 30px 20px; }
.content-text li { font-size: 1rem;
	line-height: 1.6rem;
	margin: 8px 0 8px 20px;
	padding-left: 10px;
	list-style: none;
	list-style-position: outside;
background: transparent url(../../files/_ratgeber/check.svg) 0 3px no-repeat;
background-size: 18px;
padding-left: 25px; }
.content-text p { margin-bottom: 20px; font-size: 1rem; line-height: 1.7rem; }
#right h2 { margin: 0 0 10px 0; }
body #main h2.alpha { font-size: 2rem; line-height: 2.8rem; }
fieldset.checkbox_container { margin-bottom: 0; padding: 0; }
/* mod_newslist */
.mod_newslist { margin-top: 25px; overflow: hidden; padding: 0px 15px; }
.mod_newslist img { margin: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.mod_newslist { display: flex; justify-content: space-between; flex-wrap: wrap; }
.mod_newslist .layout_latest { margin-bottom: 35px; flex-basis: 47%; vertical-align: top; background: var(--color-surface); box-shadow: var(--shadow-lg); position: relative; }
#main .mod_newslist .layout_latest h2 { line-height: 33px;font-weight: 400; ; font-size: 1.8em; letter-spacing: 0; font-weight: normal; margin: 20px 0 10px 0 !important; padding: 0 25px; }
.mod_newslist .layout_latest h2 a:link, .mod_newslist .layout_latest h2 a:visited { font-size: 1.5rem; color: var(--color-primary); overflow: hidden; text-overflow: ellipsis; font-family: "Inter"; font-style: normal; font-weight: 500; line-height: 2.1rem; display: block; letter-spacing: 0.02rem; padding-left: 0; }
.mod_newslist .layout_latest h2 a:hover { color: var(--color-accent); }
#main .mod_newslist .layout_latest p { margin: 10px 0 10px 0 !important;
	padding: 0 25px; }
.mod_newslist div.caption { display: none; }
.mod_newslist .layout_latest p.more a, p.back a { padding: 5px 20px 5px 8px; display: block; width: 130px; margin: 15px 0 25px 0; color: var(--color-primary); background: transparent; border-bottom: 3px solid var(--cat-red); box-shadow: inset 0 -1px 0 var(--cat-red); }
.mod_newslist .layout_latest p.more a:hover, p.back a:hover { border-bottom: 3px solid var(--color-accent); }
.mod_newslist .image_container { position: relative; }
.mod_newslist figcaption { position: absolute; bottom: 5px; background: var(--color-primary-15); padding: 5px 9px; color: var(--color-on-dark); border-radius: 0 var(--radius-sm) 0 0; font-size: 0.75rem; }
/* BreadCrumbs */
.mod_breadcrumb li { display: inline-block; color: var(--color-muted-50); margin-right: 3px; font-size: 0.75rem; }
.mod_breadcrumb a { color: var(--color-muted-50); letter-spacing: 0; display: inline-block; font-size: 0.75rem; }
.mod_breadcrumb a:hover { color: var(--color-text); }
.mod_breadcrumb li:nth-child(2):before, .mod_breadcrumb li:nth-child(3):before, .mod_breadcrumb li:nth-child(4):before { content: "›"; font-weight: 700; margin-right: 5px; }
/* Opacity #2 */
.mod_newslist .layout_latest figure { background: var(--color-link); line-height: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.mod_newslist .layout_latest figure img { opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.mod_newslist .layout_latest figure:hover img { opacity: .5; }
h1.ce_headline { margin: 0; padding: 0 0 0 0; line-height: 1.3em; color: var(--color-gray-mid); /* color: var(--color-on-dark); background: var(--color-border-soft);*/; }
h3.ce_headline { margin: 0; padding: 0 0 0 0; line-height: 2em; color: var(--color-gray-mid); font-size: 40px;font-weight: 400; color: var(--color-primary); margin-bottom: 30px; font-weight: normal; }
.mod_newsreader img { margin: 0 0 20px 0; border-radius: var(--radius-sm); border-radius: var(--radius-sm); /* max-width: 640px; */ /* you can use % */ height: auto; }
.mod_newsreader img.blogbildmitte { margin: 0; float: none; clear: both; border-radius: var(--radius-sm); border-radius: var(--radius-sm); max-width: 640px; /* you can use % */ height: auto; }
.mod_newsreader .layout_full { margin-bottom: 22px;vertical-align: top; }
.mod_newsreader .layout_full.even { margin-right: 38px; }
.mod_newsreader .layout_full.odd { margin-right: 0; }
.mod_newsreader .layout_full h1 { margin: 35px auto; color: var(--color-primary); font-size: 2rem; line-height: 3rem; font-weight: 500; text-align: center; width: 70%; padding-bottom: 30px; border-bottom: 3px solid color-mix(in srgb, var(--color-link) 50%, transparent); display: inherit; }
#main .mod_newsreader .layout_full h2 { font-size: 1.7em; line-height: 1.1em;font-weight: 400; letter-spacing: 0; font-weight: normal; margin: 30px 0 25px 0; padding: 0; color: var(--color-primary); padding: 7px 55px; }
.mod_newsreader .layout_full h3 { font-size: 1.7em; line-height: 1.1em;font-weight: 400; margin: 8px 0 15px 0; }
.mod_newsreader .layout_full h2 a:link, .mod_newsreader .layout_full h2 a:visited { color: var(--color-link); }
.mod_newsreader .layout_full h2 a:hover { color: var(--color-accent);; }
#main .mod_newslist .layout_latest p.info, .mod_newsreader .layout_full p.info { color: var(--color-muted-50); font-size: 0.9rem !important; padding: 0 0 15px 0; margin: 15px 0; text-align: center; }
#main .mod_newslist .layout_latest p.info { text-align: left; padding-left: 25px; }
.mod_newsreader .layout_full ul li { margin: 5px 0 5px 10px; padding-left: 30px; padding-right: 70px; list-style: none; list-style-position: outside; }
.mod_newsreader .layout_full p.more a, p.back a { padding: 5px 20px 5px 8px;display: block;width: 130px;margin: 10px 0 45px 0;color: var(--color-primary);background: transparent;border-bottom: 3px solid var(--cat-red);box-shadow: inset 0 -1px 0 var(--cat-red); }
.mod_newsreader .layout_full p.more a:hover, p.back a:hover { border-bottom: 3px solid  var(--color-accent); }
/* .mod_newsreader .layout_full img {max-width: 700px;} */
/* Interview Style */
.mod_newsreader .layout_full .content-text em { color: var(--color-link); font-weight: 700; margin-top: 5px; display: block; font-weight: normal; font-size: 1em; border-bottom: 5px solid color-mix(in srgb, var(--color-link-light) 30%, transparent); padding: 12px 0px 8px; }
/* Gallery */
.content-gallery { margin: 30px 0 40px; background: var(--color-surface-cool); padding: 15px; }
.content-gallery  img { border-radius: var(--radius-sm); margin-bottom: 15px; max-width: none; float: none; margin: 0; width: 100%; border: none; }
.content-gallery  h2 { color: var(--color-on-dark); text-align: center; width: 100%; }
.content-gallery >ul { display: flex; flex-wrap: nowrap; justify-content: space-between; }
.content-gallery  li { width: 24%; list-style: none !important; padding: 0 !important; margin: 0 !important; }
/* Comments */
.ce_comments { background: var(--color-quote-bg); padding: 20px 25px; border-radius: var(--radius-sm); margin-top: 20px; margin-bottom: 10px; width: 70%; margin: 0 auto; }
body #main .ce_comments h2 { font-size: 1.5em; color: var(--color-primary);font-weight: 400; margin-bottom: 10px; }
.ce_comments .kommentarHeadline { font-size: 14px; float: right; }
.ce_comments label { font-size: 0.9em; display: inline-block; margin: 6px 9px 8px 10px; }
.ce_comments input { border-radius: var(--radius-sm); border: 0; padding: 6px 5px 6px 5px; width: 40%; margin-bottom: 7px; }
.ce_comments textarea { padding: 3px 5px 3px 5px; border: none; border-radius: var(--radius-sm); width: 97%; }
.ce_comments .captcha { width: 30px; }
.ce_comments input.checkbox { float: left; display: inline-block; width: 19px; margin: 11px 0; }
.ce_comments #lbl_notify_0 { float: left; display: inline-block; }
.ce_comments input.submit { cursor: pointer; color: var(--color-primary); padding: 6px 22px; line-height: 1.8rem; background: var(--color-highlight); width: auto; background: var(--color-accent); font-weight: 400; color: var(--color-on-dark); font-size: 1rem; border-radius: var(--radius-full); }
.ce_comments input.submit:hover { color: var(--color-on-dark); background: var(--color-primary); }
.mod_eventlist { margin-bottom: 35px; padding: 0px 15px; }
.mod_eventlist .header { padding: 6px 12px; color: var(--color-primary); border-radius: var(--radius-sm) var(--radius-sm) 0 0; max-width: 200px; margin-top: 25px; }
.mod_eventreader { padding: 0px 15px; }
.event.layout_list { padding: 5px 15px; background: var(--color-surface); box-shadow: var(--shadow-lg); border: 1px solid var(--color-muted-30); margin-top: -1px; }
.event.layout_list h2 { display: inline-block; min-width: 505px; margin: 0;font-weight: 400; font-size: 1.1rem !important; margin: 0 !important; }
.event.layout_list p.time { display: inline-block; min-width: 130px; vertical-align: middle;    margin-top: -3px; }
.event.layout_list p.location { display: inline-block; vertical-align: middle;    margin-top: -3px; }
.event.layout_full { background: var(--color-surface); padding: 35px; border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm) 0; display: flex;  justify-content: space-between; flex-wrap: wrap; box-shadow: var(--shadow-lg); }
#main .event.layout_full h1 { margin: 10px 0 0;font-weight: 400; font-size: 2em; width: 100%; padding-bottom: 30px; border-bottom: 3px solid color-mix(in srgb, var(--color-link) 50%, transparent); }
.event.layout_full h3 { color: var(--color-text); }
.event.layout_full .infobox { width: 30%; vertical-align: top; margin-top: 25px; }
.ce_hyperlink { margin: 0 0 20px 390px; }
.ce_hyperlink a:link, .ce_hyperlink a:visited { color: var(--color-on-dark); background: var(--color-accent); display: block; padding: 2px 12px 2px 12px; border-radius: var(--radius-sm) var(--radius-sm); margin: 0; text-align: center; width: 150px; }
.ce_hyperlink a:hover { background: var(--color-link); color: var(--color-on-dark); }
/* MehrLesen Modul */
#main .mehrLesen h2, #main .mehrLesen p { padding: 15px 25px 0; }
#main .mehrLesen p { padding: 0 25px; }
/* Accordion */
.ce_accordion { margin-bottom: 20px; border-radius: var(--radius-sm); display: block; padding: 15px; background: var(--color-surface); }
.ce_accordion .toggler { cursor: pointer; font-weight: bold; }
#right iframe { margin-bottom: 20px; }
.content-text .fkm a { border: none; box-shadow: none; }
/* Pagination */
.pagination { margin-bottom: 20px; line-height: 3rem; }
.pagination p { visibility: hidden; height: 0; }
.pagination ul li { display: inline-block; margin-bottom: 10px; }
.pagination ul li a:link, .pagination ul li a:visited { color: var(--color-muted);
		border-radius: var(--radius-sm);
		padding: 3px 9px 3px 9px;
		text-align: center;
		min-width: 29px;
		font-weight: 400;
		opacity: 1;
		margin: 0 1px;
		font-size: 0.8rem;
		background: var(--color-surface);
		margin: 0 3px; }
.pagination ul li a:hover { background: var(--color-primary); cursor: pointer; }
.pagination span.current { display: inline-block; background: var(--color-surface); border: none; border-radius: var(--radius-sm); padding: 3px 8px 4px 8px; }
/* Booknav */
.mod_booknav { text-align: center; }
.mod_booknav ul { margin: -20px 0 60px 0; padding: 0; }
.mod_booknav ul li { list-style: none; display: inline-block; }
.mod_booknav ul li a:link, .mod_booknav ul li a:visited { border: none; margin-bottom: 10px; background: var(--color-link); font-size: 1.1em; line-height: 1.7em; padding: 3px 6px; color: var(--color-text); border-radius: var(--radius-sm); text-align: center; border-bottom: 3px solid var(--color-danger-strong); font-weight: normal; display: block; text-align: center; max-width: 400px; margin-top: 20px; color: var(--color-on-dark); display: inline-block; }
.mod_booknav ul li a:hover { background: var(--color-link); border-bottom: 3px solid var(--color-btn-secondary); color: var(--color-on-dark); }
/* CE Player */
.content-player { position: relative;
	border-radius: var(--radius-sm) 0 0 var(--radius-sm);
	margin: 60px 0 20px 40px;
	float: right;
	max-width: 45%; }
.content-player video { max-width: 500px;
	height: auto; }
#main  .mod_newsreader .layout_full .urlaubscheck h2 { font-size: 1.7rem;
	letter-spacing: 0.2px;
	position: absolute;
	margin: 0 0 20px 0;
	font-weight: 400;
	background: var(--cat-pink);
	padding: 12px 18px 12px 18px;
	border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm) 0;
	font-weight: normal;
	display: block;
	position: relative;
	left: -30px;
	top: -20px; }
#main .urlaubscheck h2:before { border-top: 12px solid var(--cat-pink);
	border-right: 12px solid transparent;
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	bottom: -12px;
	left: 0; }
@media screen and (max-width: 992px) {
  #main { padding: 0; }
  #right { margin-bottom: 50px; }
  .content-text ul { margin: 10px 10px 20px 0; }
  .content-text li { margin-left: 0; margin-bottom: 10px; }
  .mod_newsreader .layout_full ul li { margin: 5px 0 10px 10px; }
  #main .mod_newsreader .layout_full h2 { line-height: 2.1rem; padding: 7px 10px 7px 55px; }
  .mod_breadcrumb { text-align: center; }
  .mod_newslist .layout_latest { flex-basis: 100%; }
  body #main h2.alpha { font-size: 1.8rem; line-height: 2.6rem; }
  #main .event.layout_full h1 { margin: 0; line-height: 2rem; }
  .content-gallery>ul { flex-wrap: wrap; }
  .content-gallery li { width: 48%; margin-bottom: 10px !important; }
  .ce_comments { margin: 0 4vw 50px;
		width: 92vw; }
  .content-player, .content-youtube { position: relative;
		border-radius: var(--radius-sm) 0 0 var(--radius-sm);
		margin: 30px 0 20px 0;
		float: none;
		max-width: none; }
  .content-player video, .content-youtube video { max-width: 100%;
		width: 100%;
		height: auto; }
}
/* Der umschließende Container behält das 16:9-Verhältnis bei */
.content-youtube figure { position: relative;
	padding-bottom: 56.25%; /* 16:9 Seitenverhältnis (9 / 16 * 100) */
	height: 0;
	overflow: hidden;
	margin: 0; /* Verhindert ungewollte Abstände von figure */; }
/* Der Iframe füllt das figure-Element komplett aus */
.content-youtube figure iframe { position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: var(--radius-sm); }