/* Püppis Hus – Kindtemplate von Cassiopeia. Nachbau des bisherigen Designs (YOOtheme „minimal", boxed). */

@font-face { font-family: "Lato"; src: url("../fonts/lato-regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-display-regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Arizonia"; src: url("../fonts/arizonia-regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
	--tm-bg: #efefef;
	--tm-box: #fff;
	--tm-text: #6c6d74;
	--tm-heading: #2d2e33;
	--tm-muted: #b4b5ba;
	--tm-border: #e5e5e7;
	--tm-soft: #f7f7f7;
	--tm-dark: #242427;
	--tm-hover: #09090a;
	--tm-font: "Lato", "Helvetica Neue", Arial, sans-serif;
	--tm-font-heading: "Playfair Display", Georgia, serif;
	--tm-font-nav: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	--tm-font-logo: "Arizonia", "Brush Script MT", cursive;
	--tm-navbar-height: 80px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
	font-family: var(--tm-font);
	font-size: 16px;
	line-height: 1.625;
	color: var(--tm-text);
	background: var(--tm-bg);
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body { margin: 0; background: var(--tm-bg); }
body.tm-offcanvas-open { overflow: hidden; }

/* ---------- Seitengerüst ---------- */

@media (min-width: 1200px) {
	.tm-page { padding: 70px 0; }
}

.tm-box { max-width: 1200px; margin: 0 auto; background: var(--tm-box); }

.tm-container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
@media (min-width: 640px) { .tm-container { padding: 0 30px; } }
@media (min-width: 960px) { .tm-container { padding: 0 40px; } }

.tm-main { padding: 40px 0; }
@media (min-width: 960px) { .tm-main { padding: 70px 0; } }

.tm-footer { padding: 0 0 40px; }
@media (min-width: 960px) { .tm-footer { padding: 0 0 70px; } }

.tm-skip { position: absolute; left: -9999px; top: 0; z-index: 1100; padding: 10px 15px; background: var(--tm-dark); color: #fff; }
.tm-skip:focus { left: 10px; top: 10px; }
.tm-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Typografie ---------- */

a { color: var(--tm-heading); text-decoration: none; }
a:hover { color: var(--tm-hover); text-decoration: underline; }

p, ul, ol, dl, pre, address, fieldset, figure, table { margin: 0 0 20px; }
* + p, * + ul, * + ol, * + dl, * + pre, * + address, * + fieldset, * + figure { margin-top: 20px; }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 20px;
	font-family: var(--tm-font-heading);
	font-weight: 400;
	color: var(--tm-heading);
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.3;
}
* + h1, * + h2, * + h3, * + h4, * + h5, * + h6 { margin-top: 40px; }
h1 { font-size: 35px; line-height: 1.2; }
h2 { font-size: 26px; }
h3 { font-size: 20px; }
h4 { font-size: 16px; }
h5, h6 { font-size: 12px; }
@media (max-width: 639px) {
	h1 { font-size: 30px; }
	h2 { font-size: 23px; }
}

img, video, iframe { max-width: 100%; }
img { height: auto; vertical-align: middle; border: 0; }
hr { margin: 20px 0; border: 0; border-top: 1px solid var(--tm-border); }
b, strong { font-weight: 700; }

/* ---------- Navigation ---------- */

.tm-navbar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tm-navbar-height);
	padding: 0 60px;
	background: #fff;
}

@supports (position: sticky) {
	.tm-header { position: sticky; top: 0; z-index: 980; }
}
.tm-header.is-stuck .tm-navbar { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); }

.tm-nav { display: flex; align-items: center; justify-content: center; }

.tm-nav-list { display: none; margin: 0; padding: 0; list-style: none; }

.tm-nav-list a {
	display: flex;
	align-items: center;
	height: var(--tm-navbar-height);
	padding: 0 15px;
	font-family: var(--tm-font-nav);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--tm-muted);
	text-decoration: none;
	transition: color 0.1s ease-in-out;
}
.tm-nav-list a:hover, .tm-nav-list a:focus-visible { color: var(--tm-text); text-decoration: none; }
.tm-nav-list .is-active > a { color: var(--tm-heading); }

