/* Praxis für Naturheilkunde Ursula Bünnagel — Template „buennagel“ (Joomla 6, Kind von Cassiopeia).
   Ein Template für Desktop und Handy. Vorlage: die beiden Joomla-3-Templates der Seite bis 2026
     Teil 1  gemeinsam            (Schrift, Links, Überschriften wie buennagel/css/template.css)
     Teil 2  Desktop ab 920 px    (buennagel: 920 px breit, Logo + Menü oben, linke Spalte, Fußzeile 4-spaltig)
     Teil 3  Handy unter 920 px   (buennagelmobile: breites Logo, Menü zum Aufklappen, Inhalt, Fußzeile untereinander;
                                   Schrift ≥ 16 px, Tippflächen ≥ 44 px, kein Querrollen)
   Schrift: Open Sans lokal (OFL, fonts/OFL.txt) — dieselbe Datei, die Google für die alte Seite auslieferte. */

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url(fonts/open-sans-latin-var.woff2) format('woff2');
}

/* ---------------------------------------------------------------- Teil 1: gemeinsam */

html { height: 100%; }

#komplett {
	margin: 0;
	padding: 0;
	color: #000;
	font-family: 'Open Sans', sans-serif;
}

a:link, a:visited { color: #0088b5; text-decoration: none; }
a:hover { color: #0088b5; text-decoration: underline; }

img { border: 0; }
table { border-collapse: collapse; }   /* alt: layout.css beider Templates */
strong { font-weight: 600; }

h1 {
	color: #0088b5;
	text-decoration: none;
	text-transform: uppercase;
	border-bottom: 1px solid #0088b5;
}

h2 { font-size: 125%; color: #0088b5; font-weight: bold; text-decoration: none; margin: 15px 0 3px 0; }
h3 { font-size: 110%; font-weight: bold; color: #0088b5; margin: 15px 0 3px 0; }
h4 { font-size: 100%; font-weight: bold; color: #0088b5; margin: 8px 0 3px 0; }
h5 { font-size: 100%; font-weight: bold; margin: 8px 0 3px 0; }

#content p { margin: 0 0 20px 0; padding: 0; }

.left { float: left; margin-right: 25px; margin-bottom: 15px; }
.right { float: right; margin-left: 25px; margin-bottom: 15px; }

/* Joomla 6: Text nur für Screenreader; Blätter-Leiste „Weiter/Zurück“ wie Joomla 3 (ohne Bootstrap) */
.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.pagenavigation { margin: 25px 0 0 0; padding: 2px; }    /* alt: ul.pager.pagenav > li (inline-block) > a */
.pagenavigation .pagination { display: inline-block; margin: 0; padding: 0; }
.pagenavigation a { padding: 1px 4px; }

/* Knöpfe im Text („Zur Traumatherapie >>>“ — kleine Formulare mit <button class="button">) wie alt */
.button {
	background-color: #0088b5;
	border-radius: 8px;
	border: none;
	color: white;
	padding: 15px 28px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-family: arial;              /* alt: button.button { font-family: arial; font-weight: bold; line-height: 1.2em } */
	font-weight: bold;
	line-height: 1.2em;
	font-size: 14px;
	cursor: pointer;
}
.button:hover { background-color: white; color: #0088b5; }

/* eingebettete Inhalte fremder Server erscheinen als Link (ausgabe.php) */
a.extern::before { content: "↗ "; }

/* Meldungen (ausgabe.php) */
#system-message-container .alert {
	margin: 0 0 20px 0;
	padding: 7px 15px;
	color: #93246f;
	background: #f0e0eb;
	border-top: 2px solid #93246f;
	border-bottom: 2px solid #93246f;
	font-weight: bold;
}

/* ---------------------------------------------------------------- Teil 2: Desktop (ab 920 px) */

@media (min-width: 920px) {
	html { padding-bottom: 1px; }      /* alt: immer ein Rollbalken, kein Springen zwischen kurzen und langen Seiten */
	#komplett { background-color: #ffd9bd; font-size: 13px; }

	#wrapper_01 { width: 920px; margin: 0 auto; }

	#kopf { position: relative; height: 80px; }

	#topleft {
		position: absolute;
		top: 0;
		left: 0;
		width: 228px;
		height: 80px;
		background: #fff url(../images/logo.png) 0 0 no-repeat;
	}

	#topright {
		position: relative;
		left: 227px;
		width: 692px;
		height: 80px;
		background: url(../images/header.png) 0 0 no-repeat;
	}

	#topnavleft { float: left; margin: 30px 0 0 30px; padding: 0; }

	#topnavleft ul.menu {
		margin: 0;
		padding: 0;
		text-transform: uppercase;
		font-size: 14px;
	}

	#topnavleft ul.menu li { list-style: none; display: inline; margin: 0 18px 0 0; padding: 0 0 7px 0; }
	#topnavleft ul.menu li a { color: #fff; text-decoration: none; font-weight: bold; }
	#topnavleft ul.menu li a:hover,
	#topnavleft ul.menu li.active { color: #fff; padding: 0 0 7px 0; border-bottom: 1px solid #fff; }

	.handylogo, .handymenue { display: none; }

	#content-wrapper {
		display: flow-root;
		width: 920px;
		min-height: 300px;
		background: url(../images/hg_content-wrapper.png) repeat-y 0 0;
	}

	#left { float: left; width: 228px; }

	#content {
		float: right;
		padding: 30px;
		width: 632px;
		min-height: 600px;
		line-height: 160%;
	}

	h1 {
		font-size: 36px;
		font-weight: lighter;
		letter-spacing: 0.1em;
		line-height: 1.3;
		margin: 0 0 15px 0;
		padding: 0 0 20px 0;
	}

	ul.menu_left { margin: 0 0 0 15px; padding: 0; }
	ul.menu_left li {
		list-style: none;
		margin: 25px 0 0 0;
		padding: 0;
		text-transform: uppercase;
		font-size: 13px;
		font-weight: bold;
		line-height: 185%;
	}
	ul.menu_left li a { color: #fff; text-decoration: none; }
	ul.menu_left li a:hover,
	ul.menu_left li.current li a:hover,
	ul.menu_left li.current a { color: #ff9e55; }
	ul.menu_left li.current li a { color: #fff; }
	ul.menu_left li ul li { margin: 0; padding: 0; }
	ul.menu_left li ul.nav-child { margin: 0; padding: 0; }
	ul.menu_left li ul.nav-child li { text-transform: none; }
	ul.menu_left li ul li ul li { margin: 0; padding: 0 0 0 15px; }

	#footer {
		display: flow-root;
		width: 882px;
		height: 102px;
		padding: 0 0 0 38px;
		background: #ff9e55;
	}

	#footer .moduletable {
		float: left;
		width: 190px;
		height: 90px;
		padding: 12px 27px 0 0;
		color: #fff;
		font-size: 12px;
		font-weight: bold;
	}

	#footer .moduletable h2,
	#footer .moduletable h3 {
		text-transform: uppercase;
		color: #fff;
		letter-spacing: 0.1em;
		font-size: 13px;
		font-weight: bold;
		margin: 0;
		padding: 0;
	}

	#footer a:link, #footer a:visited { color: #fff; }
	#footer a:hover, #footer a:active { color: #e1e1e1; }
}

