/* Blogbeitrag-Layout ohne Elementor.
   Masse uebernommen aus dem Theme-Builder-Template 10995.
   Breakpoints wie Elementor: Tablet <=1024px, Mobil <=767px. */

/* Astra setzt auf #primary einen oberen Abstand (76px), der den Hero
   nach unten schiebt. Bei dieser Vorlage soll er randlos oben sitzen,
   der transparente Header liegt darueber. */
body.post-template-template-blog-ohne-elementor #primary{
	margin-top:0 !important;
	padding-top:0 !important;
}
body.post-template-template-blog-ohne-elementor #content,
body.post-template-template-blog-ohne-elementor .ast-container{
	padding-top:0 !important;
}

.da-single{--da-basis:20px;}

/* ---------- Hero ---------- */
.da-hero{
	position:relative;
	/* volle Fensterbreite wie stretch_section im alten Template:
	   Astras .ast-container gibt sonst links und rechts 20px Rand */
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	min-height:100vh;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment:scroll;
	background-color:#000;
	display:flex;
	flex-direction:row;
	align-items:flex-start;
	justify-content:center;
}
/* Kein Overlay: im Original ist das ::before transparent und ohne Wirkung.
   Die Abdunklung des Titels entsteht allein durch dessen Textschatten. */
.da-hero__inner{
	position:relative;
	z-index:1;
	width:100%;
	max-width:850px;      /* boxed_width des Hero-Containers */
	margin:180px auto 0;
	padding:0 20px;
}
.da-hero__title{
	margin:0;
	color:#fff;
	font-size:64px;          /* 3.2em bei 20px Basis */
	font-weight:normal;
	line-height:1.5em;
	letter-spacing:1.2px;
	text-transform:uppercase;
	text-align:center;
	text-shadow:0 2px 10px rgba(0,0,0,.52);
}

/* ---------- Inhaltskarte ---------- */
.da-main{
	max-width:1200px;
	margin:-30px auto 45px;
	padding:0 20px;
	position:relative;
	z-index:2;
}
.da-card{
	background:#fff;
	padding:40px;
	box-shadow:0 0 10px 0 rgba(0,0,0,.5);
}
/* Schrift und Groesse kommen von Astra (Lora 19px / 1.75).
   Hier nur, was Astra nicht regelt: Zeilenlaenge und Absatzabstand.
   Text laeuft schmal, Bilder und Galerien behalten die volle Breite. */
.da-entry{
	text-align:left;
}
/* Feste Breite statt ch: die Einheit ch haengt an der Schriftgroesse des
   jeweiligen Elements, dadurch liefen die Ueberschriften in Anton deutlich
   breiter als der Fliesstext und begannen weiter links. */
.da-entry > p,
.da-entry > h2,
.da-entry > h3,
.da-entry > h4,
.da-entry > ul,
.da-entry > ol,
.da-entry > blockquote,
.da-entry > figure:not(.wp-block-gallery){
	max-width:800px;
	margin-left:auto;
	margin-right:auto;
}
.da-entry > p{margin-top:0;margin-bottom:1.9em;}   /* groesser als die Zeilenhoehe 1.75 */
.da-entry > h2,
.da-entry > h3{margin-top:1.8em;margin-bottom:.6em;}
.da-entry img{max-width:100%;height:auto;}

/* Galerie: Masonry-Ersatz, abgesichert gegen das Flex-Layout-CSS von WordPress */
.da-entry .wp-block-gallery,
.da-entry .wp-block-gallery.is-layout-flex,
.da-entry .wp-block-gallery.wp-block-gallery-is-layout-flex{
	display:block !important;
	columns:2;
	column-gap:16px;
	margin:34px 0;
}
.da-entry .wp-block-gallery > figure.wp-block-image{
	break-inside:avoid;
	page-break-inside:avoid;
	margin:0 0 16px !important;
	width:100% !important;
	max-width:100% !important;
	display:block !important;
	flex-basis:auto !important;
}
.da-entry .wp-block-gallery > figure.wp-block-image img{
	width:100% !important;height:auto !important;display:block;
}

/* ---------- Trenner und Kategorie ---------- */
.da-divider{
	width:10%;
	margin:30px auto;
	border:0;
	border-top:1px solid #dbdbdb;
}
.da-meta{
	text-align:center;
	text-transform:uppercase;
	font-size:24px;          /* 1.2em */
	line-height:1.4;
}
.da-meta a{text-decoration:none;}

/* ---------- Mehr Lovestories ---------- */
.da-related{
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-bottom:30px;
	padding:0 20px;
	text-align:center;
}
.da-related__title,
/* Kachelstile (.da-grid, .da-item) stehen jetzt in da-global.css,
   damit sie auch auf Seiten mit [da_beitraege] gelten. */

/* ---------- Kommentare ---------- */
.da-comments{
	background:#ededed;
	padding:40px 20px;
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
}
.da-comments__title{
	text-align:center;
	margin:0 0 30px;
}
.da-comments__inner{
	max-width:800px;
	margin:0 auto;
}

/* ---------- Tablet ---------- */
@media (max-width:1024px){
	.da-hero{min-height:650px;align-items:flex-end;}
	.da-hero__inner{margin-top:0;margin-bottom:80px;}
	.da-hero__title{font-size:28px;}   /* 1.4em */
	.da-main{padding:0 30px;}
	.da-card{padding:20px 0;}
	.da-entry{padding:0 20px;}
	.da-related__title{font-size:38px;}
}

