/*
Theme Name: Kneipp
Theme URI: http://lehrer.cc
Author: Thomas Lehrer
Author URI: http://lehrer.cc
Description: Theme für die Österreichische Gesellschaft für Kneippmedizin. Version 2.1: mobile-first, responsive, ohne jQuery, barriereärmer. Basiert ursprünglich auf HTML5 Blank.
Version: 2.3.2
Requires at least: 6.6
Requires PHP: 7.4
License: MIT
License URI: http://opensource.org/licenses/mit-license.php
Text Domain: kneipp
Tags: responsive-layout, custom-logo, custom-menu, featured-images, translation-ready
*/

/*------------------------------------*\
    CONTENTS
    1. Fonts & design tokens
    2. Reset / base
    3. Accessibility helpers
    4. Page background
    5. Layout (mobile first)
    6. Header, logo, TEM line
    7. Navigation
    8. Home page
    9. Content panel & typography
   10. Five pillars (Fünf Säulen)
   11. Lists, forms, comments, pagination
   12. Footer
   13. WordPress core classes
   14. Desktop layout (min-width: 60em)
   15. Motion & print
\*------------------------------------*/


/*------------------------------------*\
    1. FONTS & DESIGN TOKENS
\*------------------------------------*/

/* Source Sans 3 – self-hosted (no Google request, GDPR friendly). SIL OFL, see fonts/OFL.txt */
@font-face {
	font-family: "Source Sans 3";
	src: url("fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Source Sans 3";
	src: url("fonts/source-sans-3-latin-wght-italic.woff2") format("woff2");
	font-weight: 200 900;
	font-style: italic;
	font-display: swap;
}

:root {
	/* Brand colours (from the original theme) */
	--kneipp-blue: #007cc1;
	--kneipp-blue-dark: #00639a;
	--kneipp-navy: #263d4e;
	--kneipp-text: #222;
	--kneipp-white: #fff;
	--kneipp-blue-tint: rgba(0, 124, 193, 0.12);

	/* Surfaces */
	--panel-bg: rgba(255, 255, 255, 0.97);
	--card-bg: rgba(255, 255, 255, 0.97);

	/* Typography */
	--font-sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
	--step--1: 0.875rem;
	--step-0: 1.0625rem;
	--step-1: clamp(1.2rem, 1.1rem + 0.4vw, 1.35rem);
	--step-2: clamp(1.45rem, 1.25rem + 0.9vw, 1.75rem);
	--step-3: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);

	/* Spacing & shape */
	--space-xs: 0.5rem;
	--space-s: 1rem;
	--space-m: 1.5rem;
	--space-l: 2.5rem;
	--radius: 6px;
	--sidebar-width: 15rem;
	--content-max: 48rem;
	--site-max: 1100px;
	--focus-ring: 0 0 0 3px var(--kneipp-white), 0 0 0 6px var(--kneipp-blue);
}


/*------------------------------------*\
    2. RESET / BASE
\*------------------------------------*/

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 1rem;
}

body {
	isolation: isolate;
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	background: #8fb98a; /* shown while the photo loads */
	color: var(--kneipp-text);
	font-family: var(--font-sans);
	font-size: var(--step-0);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

img,
svg,
video,
iframe {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

h1,
h2,
h3,
h4 {
	line-height: 1.2;
	font-weight: 400;
	color: var(--kneipp-blue);
	margin: 1.5em 0 0.5em;
	text-wrap: balance;
}
h1 { font-size: var(--step-3); margin-top: 0; }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); font-weight: 600; color: inherit; }

p,
ul,
ol,
blockquote,
table,
figure {
	margin: 0 0 1em;
}

a {
	color: var(--kneipp-blue-dark);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}
a:hover {
	color: var(--kneipp-navy);
	text-decoration-thickness: 2px;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

::selection {
	background: var(--kneipp-blue);
	color: var(--kneipp-white);
}


/*------------------------------------*\
    3. ACCESSIBILITY HELPERS
\*------------------------------------*/

/* Visible keyboard focus everywhere (the old theme removed it) */
:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: 2px;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 1000;
	padding: 0.75rem 1.25rem;
	background: var(--kneipp-white);
	color: var(--kneipp-blue-dark);
	font-weight: 700;
	text-decoration: none;
}

.site-main:focus {
	outline: none;
}


/*------------------------------------*\
    4. PAGE BACKGROUND
    Replaces jQuery Anystretch: a fixed <img> with object-fit
\*------------------------------------*/

.page-bg {
	position: fixed;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}

.page-bg__img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