.tm-logo {
	display: flex;
	align-items: center;
	height: var(--tm-navbar-height);
	padding: 0 15px;
	font-family: var(--tm-font-logo);
	font-size: 28px;
	line-height: 1;
	color: var(--tm-text);
	white-space: nowrap;
	text-decoration: none;
}
.tm-logo:hover, .tm-logo:focus { color: var(--tm-text); text-decoration: none; }

.tm-toggle {
	position: absolute;
	top: 50%;
	left: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--tm-text);
	cursor: pointer;
}
.tm-toggle-icon, .tm-toggle-icon::before, .tm-toggle-icon::after {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	content: "";
}
.tm-toggle-icon { position: relative; }
.tm-toggle-icon::before { position: absolute; top: -6px; }
.tm-toggle-icon::after { position: absolute; top: 6px; }
.tm-toggle:hover { color: var(--tm-heading); }

@media (min-width: 960px) {
	.tm-navbar { padding: 0 15px; }
	.tm-nav-list { display: flex; }
	.tm-toggle { display: none; }
}

/* ---------- Offcanvas (mobil) ---------- */

.tm-offcanvas { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0); transition: background-color 0.3s ease-out; }
.tm-offcanvas[hidden] { display: none; }
.tm-offcanvas.is-open { background: rgba(0, 0, 0, 0.1); }

.tm-offcanvas-bar {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 270px;
	max-width: 85vw;
	padding: 20px;
	overflow-y: auto;
	background: var(--tm-dark);
	transform: translateX(-100%);
	transition: transform 0.3s ease-out;
}
.tm-offcanvas.is-open .tm-offcanvas-bar { transform: none; }

.tm-offcanvas-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 30px;
	line-height: 1;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
}
.tm-offcanvas-close:hover { color: #fff; }

.tm-offcanvas-nav { margin: 50px 0 0; padding: 0; list-style: none; }
.tm-offcanvas-nav a { display: block; padding: 8px 0; color: rgba(255, 255, 255, 0.55); text-decoration: none; }
.tm-offcanvas-nav a:hover, .tm-offcanvas-nav a:focus-visible { color: rgba(255, 255, 255, 0.9); text-decoration: none; }
.tm-offcanvas-nav .is-active > a { color: #fff; }

@media (prefers-reduced-motion: reduce) {
	.tm-offcanvas, .tm-offcanvas-bar, .tm-nav-list a { transition: none; }
}

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

.tm-subnav { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; }
.tm-subnav li { display: flex; align-items: center; }
.tm-subnav li + li::before { content: ""; height: 1em; margin: 0 20px; border-left: 1px solid var(--tm-border); }
.tm-subnav a {
	font-family: var(--tm-font-nav);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--tm-muted);
}
.tm-subnav a:hover, .tm-subnav .is-active > a { color: var(--tm-heading); text-decoration: none; }

/* ---------- Joomla-Inhalte ---------- */

.item-page > .page-header h1, .item-page > .page-header h2 { margin-top: 0; font-size: 35px; line-height: 1.2; }
.item-page > .page-header + * { margin-top: 0; }
.com-content-article__body > :first-child { margin-top: 0; }

.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; border-spacing: 0; }
.table th, .table td { padding: 16px 12px; vertical-align: top; text-align: left; }
.table thead th { vertical-align: bottom; border-bottom: 1px solid var(--tm-border); }
.table thead th h5 { margin: 0; }
.table tbody th { font-weight: 400; color: var(--tm-text); }
.table-striped tbody tr:nth-of-type(odd) { background: var(--tm-soft); }

/* Kontaktseite */
.pueppis-hero { margin: 0 0 40px; }
.pueppis-hero img { display: block; width: 100%; }
.pueppis-grid-2 { display: grid; gap: 40px; }
.pueppis-grid-2 > div > :first-child { margin-top: 0; }
@media (min-width: 960px) { .pueppis-grid-2 { grid-template-columns: 1fr 1fr; } }

/* Belegungskalender traum-ferienwohnungen.de (war bisher im Template-Kopf) */
.traumfewo-calendar { bottom: -33px !important; }

/* Systemmeldungen */
#system-message-container { margin-bottom: 20px; }
#system-message-container joomla-alert { display: block; padding: 15px 20px; border: 1px solid var(--tm-border); background: var(--tm-soft); }