/* ==========================================================
   mathias-nolte.de
   Optik 1:1 aus der TYPO3-Version (2016) übernommen,
   Code modernisiert 2026: CSS-Variablen, Flexbox, kein jQuery,
   Mobilansicht unter 980px.
   ========================================================== */

@font-face {
	font-family: "Belleza";
	src: url(../fonts/belleza.woff2) format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--rot:          #a90404;
	--schwarz:      #000;
	--weiss:        #fff;
	--grau:         #c0c0c0;   /* Seitenhintergrund, Metanavi, Footer */
	--grau-dunkel:  #b0b0b0;   /* Kontakt-Klappe */
	--grau-hell:    #eee;      /* Footerschrift */

	--font-text:    Georgia, Times, serif;
	--font-titel:   Belleza, Arial, sans-serif;

	--breite:       960px;
	--rand-links:   37px;      /* Einrückung linke Spalte */
	--rand-rechts:  49px;
}

/* ---------- Basis ---------- */

html { font-size: 62.5%; }          /* 1em = 10px, wie bisher */

body {
	margin: 0;
	padding: 0;
	background-color: var(--grau);
	color: var(--schwarz);
	font-family: var(--font-text);
	font-size: 10px;
}

p, h2, h3 { margin-top: 0; }

img { border: 0; }

main, header, footer, nav, section, article, aside, figure { display: block; }

/* Pfeil-Links im Inhalt */
#maincontent p a,
.buch .single_img p a {
	color: var(--rot);
	padding-left: 10px;
	background: url(../../bilder/pfeil.gif) no-repeat left center;
}

/* E-Mail-Fallback ohne JavaScript: rückwärts notiert, richtig herum angezeigt */
.email-rev { unicode-bidi: bidi-override; direction: rtl; }

/* ---------- Kontakt-Klappe (ersetzt das alte Formular) ---------- */

#folder {
	width: 920px;
	margin: 0 auto;
	padding: 20px;
	background-color: var(--grau-dunkel);
	border-bottom: 1px dotted var(--grau-hell);
	color: var(--weiss);
	overflow: hidden;
}

#folder[hidden] { display: none; }

#folder .closer a {
	display: block;
	margin: 0 0 40px;
	padding: 2px;
	border-bottom: 1px dotted #efefef;
	color: #efefef;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-decoration: none;
}

#folder .kontakt-info {
	font-size: 1.4em;
	line-height: 1.4;
}

#folder .kontakt-info p { margin: 0 0 1em; }

#folder .kontakt-info a {
	color: var(--weiss);
	border-bottom: 1px dotted var(--weiss);
	text-decoration: none;
}

#folder .kontakt-info a:hover { border-bottom-style: solid; }

/* ---------- Rahmen ---------- */

#wrapper {
	position: relative;
	width: var(--breite);
	margin: 12px auto 0;
	background-color: var(--weiss);
}

/* ---------- Metanavigation (Kontakt / Facebook) ---------- */

#metanav {
	width: 312px;
	height: 16px;
	padding: 0 4px 4px;
	background-color: var(--grau);
	color: var(--weiss);
}

#metanav ul {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

#metanav li { margin: 0 8px 0 0; }

#metanav a {
	color: var(--weiss);
	font-size: 1.1em;
	text-decoration: none;
}

/* ---------- Kopf ---------- */

#header {
	display: flex;
	justify-content: space-between;
	height: 126px;
	background-color: var(--weiss);
}

#toptitle {
	box-sizing: border-box;
	width: 320px;
	height: 32px;
	padding: 47px var(--rand-links);
	color: var(--rot);
	font-family: var(--font-titel);
	font-size: 41px;
	font-weight: 300;
	line-height: 41px;
	white-space: nowrap;
}

#toptitle a {
	color: var(--rot);
	text-decoration: none;
}

#navigation {
	width: 640px;
	height: 126px;
	background: url(../../bilder/bgnav.gif) no-repeat left top;
}

/* Hauptmenü */
.nav1 {
	display: flex;
	width: 494px;
	margin: 47px 0 0 146px;
	padding: 0;
	list-style: none;
}

.nav1 a {
	display: block;
	height: 40px;
	margin: 0 20px 3px;
	color: var(--schwarz);
	font-family: var(--font-titel);
	font-size: 1.8em;
	text-decoration: none;
}

.nav1 a:hover {
	margin-bottom: 0;
	border-bottom: 3px solid var(--schwarz);
}

.nav1 .cur a {
	margin-bottom: 0;
	border-bottom: 3px solid var(--rot);
}