/* White band at the top of the page (replaces img/topLine.png) */
body::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 220px;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		#fff 0,
		#fff 95px,
		rgba(255, 255, 255, 0.6) 175px,
		rgba(255, 255, 255, 0) 220px
	);
}


/*------------------------------------*\
    5. LAYOUT (MOBILE FIRST)
\*------------------------------------*/

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.site-main {
	flex: 1 0 auto;
	width: 100%;
	padding: var(--space-m) var(--space-s) var(--space-l);
}


/*------------------------------------*\
    6. HEADER, LOGO, TEM LINE
\*------------------------------------*/

/* On phones the header is a white panel at the top */
.site-header {
	background: var(--kneipp-white);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
	position: relative;
	z-index: 10;
}

.site-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s);
	padding: 0.75rem var(--space-s) 0.25rem;
}

.site-logo {
	display: block;
	flex: 0 1 auto;
	line-height: 0;
}
.site-logo__img {
	width: auto;
	height: auto;
	max-height: 3.25rem;
}

.tem-line {
	margin: 0;
	padding: 0 var(--space-s) 0.75rem;
	line-height: 0;
}
.tem-line img {
	width: 11rem;
	/* The TEM graphic is white; on light surfaces show it in near-black (old temschwarz.png) */
	filter: brightness(0);
	opacity: 0.8;
}

/* Menu button (phones/tablets only) */
.menu-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.5rem 0.9rem;
	border: 2px solid var(--kneipp-blue);
	border-radius: var(--radius);
	background: var(--kneipp-white);
	color: var(--kneipp-blue-dark);
	font-weight: 600;
	cursor: pointer;
	flex: none;
}
.menu-toggle:hover {
	background: var(--kneipp-blue-tint);
}

.menu-toggle__icon,
.menu-toggle__icon::before,
.menu-toggle__icon::after {
	display: block;
	width: 1.25rem;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	transition: transform 0.2s ease, background-color 0.2s ease;
}
.menu-toggle__icon {
	position: relative;
}
.menu-toggle__icon::before,
.menu-toggle__icon::after {
	content: "";
	position: absolute;
	left: 0;
}
.menu-toggle__icon::before { top: -6px; }
.menu-toggle__icon::after { top: 6px; }

.is-open .menu-toggle__icon {
	background: transparent;
}
.is-open .menu-toggle__icon::before { transform: translateY(6px) rotate(45deg); }
.is-open .menu-toggle__icon::after { transform: translateY(-6px) rotate(-45deg); }

/* Without successfully initialised JavaScript, hide the button; keep the menu visible */
.no-js .menu-toggle {
	display: none;
}


/*------------------------------------*\
    7. NAVIGATION
\*------------------------------------*/

.site-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav {
	--nav-color: var(--kneipp-text);
	--nav-current: var(--kneipp-blue-dark);
	--wave-color: var(--kneipp-blue);
	padding: 0 var(--space-s) var(--space-s);
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Collapsed on phones until the menu button is pressed (not on the home page) */
@media (max-width: 59.99em) {
	.js body:not(.layout-home) .site-header:not(.is-open) .site-nav {
		display: none;
	}
}

.site-nav li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.site-nav a {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	padding: 0.25rem 0;
	color: var(--nav-color);
	font-weight: 600;
	text-decoration: none;
}
.site-nav a:hover,
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a {
	color: var(--nav-current);
}
.site-nav a:hover {
	text-decoration: underline;
}

/* The Kneipp "wave" in front of top-level items – one PNG, coloured via CSS mask */
.site-nav > ul > li > a::before {
	content: "";
	flex: none;
	width: 2.75rem;
	height: 1.375rem;
	background-color: var(--wave-color);
	-webkit-mask: url("img/wave.png") no-repeat center / contain;
	mask: url("img/wave.png") no-repeat center / contain;
}

/* Sub menus */
.site-nav .sub-menu,
.site-nav .children {
	flex-basis: 100%;
	padding: 0 0 0.5rem 3.35rem;
}
.site-nav .sub-menu a,
.site-nav .children a {
	font-weight: 400;
	min-height: 40px;
}

/* No JS: show only the current branch (as in the old theme) */
.no-js .site-nav li:not(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_item, .current_page_ancestor) > :is(.sub-menu, .children) {
	display: none;
}
/* With JS: controlled by the toggle buttons */
.js .site-nav :is(.sub-menu, .children) {
	display: none;
}
.js .site-nav .is-open > :is(.sub-menu, .children) {
	display: block;
}

.submenu-toggle {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	background: transparent;
	color: var(--nav-color);
	cursor: pointer;
}
.submenu-toggle:hover {
	background: var(--kneipp-blue-tint);
}
.submenu-toggle::before {
	content: "";
	width: 0.55rem;
	height: 0.55rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-25%) rotate(45deg);
	transition: transform 0.2s ease;
}
.is-open > .submenu-toggle::before {
	transform: translateY(25%) rotate(-135deg);
}