/* ---------- Mobil ---------- */
@media (max-width:767px){
	.da-hero{min-height:352px;align-items:flex-start;}
	.da-hero__inner{margin-top:20px;margin-bottom:0;}
	.da-hero__title{font-size:26px;}   /* 1.3em */
	.da-main{padding:0 15px;margin-top:-20px;}
	.da-card{padding:20px 0;}
	.da-entry{padding:0 10px;}
	.da-entry .wp-block-gallery{columns:1;}
	.da-meta{font-size:20px;margin:10px;}
	.da-related__title{font-size:30px;}
}

/* ---------- Ratgeber-Artikel ----------
   Kategorie "Ratgeber": kein Vollbild-Hero, sondern ein ruhiger,
   typografischer Kopf. Der transparente Seitenkopf liegt darueber,
   deshalb oben Platz lassen. */
.da-single--ratgeber .da-kopf{
	max-width:860px;
	margin:0 auto;
	padding:170px 20px 6px;
	text-align:center;
}
.da-kopf__rubrik{
	margin:0 0 16px;
	font-family:'Lora',Georgia,serif;
	font-size:13px;
	letter-spacing:2.5px;
	text-transform:uppercase;
	color:var(--ast-global-color-3, #6a6a6a);
}
.da-kopf__titel{
	margin:0 0 14px;
	font-size:clamp(32px, 4.2vw, 46px);
	line-height:1.12;
	color:var(--ast-global-color-2, #484848);
	text-wrap:balance;
}
.da-kopf__datum{
	margin:0;
	font-size:14px;
	color:var(--ast-global-color-3, #6a6a6a);
}
/* Ohne Hero braucht die Karte keinen Ueberstand */
.da-single--ratgeber .da-main{margin-top:24px;}
/* Bilder duerfen im Ratgeber etwas breiter laufen als der Text */
.da-single--ratgeber .da-entry > figure.da-breit{max-width:1000px;}
.da-single--ratgeber .da-entry > figure.da-breit img{width:100%;border-radius:4px;}
@media (max-width:921px){
	.da-single--ratgeber .da-kopf{padding-top:130px;}
}
@media (max-width:767px){
	.da-single--ratgeber .da-kopf{padding:44px 16px 0;}
	.da-single--ratgeber .da-kopf__titel{font-size:28px;}
	.da-single--ratgeber .da-main{margin-top:14px;}
}

/* Checklisten im Artikel: WordPress setzt Listen-Margin und -Padding
   auf null, dadurch klebte die Liste links und die Punkte ragten aus
   der Box. Hier zurueck in die Lesespalte holen. */
.da-entry > ul.wp-block-list,
.da-entry > ol.wp-block-list{
	max-width:800px;
	margin:0 auto 1.9em;
	padding-left:1.3em;
}
.da-entry > ul.wp-block-list li{margin-bottom:.55em;}
.da-entry > ul.wp-block-list li:last-child{margin-bottom:0;}

/* Autorenzeile unter jedem Beitrag */
.da-autor{
	max-width:800px;
	margin:0 auto 6px;
	text-align:center;
	font-size:15px;
	color:var(--ast-global-color-3, #6a6a6a);
}
.da-autor a{color:var(--ast-global-color-2, #484848);}

/* ---------- Tabellen im Fliesstext ----------
   Astra liefert nur ein Grundgeruest mit Rahmen um jede Zelle. Das
   wirkt wie ein Formular. Hier stattdessen liegende Linien, ruhige
   Kopfzeile und fluchtende Ziffern, damit man Uhrzeiten spaltenweise
   vergleichen kann. */
.da-entry .wp-block-table{
	max-width:800px;
	margin:0 auto 2.4em;
}
.da-entry .wp-block-table table{
	width:100%;
	border-collapse:collapse;
	border:0;
	font-size:16px;
	line-height:1.5;
}
.da-entry .wp-block-table th,
.da-entry .wp-block-table td{
	border:0;
	border-bottom:1px solid #e5e1d8;
	padding:11px 14px;
	text-align:left;
	vertical-align:top;
}
.da-entry .wp-block-table thead th{
	background:#f4f2ee;
	border-bottom:1px solid #d9d4c8;
	font-family:'Anton', Impact, sans-serif;
	font-weight:400;
	font-size:13px;
	letter-spacing:1.4px;
	text-transform:uppercase;
	color:var(--ast-global-color-2, #484848);
}
/* Erste Spalte fuehrt, die Zahlenspalten ordnen sich unter */
.da-entry .wp-block-table tbody td:first-child{
	color:var(--ast-global-color-0, #000);
}
.da-entry .wp-block-table tbody td + td{
	font-variant-numeric:tabular-nums;
	color:var(--ast-global-color-2, #484848);
}
.da-entry .wp-block-table tbody tr:last-child td{border-bottom:0;}
.da-entry .wp-block-table tbody tr:hover td{background:rgba(244,242,238,.55);}
.da-entry .wp-block-table figcaption,
.da-entry .wp-block-table .wp-element-caption{
	margin-top:12px;
	font-size:14px;
	line-height:1.6;
	color:var(--ast-global-color-3, #6a6a6a);
	text-align:left;
}
/* Auf schmalen Schirmen darf die Tabelle wandern, die Seite nicht */
@media (max-width:600px){
	.da-entry .wp-block-table{
		overflow-x:auto;
		-webkit-overflow-scrolling:touch;
	}
	.da-entry .wp-block-table table{min-width:520px;}
	.da-entry .wp-block-table th,
	.da-entry .wp-block-table td{padding:9px 11px;font-size:15px;}
}