/* ---------------------------------------------------------------- Teil 3: Handy (unter 920 px) */

@media (max-width: 919.98px) {
	#komplett { background: #daf6ff; font-size: 16px; line-height: 1.5; }

	#topleft, #topright, #left { display: none; }

	.handylogo { display: block; background: #fff; }
	.handylogo img { display: block; width: 100%; max-width: 650px; height: auto; }

	/* Menü zum Aufklappen: <details>, ohne JavaScript bedienbar */
	.handymenue { background: #ff9e55; }
	.handymenue summary {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: 0 15px;
		color: #fff;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		cursor: pointer;
		list-style: none;
	}
	.handymenue summary::-webkit-details-marker { display: none; }
	.handymenue summary::before { content: "☰"; margin-right: 10px; font-size: 20px; }
	.handymenue[open] summary::before { content: "✕"; }
	.handymenue ul { margin: 0; padding: 0; list-style: none; }
	.handymenue li a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 0 15px;
		color: #fff;
		border-top: 1px solid rgba(255, 255, 255, 0.4);
	}
	.handymenue li li a { padding-left: 35px; }
	.handymenue li li li a { padding-left: 55px; }
	.handymenue li.current > a { background: #fa7c1b; }

	#content-wrapper { padding: 0 15px 15px 15px; }
	#content { overflow-wrap: break-word; }
	#content img { max-width: 100%; height: auto; }
	#content iframe, #content table { max-width: 100%; }
	.left, .right { float: none; display: block; margin: 0 0 15px 0; }

	h1 {
		font-size: 21px;                 /* alt: 150 % von 14 px */
		font-weight: normal;
		letter-spacing: 0.3em;
		line-height: 1.5;
		margin: 10px 0 15px 0;
		padding: 0;
		overflow-wrap: anywhere;
	}
	h2, h3 { line-height: 1.4; }

	/* kleine Schriftgrößen aus dem Text (Editor-Angaben) am Handy auf 16 px */
	#content [style*="font-size: 6pt"], #content [style*="font-size: 8pt"], #content [style*="font-size: 9pt"],
	#content [style*="font-size: 10pt"], #content [style*="font-size: 11pt"], #content [style*="font-size: 10px"],
	#content [style*="font-size: 11px"], #content [style*="font-size: 12px"], #content [style*="font-size: 13px"],
	#content [style*="font-size: 14px"], #content [style*="font-size: 15px"], #content [style*="font-size: small"],
	#content [style*="font-size: x-small"] { font-size: 16px !important; line-height: 1.4 !important; }

	/* Jameda-Kasten (feste 272 × 168 px mit absolut gesetzten Zeilen): am Handy als Fließtext */
	#content [id^="jameda-widget-container"],
	#content [id^="jameda-widget-container"] > div {
		position: static !important;
		width: auto !important;
		height: auto !important;
		overflow: visible !important;
	}

	.pagenavigation .pagination { text-align: center; }
	.pagenavigation a { display: inline-flex; align-items: center; min-height: 44px; }

	/* Tabellen im Text sind Gestaltungstabellen (Fotos mit Unterschrift, Kästen, Sprechzeiten) mit festen Breiten
	   bis 570 px: am Handy untereinander statt nebeneinander — kein Querrollen (alt: Querrollen auf „Praxis“) */
	#content table, #content tbody, #content tr, #content td, #content th {
		display: block;
		width: auto !important;
		height: auto !important;
	}
	.button { font-size: 16px; }

	#footer { background: #ff9e55; padding: 15px 15px 15px 15px; }
	#footer .moduletable { color: #fff; font-size: 16px; font-weight: bold; padding: 10px 0 3px 0; }
	#footer .moduletable h2,
	#footer .moduletable h3 {
		text-transform: uppercase;
		color: #fff;
		letter-spacing: 0.1em;
		font-size: 16px;
		font-weight: bold;
		margin: 0;
		padding: 0;
	}
	#footer a:link, #footer a:visited { color: #fff; display: inline-flex; align-items: center; min-height: 44px; }
	#footer a:hover, #footer a:active { color: #e1e1e1; }
}