/*------------------------------------*\
    8. HOME PAGE (template "Kneipp Startseite")
\*------------------------------------*/

.layout-home .site {
	max-width: 44rem;
	margin-inline: auto;
}

.layout-home .site-header {
	background: none;
	box-shadow: none;
}

.layout-home .site-header__bar {
	justify-content: center;
	padding: clamp(1.25rem, 5vw, 2.5rem) var(--space-s) 0;
}

.layout-home .site-logo__img {
	width: min(419px, 88vw);
	max-height: none;
}

.layout-home .tem-line {
	text-align: center;
	padding: clamp(3.5rem, 12vw, 4.5rem) var(--space-s) 0;
}
.layout-home .tem-line img {
	width: min(308px, 70vw);
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
	opacity: 1;
}

/* Main menu as big white "wave" buttons */
.layout-home .site-nav {
	--nav-color: var(--kneipp-white);
	--nav-current: var(--kneipp-white);
	--wave-color: rgba(255, 255, 255, 0.8);
	border: 0;
	padding: clamp(1.5rem, 6vw, 3.5rem) var(--space-s) var(--space-l);
	max-width: 34rem;
	margin-inline: auto;
}

.layout-home .site-nav a {
	gap: clamp(0.75rem, 3vw, 1.25rem);
	min-height: clamp(3.5rem, 12vw, 5.3rem);
	font-size: clamp(1.25rem, 0.9rem + 1.8vw, 1.7rem);
	font-weight: 700;
	line-height: 1.15;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.layout-home .site-nav > ul > li > a::before {
	width: clamp(5.5rem, 22vw, 10rem);
	height: clamp(2.75rem, 11vw, 5rem);
	transition: background-color 0.2s ease, filter 0.2s ease;
}
.layout-home .site-nav a:hover {
	text-decoration: none;
	text-shadow: 0 0 8px rgba(255, 255, 255, 0.7), 0 1px 4px rgba(0, 0, 0, 0.45);
}
.layout-home .site-nav a:hover::before {
	--wave-color: #fff;
	filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9));
}

.layout-home .site-main {
	flex: 0 0 auto;
	padding-top: 0;
}

.home-content {
	background: var(--panel-bg);
	border-radius: var(--radius);
	padding: var(--space-m);
}


/*------------------------------------*\
    9. CONTENT PANEL & TYPOGRAPHY
\*------------------------------------*/

/* Light variant: semi-transparent white panel (old #innerContentWhite) */
.content-panel {
	max-width: var(--content-max);
	margin-inline: auto;
	padding: var(--space-m) var(--space-s);
	background: var(--panel-bg);
	border-radius: var(--radius);
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

/* Dark variant: white text directly on the photo (old #innerContent) */
.content-plain {
	max-width: 58rem;
	margin-inline: auto;
	color: var(--kneipp-white);
}
/* Title on a light "chip" so it stays readable on any photo */
.content-plain .entry-title {
	display: inline-block;
	padding: 0.35rem 1rem;
	border-radius: var(--radius);
	background: var(--panel-bg);
	color: var(--kneipp-blue);
}
.content-plain a {
	color: var(--kneipp-white);
}

.entry-content > :last-child {
	margin-bottom: 0;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.4em;
}

blockquote {
	margin-left: 0;
	padding-left: var(--space-s);
	border-left: 4px solid var(--kneipp-blue);
}
blockquote p {
	margin: 0 0 0.5em;
}
blockquote strong {
	color: var(--kneipp-blue);
}

/* Highlight box used in the page content */
.rahmen {
	background: var(--kneipp-blue-tint);
	border-radius: var(--radius);
	padding: var(--space-s);
	margin: var(--space-s) 0;
}

hr {
	border: 0;
	border-top: 1px solid rgba(0, 124, 193, 0.35);
	margin: var(--space-l) 0;
}

/* Tables: scroll sideways on small screens instead of breaking the layout */
.entry-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	-webkit-overflow-scrolling: touch;
}
.wp-block-table {
	overflow-x: auto;
}
th {
	color: var(--kneipp-blue);
	border-bottom: 3px solid var(--kneipp-blue);
	padding: 0.4rem 0.75rem 0.4rem 0;
	text-align: left;
	vertical-align: bottom;
}
td {
	border-bottom: 1px solid rgba(0, 124, 193, 0.5);
	padding: 0.4rem 0.75rem 0.4rem 0;
	vertical-align: top;
}