/* Untermenü */
.nav2 {
	display: flex;
	width: 640px;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px dotted var(--schwarz);
}

.nav2 a {
	display: block;
	height: 30px;
	margin: 0 15px;
	padding: 14px 0 0;
	border-bottom: 2px solid var(--weiss);
	color: var(--schwarz);
	font-size: 1.3em;
	text-decoration: none;
}

.nav2 a:hover,
.nav2 .cur a {
	border-bottom-color: var(--schwarz);
}

/* ==========================================================
   Inhaltselemente
   ========================================================== */

/* Text mit Bild (früher "csc-textpic") */
.tp { display: flow-root; }
.tp-img { margin: 0 0 10px; }
.tp-img img { display: block; }
.tp-left  .tp-img { float: left;  margin-right: 10px; }
.tp-right .tp-img { float: right; margin-left: 10px; }

figure.tp-img { display: table; }
figure.tp-img figcaption {
	display: table-caption;
	caption-side: bottom;
	text-align: left;
}

/* ---------- Layout "Startseite": schmale Spalte links, breite rechts ---------- */

.startseite {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.startseite .textleft {
	width: 246px;
	padding: 18px 0 28px var(--rand-links);
	font-size: 0.9em;
}

.startseite .bildright {
	width: 592px;
	margin: 18px var(--rand-rechts) 28px 0;
}

.startseite p {
	font-size: 1.4em;
	line-height: 1.35em;
}

.startseite .textleft p { margin-bottom: 1.8em; }

.startseite h1 {
	margin: 0 0 1.2em;
	font-size: 2.2em;
	font-weight: normal;
	line-height: 1.5em;
}

.startseite h2 {
	margin: 0 0 10px;
	font-size: 2.2em;
	font-weight: normal;
	line-height: 100%;
}

.startseite .textleft h2 a {
	color: var(--rot);
	font-size: 0.8em;
	line-height: 1.1em;
	text-decoration: none;
}

.startseite .bildright .tp-left .tp-img { margin-right: 20px; }
.startseite .bildright i { color: var(--rot); }

.video_block { margin: 0 0 20px; }
.video_block iframe { display: inline-block; border: 0; vertical-align: baseline; }

/* YouTube erst nach Klick laden (Zwei-Klick-Lösung) */
.yt {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	width: 560px;
	min-height: 315px;
	padding: 30px 40px;
	background-color: #eee;
	border: 1px dotted var(--grau);
}
.yt.geladen { display: block; padding: 0; border: 0; background: none; min-height: 0; }
.yt-hinweis p { font-size: 1.3em; line-height: 1.4em; }
.yt-hinweis .yt-titel { font-size: 1.6em; color: var(--rot); }
#maincontent .yt-hinweis p a { color: var(--schwarz); padding-left: 0; background: none; }
.yt-laden {
	margin: 0 16px 8px 0;
	padding: 6px 14px;
	background-color: var(--weiss);
	border: 1px solid #a0a0a0;
	color: var(--schwarz);
	font: inherit;
	cursor: pointer;
}
.yt-laden:hover, .yt-laden:focus-visible { border-color: var(--rot); color: var(--rot); }
.yt-immer { white-space: nowrap; cursor: pointer; }
.yt-immer input { vertical-align: -2px; margin: 0 4px 0 0; }

.einwilligung-status { font-style: italic; }

/* ---------- Layout "Autor" / Textseiten (Kontakt, Impressum …) ---------- */

.autor {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.autor .bildright {
	width: 246px;
	padding: 28px 0 28px var(--rand-links);
	text-align: center;
}

.autor .textleft {
	width: 546px;
	margin: 28px var(--rand-rechts) 28px 43px;
}

.autor .textleft p {
	padding-right: 10px;
	font-size: 1.4em;
	line-height: 1.35em;
}

.autor .textleft h1 {
	margin: 0 0 1.2em;
	font-size: 1.7em;
	font-weight: normal;
	line-height: 1.2em;
}

/* ---------- Layout "Buch": Cover | Text | Extras ---------- */

.buch {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.buch .single_img {
	width: 246px;
	padding: 28px 0 28px var(--rand-links);
	font-size: 1.2em;
	line-height: 1.4em;
}

.buch .cover { margin-bottom: 10px; }
.buch .cover img { display: block; margin: 0 auto; }

.buch .single_main {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 586px;
	margin: 28px var(--rand-rechts) 28px 3px;
}

.buch .single_info {
	width: 378px;
	padding: 0 28px 0 0;
	border-right: 1px solid var(--grau);
	font-size: 1.4em;
	line-height: 1.3em;
}

.buch .single_extras {
	width: 120px;
	font-size: 1.2em;
	line-height: 1.4em;
}

.single_extras .extra-bild { margin-bottom: 10px; }
.single_extras img {
	display: block;
	width: 100%;
	height: auto;
}

.buch ul {
	color: var(--rot);
	list-style: none;
}

.buch ul li { margin: 5px 0; }
.buch .single_info ul li a { color: var(--rot); }

/* ---------- Footer ---------- */

.footertext {
	margin: 20px 0;
	padding: 20px var(--rand-rechts) 45px 0;
	background-color: var(--grau);
	color: var(--grau-hell);
	font-size: 1.3em;
	text-align: right;
}

.footertext a {
	color: var(--grau-hell);
	text-decoration: none;
}

.footertext .trenner { margin: 0 0.6em; }


/* ==========================================================
   Mobilansicht (unter 980px)
   Die Desktop-Ansicht bleibt davon unberührt.
   ========================================================== */

@media (max-width: 979px) {

	:root {
		--rand-links:  20px;
		--rand-rechts: 20px;
	}

	#folder { width: auto; }
	#folder .closer a { margin-bottom: 20px; }

	#wrapper {
		width: auto;
		margin: 0;
	}

	#metanav {
		width: auto;
		height: auto;
		padding: 4px var(--rand-links);
	}

	#metanav ul { flex-wrap: wrap; gap: 0 14px; }
	#metanav li { margin: 0; }
	#metanav a { font-size: 1.3em; line-height: 1.8; }

	#header {
		display: block;
		height: auto;
	}

	#toptitle {
		width: auto;
		height: auto;
		padding: 28px var(--rand-links) 18px;
		font-size: 36px;
		line-height: 1;
	}

	#navigation {
		width: auto;
		height: auto;
		background: none;
	}

	.nav1 {
		width: auto;
		margin: 0;
		padding: 0 var(--rand-links);
		border-bottom: 1px solid var(--grau);
	}

	.nav1 a {
		height: auto;
		margin: 0 28px 0 0;
		padding: 8px 0 7px;
		border-bottom: 3px solid transparent;
		font-size: 2em;
	}

	.nav1 a:hover { border-bottom-color: var(--schwarz); }
	.nav1 .cur a  { border-bottom-color: var(--rot); }

	.nav2 {
		width: auto;
		flex-wrap: wrap;
		padding: 0 var(--rand-links);
		gap: 0 20px;
	}

	.nav2:not(:has(li)) { display: none; }

	.nav2 a {
		height: auto;
		margin: 0;
		padding: 12px 0 6px;
		font-size: 1.4em;
	}

	/* Spalten untereinander */
	.startseite,
	.autor,
	.buch,
	.buch .single_main {
		display: block;
		width: auto;
	}

	.startseite .textleft,
	.startseite .bildright,
	.autor .bildright,
	.autor .textleft,
	.buch .single_img,
	.buch .single_info,
	.buch .single_extras {
		width: auto;
		margin: 0;
		padding: 24px var(--rand-links) 0;
		border: 0;
	}

	.startseite .textleft { font-size: 1em; border-bottom: 1px dotted var(--grau); padding-bottom: 8px; }
	.startseite .textleft p { margin-bottom: 1.4em; }
	.startseite p,
	.autor .textleft p,
	.buch .single_info { font-size: 1.6em; line-height: 1.45em; }
	.buch .single_img,
	.buch .single_extras { font-size: 1.4em; }
	.autor .bildright:empty { display: none; }

	.buch .single_main { margin: 0; }
	.buch .single_img { text-align: left; }
	.buch .cover img { margin: 0; max-width: 60%; height: auto; }

	.buch .single_extras { border-top: 1px dotted var(--grau); margin-top: 24px; }
	.buch .single_extras:empty { display: none; }
	.single_extras .extra-bild { max-width: 240px; }

	.startseite .bildright .tp-right .tp-img { float: none; margin: 0 0 16px; }
	figure.tp-img img { max-width: 100%; height: auto; }

	.yt { width: 100%; min-height: 0; aspect-ratio: auto; padding: 20px; }
	.yt-immer { white-space: normal; }
	.video_block iframe {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}

	.footertext {
		margin-bottom: 0;
		padding: 20px var(--rand-links) 30px;
		text-align: left;
		line-height: 2;
	}
	.footertext {
		display: flex;
		flex-wrap: wrap;
		gap: 0 1.2em;
	}
	.footertext .trenner { display: none; }

	.video_block h3 { font-size: 1.4em; line-height: 1.3; }
	.startseite .bildright .tp-left .tp-img img { width: 80px; height: auto; }
}