.button,
.wp-block-button__link,
input[type="submit"] {
	display: inline-block;
	min-height: 44px;
	padding: 0.6rem 1.25rem;
	border: 0;
	border-radius: var(--radius);
	background: var(--kneipp-blue);
	color: var(--kneipp-white);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
}
.button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover {
	background: var(--kneipp-blue-dark);
	color: var(--kneipp-white);
}

.edit-link {
	margin-top: var(--space-m);
	font-size: var(--step--1);
}


/*------------------------------------*\
   10. FIVE PILLARS (template "Kneipp Fünf Säulen")
   Works with the existing page HTML: #saeule1 … #saeule5 (or .saeule)
   become cards, #leitbild becomes a full-width button.
\*------------------------------------*/

.saeulen {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-s);
	margin-top: var(--space-m);
}

/* Everything that is not a pillar spans the full width */
.saeulen > *,
.saeulen > p > * {
	grid-column: 1 / -1;
}

/* WordPress may wrap the pillars in <p> or add <br> – ignore those wrappers */
.saeulen > p:has(:is([id^="saeule"], .saeule)) {
	display: contents;
}
.saeulen > p:has(:is([id^="saeule"], .saeule)) > br,
.saeulen > br {
	display: none;
}
.saeulen > p:empty {
	display: none;
}

/* A link wrapped around a pillar becomes the grid item */
.saeulen :is(a:has(> :is([id^="saeule"], .saeule))) {
	grid-column: auto;
	display: block;
	color: inherit;
	text-decoration: none;
	border-radius: var(--radius);
}
.saeulen :is(a:has(> :is([id^="saeule"], .saeule))) > * {
	height: 100%;
}

.saeulen :is([id^="saeule"], .saeule) {
	grid-column: auto;
	position: relative;
	display: grid;
	grid-template-columns: 6.5rem 1fr;
	align-items: start;
	overflow: hidden;
	min-height: 6.5rem;
	margin: 0;
	padding: 0;
	background: var(--card-bg);
	border-radius: var(--radius);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
	color: var(--kneipp-text);
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.saeulen :is([id^="saeule"], .saeule):hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	}
}

/* Photo of each pillar (cropped from the old saeuleN.png sprites) */
.saeulen :is([id^="saeule"], .saeule)::before {
	content: "";
	grid-row: 1 / span 10;
	align-self: stretch;
	min-height: 100%;
	background: var(--saeule-img, none) center / cover no-repeat;
}
#saeule1 { --saeule-img: url("img/saeulen/saeule1-foto.jpg"); }
#saeule2 { --saeule-img: url("img/saeulen/saeule2-foto.jpg"); }
#saeule3 { --saeule-img: url("img/saeulen/saeule3-foto.jpg"); }
#saeule4 { --saeule-img: url("img/saeulen/saeule4-foto.jpg"); }
#saeule5 { --saeule-img: url("img/saeulen/saeule5-foto.jpg"); }

.saeulen :is([id^="saeule"], .saeule) > * {
	grid-column: 2;
	margin-inline: var(--space-s);
}
.saeulen :is([id^="saeule"], .saeule) h3 {
	font-size: var(--step-1);
	color: var(--kneipp-blue);
	margin-top: 0.75rem;
	margin-bottom: 0.25rem;
}
.saeulen :is([id^="saeule"], .saeule) p {
	font-size: var(--step--1);
	line-height: 1.45;
	color: var(--kneipp-text);
	margin-bottom: 0.75rem;
}
.saeulen :is([id^="saeule"], .saeule) a {
	color: inherit;
	text-decoration: none;
}
/* If a pillar contains a link, make the whole card clickable */
.saeulen :is([id^="saeule"], .saeule) a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.saeulen :is([id^="saeule"], .saeule):focus-within {
	box-shadow: var(--focus-ring);
}
.saeulen :is([id^="saeule"], .saeule) a:focus-visible {
	box-shadow: none;
}

/* "Leitbild" call-to-action */
#leitbild {
	margin: var(--space-s) 0 0;
}
#leitbild a {
	display: block;
	padding: 0.85rem var(--space-s);
	border-radius: var(--radius);
	background: rgba(0, 99, 154, 0.85);
	color: var(--kneipp-white);
	font-size: var(--step-1);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease;
}
#leitbild a:hover {
	background: var(--kneipp-navy);
}

/* Tablets: two columns, photo on top */
@media (min-width: 36em) {
	.saeulen {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.saeulen :is([id^="saeule"], .saeule) {
		grid-template-columns: 1fr;
		align-content: start;
	}
	.saeulen :is([id^="saeule"], .saeule)::before {
		grid-row: auto;
		min-height: 0;
		aspect-ratio: 120 / 81;
	}
	.saeulen :is([id^="saeule"], .saeule) > * {
		grid-column: 1;
	}
}

@media (min-width: 48em) {
	.saeulen {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Large screens: all five pillars side by side (as in the original design) */
@media (min-width: 72em) {
	.saeulen {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 0.75rem;
	}
	.saeulen :is([id^="saeule"], .saeule) > * {
		margin-inline: 0.75rem;
	}
	.saeulen :is([id^="saeule"], .saeule) h3 {
		font-size: 1.1rem;
	}
}


/*------------------------------------*\
   11. LISTS, FORMS, COMMENTS, PAGINATION
\*------------------------------------*/

.page-header {
	margin-bottom: var(--space-m);
}

.post-list {
	display: grid;
	gap: var(--space-m);
}

.entry-summary {
	display: grid;
	gap: var(--space-s);
	padding-bottom: var(--space-m);
	border-bottom: 1px solid rgba(0, 124, 193, 0.25);
}
.entry-summary .entry-title {
	font-size: var(--step-1);
	margin: 0 0 0.25rem;
}
.entry-summary .entry-title a {
	color: var(--kneipp-blue-dark);
	text-decoration: none;
}
.entry-summary .entry-title a:hover {
	text-decoration: underline;
}
.entry-summary__thumb img {
	border-radius: var(--radius);
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
@media (min-width: 36em) {
	.entry-summary:has(.entry-summary__thumb) {
		grid-template-columns: 9rem 1fr;
		align-items: start;
	}
}

.entry-meta {
	font-size: var(--step--1);
	color: #555;
	margin-bottom: var(--space-s);
}

.entry-footer {
	margin-top: var(--space-m);
	font-size: var(--step--1);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
textarea,
select {
	width: 100%;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	border: 1px solid #8a9ba8;
	border-radius: var(--radius);
	background: var(--kneipp-white);
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	border-color: var(--kneipp-blue);
}

.search-form {
	display: flex;
	gap: var(--space-xs);
	margin: var(--space-s) 0;
}
.search-form__input {
	flex: 1 1 auto;
	min-width: 0;
}

.comments {
	margin-top: var(--space-l);
}
.comment-list {
	list-style: none;
	padding: 0;
}
.comment-list .children {
	list-style: none;
	padding-left: var(--space-m);
}
.comment-body {
	padding: var(--space-s) 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.comment-author img {
	border-radius: 50%;
	float: left;
	margin-right: 0.75rem;
}
.comment-metadata {
	font-size: var(--step--1);
}

.pagination,
.post-navigation {
	margin-top: var(--space-l);
}
.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	justify-content: space-between;
}
.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.75rem;
	border-radius: var(--radius);
	background: var(--kneipp-blue-tint);
	text-decoration: none;
}
.pagination .page-numbers.current {
	background: var(--kneipp-blue);
	color: var(--kneipp-white);
}
.nav-label {
	display: block;
	font-size: var(--step--1);
	color: #555;
}


/*------------------------------------*\
   12. FOOTER
\*------------------------------------*/

.site-footer {
	padding: var(--space-s);
	background: rgba(38, 61, 78, 0.88);
	color: var(--kneipp-white);
	font-size: var(--step--1);
	text-align: center;
}
.site-footer a {
	color: var(--kneipp-white);
}
.footer-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem 1.25rem;
	list-style: none;
	margin: 0 0 0.5rem;
	padding: 0;
}
.footer-menu a {
	display: inline-block;
	padding: 0.5rem 0.25rem;
}
.copyright {
	margin: 0;
	opacity: 0.85;
}

.layout-home .site-footer {
	background: none;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}


/*------------------------------------*\
   13. WORDPRESS CORE CLASSES
\*------------------------------------*/

.alignleft,
.alignright,
.aligncenter,
.alignnone {
	margin-bottom: var(--space-s);
}
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
@media (min-width: 36em) {
	.alignleft {
		float: left;
		margin-right: var(--space-m);
		max-width: 50%;
	}
	.alignright {
		float: right;
		margin-left: var(--space-m);
		max-width: 50%;
	}
}
.entry-content::after {
	content: "";
	display: table;
	clear: both;
}

.wp-caption {
	max-width: 100%;
}
.wp-caption img {
	display: block;
	margin: 0;
}
.wp-caption-text,
.gallery-caption,
figcaption {
	font-size: var(--step--1);
	line-height: 1.4;
	margin-top: 0.4rem;
}

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
	gap: var(--space-xs);
}
.gallery-item {
	margin: 0;
}

.sticky,
.bypostauthor {
	/* required WordPress classes */
}


/*------------------------------------*\
   14. DESKTOP LAYOUT (min-width: 60em ≈ 960px)
   Side navigation on the left, content on the right – like the old design.
\*------------------------------------*/

@media (min-width: 60em) {

	.site {
		display: grid;
		grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
		grid-template-rows: 1fr auto;
		max-width: var(--site-max);
		margin-inline: auto;
		padding-inline: var(--space-s);
	}

	.site-header {
		grid-column: 1;
		grid-row: 1 / -1;
		align-self: start;
		position: relative;
		top: auto;
		max-height: none;
		overflow: visible;
		/* Light panel behind logo + menu, readable on every background photo */
		background: rgba(255, 255, 255, 0.96);
		box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
		border-radius: 0 0 var(--radius) var(--radius);
		margin-right: var(--space-s);
		padding: 104px 0.5rem var(--space-l) 0;
	}

	.site-header__bar {
		padding: 0 0 0 1.4rem;
	}
	.site-logo__img {
		max-height: none;
		width: 150px;
	}
	.menu-toggle {
		display: none;
	}

	.tem-line {
		padding: 2.25rem 0 0 1.4rem;
	}
	.tem-line img {
		width: 150px;
	}

	.site-nav {
		border: 0;
		padding: 2.5rem 0 0;
	}
	.site-nav a {
		min-height: 2.25rem;
		font-size: 0.9375rem;
	}
	.site-nav .sub-menu a,
	.site-nav .children a {
		min-height: 2rem;
	}
	.site-nav .sub-menu,
	.site-nav .children {
		padding-left: 4.25rem;
	}
	.site-nav > ul > li > a::before {
		width: 3.5rem;
		height: 1.5rem;
	}
	.submenu-toggle {
		width: 2.25rem;
		height: 2.25rem;
	}

	.site-main {
		grid-column: 2;
		grid-row: 1;
		padding: 0 0 var(--space-l);
	}

	.content-panel {
		margin: 0;
		min-height: 100vh;
		padding: 125px clamp(1.5rem, 3vw, 2.5rem) var(--space-l);
		border-radius: 0 0 var(--radius) var(--radius);
	}

	.content-plain {
		margin: 0;
		padding-top: 125px;
	}

	.site-footer {
		grid-column: 2;
		grid-row: 2;
		text-align: left;
		border-radius: var(--radius) var(--radius) 0 0;
		max-width: var(--content-max);
	}
	.footer-menu {
		justify-content: flex-start;
	}

	.layout-dark .site-footer {
		max-width: none;
	}

	/* Home page keeps its own centred single-column layout */
	.layout-home .site {
		display: flex;
		max-width: 44rem;
		padding-inline: 0;
	}
	.layout-home .site-header {
		position: static;
		max-height: none;
		overflow: visible;
		padding: 0;
		margin: 0;
		background: none;
		box-shadow: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.layout-home .site-header__bar {
		padding: 40px var(--space-s) 0;
	}
	.layout-home .site-logo__img {
		width: 419px;
	}
	.layout-home .tem-line {
		padding: 3.75rem 0 0;
	}
	.layout-home .tem-line img {
		width: 308px;
	}
	.layout-home .site-nav {
		padding-top: 3.5rem;
	}
	.layout-home .site-nav a {
		font-size: 1.7rem;
	}
	.layout-home .site-main {
		padding-inline: var(--space-s);
	}
	.layout-home .site-footer {
		max-width: none;
		text-align: center;
	}
}


/*------------------------------------*\
   15. MOTION & PRINT
\*------------------------------------*/

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
	.saeulen :is([id^="saeule"], .saeule):hover {
		transform: none;
	}
}

@media print {
	body::before,
	.page-bg,
	.site-nav,
	.menu-toggle,
	.skip-link,
	.comments,
	.edit-link {
		display: none !important;
	}
	* {
		background: transparent !important;
		color: #000 !important;
		box-shadow: none !important;
		text-shadow: none !important;
	}
	.site,
	.site-header,
	.content-panel,
	.content-plain {
		display: block;
		position: static;
		min-height: 0;
		padding: 0;
		max-width: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.tem-line img {
		filter: brightness(0);
	}
	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
	}
	h2,
	h3 {
		break-after: avoid;
	}
	img,
	tr {
		break-inside: avoid;
	}
	@page {
		margin: 1.5cm;
	}
}

/*------------------------------------*\
   16. VERSION 2.1 REFINEMENTS
\*------------------------------------*/
:root { --panel-padding: var(--space-s); }
.site-main, .site-header, .entry-content { min-width: 0; }
.site-main:focus-visible { box-shadow: none; }
h1, h2, h3 { overflow-wrap: anywhere; }
/* Readable small type; keep the original bright blue for large headings/waves. */
h3, .saeulen :is([id^="saeule"], .saeule) h3, th, blockquote strong {
	color: var(--kneipp-blue-dark);
}
.button, .wp-block-button__link, input[type="submit"] {
	background: var(--kneipp-blue-dark);
}
.button:hover, .wp-block-button__link:hover, input[type="submit"]:hover {
	background: var(--kneipp-navy);
}
.button, .wp-block-button__link, input[type="submit"], .site-nav a {
	transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.site-nav a { min-width: 0; overflow-wrap: anywhere; }
.layout-home .site-nav a:focus-visible {
	background: rgba(38, 61, 78, 0.92);
	text-shadow: none;
}
.saeulen :is([id^="saeule"], .saeule):focus-within {
	box-shadow: var(--focus-ring);
}
.saeulen :is(a:has(> :is([id^="saeule"], .saeule))):focus-visible {
	box-shadow: var(--focus-ring);
}
/* Block widths are relative to the reading panel, never the whole viewport. */
.entry-content > .alignwide {
	width: 100%; max-width: 100%; margin-inline: 0;
}
.entry-content > .alignfull {
	width: calc(100% + 2 * var(--panel-padding));
	max-width: none;
	margin-inline: calc(-1 * var(--panel-padding));
}
.entry-content > :is(.alignwide, .alignfull) img { max-width: 100%; }
.entry-content :is(pre, .wp-block-code) { max-width: 100%; overflow-x: auto; }
/* Do not nest a table scroll area inside Gutenberg's table scroll area. */
.wp-block-table table { display: table; overflow: visible; width: 100%; }
/* Focus remains visible in Windows high-contrast/forced-colour modes. */
@media (forced-colors: active) {
	:focus-visible { outline: 2px solid Highlight; outline-offset: 3px; }
	.saeulen :is([id^="saeule"], .saeule):focus-within { outline: 2px solid Highlight; }
}
@media (min-width: 60em) {
	:root { --panel-padding: clamp(1.5rem, 3vw, 2.5rem); }
	/* Exact original top-band artwork: the title is back in the white top area. */
	body::before {
		top: var(--wp-admin--admin-bar--height, 0px);
		height: 180px;
		background: url("img/top-band.png") repeat-x top left;
	}
	.content-panel > article > .entry-title,
	.content-panel > .entry-title,
	.content-panel > .page-header .entry-title,
	.content-plain > .entry-title {
		font-size: 1.5rem;
		line-height: 1.3;
		margin: 0 0 45px;
	}
	.content-plain > .entry-title {
		display: block;
		padding: 0 0 0 20px;
		background: none;
		border-radius: 0;
	}
	.content-plain > .saeulen { margin-top: 0; padding-top: 50px; }
	/* Even expanded menus belong to the page, not a second scroll container. */
	.site-header { max-height: none; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
	.site-main { padding: 0; }
	.site-header { margin: 0 0 1rem; overflow: visible; max-height: none; }
	.content-plain > .entry-title { padding: 0; margin-bottom: 1rem; }
	.content-plain > .saeulen { padding-top: 0; }
	.entry-content > .alignfull { width: 100%; margin-inline: 0; }
}

/* wpautop may split legacy linked DIV cards into empty paragraph/anchor pairs.
   Flatten only those wrappers; preserve all actual editor content. */
.saeulen > p:has(> a:empty) { display: contents; }
.saeulen > p > a:empty { display: none; }

/* 2.2 — content-focused refinements, keeping a single document scrollbar. */
.tem-line img { display: block; }
/* Same horizontal centre as the desktop logo, just below the 180px band. */
@media (min-width: 60em) {
	body:not(.layout-home) .tem-line { padding-top: 2.75rem; }
}
/* Home: 40px instead of 60px under the logo (desktop y=186px). */
.layout-home .tem-line {
	padding-top: clamp(1.25rem, 4vw, 2.5rem);
}
.layout-home .tem-line img { margin-inline: auto; }
.nav-search { margin: 0 1rem 1rem; font-size: 0.9375rem; }
.nav-search summary, .table-of-contents summary { cursor: pointer; min-height: 44px; padding-block: 0.6rem; font-weight: 600; }
.nav-search .search-form { flex-wrap: wrap; margin-bottom: 0; }
.nav-search .search-form__input { flex-basis: 100%; }
.layout-home .nav-search {
	background: rgba(255,255,255,0.97); border-radius: var(--radius);
	padding: 0.25rem 1rem; width: calc(100% - 2rem); max-width: 32rem;
	margin: 0 auto 1rem; color: var(--kneipp-text);
}
.breadcrumbs, .review-meta { font-size: var(--step--1); margin: 0 0 1rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; padding: 0; list-style: none; }
.breadcrumbs li { overflow-wrap: anywhere; }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.6rem; color: #555; }
.review-meta { color: #444; }
.content-tools { margin: 0 0 1.5rem; }
.content-tools:empty { display: none; }
.print-button {
	font-size: 0.875rem; min-height: 44px; padding: 0.4rem 0.8rem;
	border: 1px solid var(--kneipp-blue-dark); border-radius: var(--radius);
	background: #fff; color: var(--kneipp-blue-dark); cursor: pointer; margin-bottom: 0.75rem;
}
.print-button:hover { background: #edf6fa; }
.table-of-contents { border: 1px solid #c5dce7; border-radius: var(--radius); background: #f4f9fc; padding: 0.25rem 1rem; }
.table-of-contents ol { margin: 0 0 0.75rem; padding-left: 1.25rem; }
.table-of-contents li { padding-block: 0.2rem; }
.toc-subheading { margin-left: 1rem; }
.entry-content :is(h2,h3)[id] { scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 1rem); }
/* Optional, unboxed file hints; disabled by default in the Customizer. */
.file-format-label { font-size: 0.8em; font-weight: 400; color: inherit; white-space: nowrap; }

.kneipp-notice, .is-style-kneipp-notice, .kneipp-download { padding: 1.25rem; border-left: 4px solid var(--kneipp-blue-dark); background: #edf6fa; border-radius: var(--radius); margin-block: 1.5rem; color: #222; }
.kneipp-notice > :first-child, .is-style-kneipp-notice > :first-child, .kneipp-download > :first-child { margin-top: 0; }
.entry-content .wp-block-details { background: #f4f9fc; padding: 0.75rem 1rem; border: 1px solid #c5dce7; border-radius: var(--radius); margin-bottom: 1rem; color: #222; }
.wp-block-details summary { cursor: pointer; min-height: 44px; padding-block: 0.5rem; font-weight: 600; color: var(--kneipp-blue-dark); }
.entry-content .wp-block-file { padding: 1rem; background: #edf6fa; border-radius: var(--radius); }
.entry-content .wp-block-file__button { background: var(--kneipp-blue-dark); color: #fff; min-height: 44px; padding: 0.75rem 1rem; }
.is-style-kneipp-schedule th { background: #edf6fa; }
.is-style-kneipp-schedule tr:nth-child(even) td { background: #f4f9fc; }
.back-to-top { display: inline-block; min-height: 44px; padding: 0.6rem 0; font-weight: 600; }
@media print {
	.nav-search, .content-tools, .back-to-top, .breadcrumbs { display: none !important; }
	.page-bg { display: none !important; }
	.site { display: block; }
	.site-main { width: 100%; }
	.entry-content table { display: table; overflow: visible; width: 100%; }
	.site-footer { background: none; }
	.kneipp-notice, .kneipp-download { border: 1px solid #777; }
	.wp-block-details:not([open]) > :not(summary) { display: block !important; }
}

/* 2.3.1 — alpha changes surfaces only, not text/links/images. */
:root {
 --panel-bg: rgba(255,255,255,var(--kneipp-panel-alpha, .86));
 --card-bg: rgba(255,255,255,var(--kneipp-card-alpha, .92));
}
@media (min-width: 60em) {
 body:not(.layout-home) .site-header { background: rgba(255,255,255,var(--kneipp-sidebar-alpha, .86)); }
}
@media (max-width: 59.99em) {
 :root {
  --panel-bg: rgba(255,255,255,var(--kneipp-mobile-panel-alpha, .92));
  --card-bg: rgba(255,255,255,var(--kneipp-mobile-card-alpha, .92));
 }
}