/* ==================================================================
   MR Agrarbüro – Site-Template
   1. Tokens
   2. Grundlagen
   3. Buttons
   4. Kopfzeile und Menü
   5. Bausteine der Startseite
   6. Fußzeile
   7. Joomla-Ausgabe (Beiträge, Meldungen, Formulare, Tabellen)
   8. Responsiv
   ================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
	--loam: #23281F;
	--loam-soft: #333A2D;
	--leaf: #2F6B3F;
	--leaf-dark: #255434;
	--leaf-deep: #1A3B24;
	--raps: #F2B31A;
	--raps-dark: #DFA20C;
	--wash: #E8EDE5;
	--wash-deep: #DCE4D8;
	--line: #C6CDBF;
	--line-dark: #3E4837;
	--ink: #23281F;
	--ink-mute: #5A6355;
	--ink-dim: #8E9885;
	--white: #FFFFFF;

	--font-display: "Bitter", Georgia, "Times New Roman", serif;
	--font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

	--wrap: 1180px;
	--gap: clamp(1.5rem, 3vw, 2.75rem);
	--sec-y: clamp(3.25rem, 7vw, 6rem);
	--pad-x: clamp(1.15rem, 4vw, 2.5rem);
}

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

/* ---------- 2. Grundlagen ---------- */
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.012em;
	margin: 0 0 0.6em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.05rem, 4.6vw, 3.35rem); }
h2 { font-size: clamp(1.6rem, 3.1vw, 2.3rem); }
h3 { font-size: 1.2rem; line-height: 1.3; }
h4 { font-size: 1.05rem; }

p {
	margin: 0 0 1.1em;
	max-width: 68ch;
}

p:last-child { margin-bottom: 0; }

a {
	color: var(--leaf-dark);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

a:hover { color: var(--loam); }

:focus-visible {
	outline: 3px solid var(--raps);
	outline-offset: 2px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--loam);
	color: var(--white);
	padding: 0.75rem 1.25rem;
	font-weight: 700;
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
	color: var(--white);
}

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--pad-x);
}

.section { padding-block: var(--sec-y); }
.section--wash { background: var(--wash); }
.section--dark {
	background: var(--loam);
	color: #EDF0EA;
	/* In den hellen Abschnitten ist das Bild höher als der Text, dort
	   bleibt unter der letzten Zeile zusätzlich Spaltenrest frei. Im
	   dunklen Abschnitt ist der Text höher, deshalb muss der untere
	   Innenabstand das allein leisten. Zweiter Faktor = unten. */
	padding-block: calc(var(--sec-y) * 1.25) calc(var(--sec-y) * 1.9);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--white); }
.section--dark a:not(.btn) { color: var(--raps); }

/* Schaltflächen behalten in dunklen Abschnitten ihre eigene Textfarbe.
   Ohne diese Regeln gewinnt die allgemeine Link-Farbe und der Text
   verschwindet auf gleichfarbigem Grund. */
.section--dark .btn--accent { color: var(--loam); }
.section--dark .btn--accent:hover { color: var(--loam); }
.section--dark .btn--primary { color: var(--white); }
.section--flush-top { padding-top: 0; }

.lede { font-size: 1.15rem; color: var(--ink-mute); }
.section--dark .lede { color: #C3CBBB; }

.sec-head {
	max-width: 60ch;
	margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.sec-head::before {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	background: var(--raps);
	margin-bottom: 1.4rem;
}

.sec-head--tight { margin-bottom: 1.25rem; }

/* ---------- 3. Buttons ---------- */
.btn,
.site-main .btn-primary,
.site-main .btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.3;
	padding: 0.85em 1.6em;
	border: 2px solid transparent;
	border-radius: 2px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--primary,
.site-main .btn-primary {
	background: var(--leaf-dark);
	color: var(--white);
}

.btn--primary:hover,
.site-main .btn-primary:hover {
	background: var(--leaf-deep);
	color: var(--white);
}

.btn--accent {
	background: var(--raps);
	color: var(--loam);
}

.btn--accent:hover {
	background: var(--raps-dark);
	color: var(--loam);
}

.btn--ghost,
.site-main .btn-secondary {
	border-color: var(--line);
	color: var(--ink);
	background: transparent;
}

.btn--ghost:hover,
.site-main .btn-secondary:hover {
	border-color: var(--loam);
	background: var(--white);
	color: var(--loam);
}

.section--dark .btn--ghost {
	border-color: #5E6A56;
	color: #EDF0EA;
}

.section--dark .btn--ghost:hover {
	border-color: var(--raps);
	background: transparent;
	color: var(--raps);
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

/* ---------- 4. Kopfzeile und Menü ---------- */
.masthead {
	background: var(--wash);
	border-bottom: 1px solid var(--line);
}

.masthead--sticky {
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: saturate(140%) blur(6px);
}

.masthead__inner {
	display: flex;
	align-items: stretch;
	gap: 1.5rem;
	min-height: 84px;
}

.brand {
	display: flex;
	align-items: center;
	align-self: stretch;
	gap: 0.65rem;
	background: var(--white);
	padding-inline: clamp(0.8rem, 2vw, 1.35rem);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.2rem;
	color: var(--loam);
	text-decoration: none;
	flex: 0 0 auto;
}

.brand__mark {
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
}

/* Das Logo-PNG hat oben und unten weiße Ränder. Der Rahmen zeigt nur
   den mittleren Ausschnitt: --logo-box ist die sichtbare Höhe,
   --logo-zoom die tatsächliche Darstellungshöhe des Bildes.
   Wird zu viel oder zu wenig abgeschnitten, nur diese zwei Werte ändern. */
.brand__frame {
	--logo-box: 66px;
	--logo-zoom: 80px;
	height: var(--logo-box);
	overflow: hidden;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.brand__logo {
	height: var(--logo-zoom);
	width: auto;
	max-width: none;
	display: block;
}

.brand span { white-space: nowrap; }

.nav {
	margin-left: auto;
	align-self: center;
	display: flex;
	align-items: center;
	gap: 1.55rem;
}

/* gilt für die eigene Liste und für die Ausgabe von mod_menu */
.nav ul,
.nav .mod-menu {
	display: flex;
	align-items: center;
	gap: 1.55rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav li { margin: 0; }

.nav a:not(.btn) {
	color: var(--ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
	padding-block: 0.35rem;
	border-bottom: 2px solid transparent;
	display: inline-block;
}

.nav a:not(.btn):hover,
.nav .current > a:not(.btn),
.nav .active > a:not(.btn),
.nav a:not(.btn)[aria-current="page"] {
	border-bottom-color: var(--raps);
	color: var(--loam);
}

/* Untermenüs */
.nav .nav-child,
.nav .mod-menu__sub {
	display: none;
	position: absolute;
	background: var(--white);
	border: 1px solid var(--line);
	padding: 0.5rem 0;
	min-width: 14rem;
	flex-direction: column;
	gap: 0;
	box-shadow: 0 8px 24px rgba(35, 40, 31, 0.12);
}

.nav li { position: relative; }

.nav li:hover > .nav-child,
.nav li:focus-within > .nav-child,
.nav li:hover > .mod-menu__sub,
.nav li:focus-within > .mod-menu__sub {
	display: flex;
}

.nav .nav-child a,
.nav .mod-menu__sub a {
	display: block;
	padding: 0.5rem 1.1rem;
	border-bottom: 0;
	width: 100%;
}

.nav .nav-child a:hover,
.nav .mod-menu__sub a:hover {
	background: var(--wash);
}

.nav__actions {
	display: flex;
	gap: 0.6rem;
}

.nav__actions .btn {
	padding: 0.6em 1.1em;
	font-size: 0.95rem;
}

.nav-toggle {
	display: none;
	margin-left: auto;
	align-self: center;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: 2px;
	padding: 0.55rem 0.8rem;
	font: inherit;
	font-weight: 600;
	color: var(--loam);
	cursor: pointer;
}

/* ---------- 5. Bausteine der Startseite ---------- */
.hero { border-bottom: 1px solid var(--line); }

.hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	padding-block: clamp(2.75rem, 6vw, 5rem);
}

.hero h1 { margin-bottom: 1.1rem; }

.hero__sub {
	font-size: 1.2rem;
	color: var(--ink-mute);
	max-width: 44ch;
}

.checks {
	list-style: none;
	margin: 1.9rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.checks li {
	position: relative;
	padding-left: 1.9rem;
	font-weight: 600;
}

.checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 11px;
	height: 11px;
	background: var(--raps);
	transform: rotate(45deg);
}

/* Bild im Hero: Rahmen bleibt, Bildunterschrift entfällt */
.plot {
	border: 1px solid var(--line);
	background: var(--wash-deep);
	line-height: 0;
}

.plot__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Hinweisband – bewusst nicht .alert, um Joomla-Systemmeldungen nicht zu treffen */
.noticeband {
	background: var(--loam);
	color: #EDF0EA;
}

.noticeband__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.75rem;
	padding-block: 1.35rem;
}

.noticeband__tag {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--raps);
	flex: 0 0 auto;
}

.noticeband p {
	margin: 0;
	max-width: 70ch;
	color: #D5DCCE;
}

.noticeband .btn { margin-left: auto; }

/* Funktionsraster – Haarlinien wie Schlaggrenzen */
.grid-fn {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
}

.fn {
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: clamp(1.4rem, 2.6vw, 2.1rem);
}

.fn__icon {
	width: 38px;
	height: 38px;
	color: var(--leaf);
	margin-bottom: 1.1rem;
}

.fn h3 { margin-bottom: 0.5rem; }

.fn p {
	font-size: 1rem;
	color: var(--ink-mute);
	margin: 0;
	max-width: 38ch;
}

.fn strong { color: var(--loam); }

.split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.split--top { align-items: start; }
.split--text-right .split__media { order: -1; }

.split__media img {
	border: 1px solid var(--line);
	width: 100%;
	display: block;
}

/* Hochformatige Aufnahmen wie App-Screenshots sollen nicht die
   Höhe des ganzen Blocks bestimmen. */
.split__media--portrait img {
	width: auto;
	max-height: 26rem;
	margin-inline: auto;
}

.section--dark .split__media img { border-color: var(--line-dark); }

.cols-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.75rem, 4vw, 3rem);
}

.cols-2--spaced { margin-top: clamp(2.25rem, 4.5vw, 3.5rem); }

.benefit {
	border-top: 3px solid var(--leaf);
	padding-top: 1.25rem;
}

.benefit:nth-child(2) { border-top-color: var(--raps); }
.benefit h3 { margin-bottom: 0.75rem; }

.benefit ul {
	margin: 0;
	padding-left: 1.15rem;
}

.benefit li { margin-bottom: 0.45rem; }

.bullets {
	margin: 0 0 1.5rem;
	padding-left: 1.15rem;
}

.bullets li { margin-bottom: 0.5rem; }

.videos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gap);
}

.video figure { margin: 0; }

.video video {
	width: 100%;
	background: var(--loam);
	border: 1px solid var(--line);
	display: block;
}

.video figcaption {
	margin-top: 0.7rem;
	font-weight: 600;
	color: var(--loam);
}

.section--dark .video video { border-color: var(--line-dark); }
.section--dark .video figcaption { color: #EDF0EA; }

/* Ansprechpartner als Registerzeilen */
.ansprech-list {
	border-top: 1px solid var(--line);
	margin-top: 2rem;
}

.ansprech {
	display: grid;
	grid-template-columns: minmax(11rem, 1.1fr) minmax(9rem, 0.9fr) minmax(0, 1.6fr);
	gap: 0.4rem 1.5rem;
	align-items: baseline;
	border-bottom: 1px solid var(--line);
	padding-block: 1.1rem;
}

.ansprech__name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--loam);
}

.ansprech a {
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--line);
}

.ansprech a:hover { border-bottom-color: var(--leaf); }
.ansprech__mail { word-break: break-word; }

.partner-logo {
	max-width: 260px;
	margin-bottom: 2rem;
	display: block;
}

/* Preise */
.prices {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border: 1px solid var(--line);
	background: var(--white);
}

.price {
	padding: clamp(1.5rem, 3vw, 2.2rem);
	border-right: 1px solid var(--line);
}

.price:last-child { border-right: 0; }

.price--lead {
	background: var(--wash);
	border-top: 4px solid var(--raps);
}

.price h3 { margin-bottom: 0.6rem; }

.price p {
	font-size: 1rem;
	color: var(--ink-mute);
	max-width: 34ch;
}

.price__amount {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.8rem, 3.4vw, 2.5rem);
	line-height: 1.1;
	color: var(--loam);
	margin: 1rem 0 0.25rem;
}

.price__amount small {
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--ink-mute);
}

.price__note {
	font-size: 0.95rem;
	color: var(--ink-mute);
	margin: 0;
}

.price-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.75rem;
	margin-top: 1.75rem;
}

.price-foot p {
	margin: 0;
	font-size: 0.95rem;
	color: var(--ink-mute);
}

/* ---------- 6. Fußzeile ---------- */
.footer {
	background: var(--loam);
	color: #C3CBBB;
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--gap);
}

.footer h4,
.footer h3 {
	color: var(--white);
	font-size: 1.05rem;
	margin-bottom: 0.9rem;
}

.footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.footer a:not(.btn) {
	color: #C3CBBB;
	text-decoration: none;
}

.footer a:not(.btn):hover { color: var(--raps); }
.footer .btn--accent { color: var(--loam); }

.footer__legal {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line-dark);
	font-size: 0.9rem;
	color: var(--ink-dim);
}

.footer__legal ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.5rem;
}

/* ---------- 7. Joomla-Ausgabe ---------- */
.site-main { display: block; }

/* Normale Unterseiten in Lesebreite; die Startseite bleibt randlos */
.site-main > .com-content-article,
.site-main > .com-content-category,
.site-main > .com-content-categories,
.site-main > .com-contact,
.site-main > .com-users,
.site-main > .com-finder,
.site-main > .com-tags,
.site-main > .item-page,
.site-main > .blog,
.site-main > .blog-featured,
.site-main > .categories-list,
.site-main > .category-list,
.site-main > .contact,
.site-main > .login,
.site-main > .registration,
.site-main > .remind,
.site-main > .reset,
.site-main > .search,
.site-main > .finder,
.site-main > .tag-category,
.site-main > .newsfeed,
.site-main > .error {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding: var(--sec-y) var(--pad-x);
}

body.is-home .site-main > * {
	max-width: none;
	padding: 0;
	margin-inline: 0;
}

/* Auf der Startseite keinen Beitrags- oder Seitentitel ausgeben: der Hero
   enthält bereits eine h1, eine zweite auf derselben Seite schadet der
   Auffindbarkeit. Damit kann „Beitragstitel anzeigen" global auf Anzeigen
   stehen, was die Anleitungsbeiträge brauchen. */
body.is-home .site-main .page-header,
body.is-home .site-main .page-title {
	display: none;
}

/* Modulpositionen ohne eigenen Rahmen */
.zone { display: block; }

.zone .moduletable,
.zone .card { margin: 0; }

/* Beitragsköpfe */
.page-header h1,
.page-header h2 { margin-bottom: 1rem; }

.article-info {
	font-size: 0.92rem;
	color: var(--ink-mute);
	margin-bottom: 1.5rem;
}

.article-info dd { margin: 0 0 0.2rem; }

/* Systemmeldungen – eigenes Styling, da kein Bootstrap geladen wird */
#system-message-container {
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 1.5rem var(--pad-x) 0;
}

#system-message-container .alert {
	border: 1px solid var(--line);
	border-left: 4px solid var(--leaf);
	background: var(--wash);
	padding: 1rem 1.25rem;
	margin-bottom: 1rem;
}

#system-message-container .alert-warning { border-left-color: var(--raps); }
#system-message-container .alert-danger,
#system-message-container .alert-error { border-left-color: #A6301F; }

#system-message-container .alert-heading {
	font-family: var(--font-display);
	font-size: 1.05rem;
	margin-bottom: 0.35rem;
}

#system-message-container .alert ul,
#system-message-container .alert ol {
	margin: 0;
	padding-left: 1.15rem;
}

#system-message-container .btn-close,
#system-message-container .close {
	float: right;
	background: transparent;
	border: 0;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	color: var(--ink-mute);
}

/* Formulare */
.site-main input[type="text"],
.site-main input[type="email"],
.site-main input[type="tel"],
.site-main input[type="url"],
.site-main input[type="password"],
.site-main input[type="search"],
.site-main input[type="number"],
.site-main input[type="date"],
.site-main select,
.site-main textarea {
	font: inherit;
	color: var(--ink);
	background: var(--white);
	width: 100%;
	max-width: 34rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--line);
	border-radius: 2px;
}

.site-main textarea { min-height: 9rem; }

.site-main label {
	display: inline-block;
	font-weight: 600;
	margin-bottom: 0.3rem;
}

.site-main .control-group { margin-bottom: 1.1rem; }

.site-main fieldset {
	border: 1px solid var(--line);
	padding: 1.25rem;
	margin: 0 0 1.5rem;
}

.site-main legend {
	font-family: var(--font-display);
	font-weight: 700;
	padding-inline: 0.5rem;
}

.site-main .required,
.site-main .star { color: #A6301F; }

/* Tabellen */
.site-main table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5rem;
}

.site-main th,
.site-main td {
	text-align: left;
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}

.site-main th {
	font-family: var(--font-display);
	font-weight: 700;
}

/* Seitenblättern */
.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	list-style: none;
	padding: 0;
	margin: 2rem 0 0;
}

.pagination a,
.pagination span {
	display: inline-block;
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--line);
	text-decoration: none;
	color: var(--ink);
}

.pagination .active span,
.pagination a:hover {
	background: var(--wash);
	border-color: var(--loam);
}

.pagination__wrapper { margin-top: 2rem; }

/* Aufzählungen der Beitragsansicht */
.site-main ul,
.site-main ol { padding-left: 1.15rem; }

.site-main .icons,
.site-main .actions { list-style: none; padding-left: 0; }

/* Sonstiges */
.mod-list { list-style: none; padding-left: 0; }

.text-center { text-align: center; }

figure { margin: 0 0 1.5rem; }

figcaption {
	font-size: 0.92rem;
	color: var(--ink-mute);
	margin-top: 0.5rem;
}

blockquote {
	margin: 0 0 1.5rem;
	padding-left: 1.25rem;
	border-left: 3px solid var(--raps);
	font-size: 1.1rem;
}

/* ==================================================================
   7b. Unterseiten
   ================================================================== */

/* Seitentitel: gleiche Akzentlinie wie die Abschnittsköpfe der Startseite.
   Gilt nur für den Titel der Seite, nicht für Titel in Blogeinträgen. */
.site-main > * > .page-header {
	margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

.site-main > * > .page-header::before {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	background: var(--raps);
	margin-bottom: 1.4rem;
}

.site-main > * > .page-header h1,
.site-main > * > .page-header h2 {
	margin-bottom: 0;
}

.page-lede {
	font-size: 1.2rem;
	color: var(--ink-mute);
	max-width: 60ch;
	margin-bottom: 2rem;
}

/* Zeitleiste – nur einsetzen, wenn der Inhalt wirklich eine Folge ist */
.timeline {
	--tl-pad: clamp(1.25rem, 3vw, 2rem);
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0 0 0 var(--tl-pad);
	border-left: 2px solid var(--line);
	display: grid;
	gap: 1.9rem;
}

.timeline li {
	position: relative;
	max-width: 62ch;
}

.timeline li::before {
	content: "";
	position: absolute;
	left: calc(-1 * var(--tl-pad) - 7px);
	top: 0.55em;
	width: 12px;
	height: 12px;
	background: var(--raps);
	transform: rotate(45deg);
}

.timeline__year {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--leaf-dark);
	margin-bottom: 0.2rem;
}

.timeline p { margin: 0; }

/* Download-Hinweis, etwa für das Handbuch */
.download {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	max-width: 44rem;
	padding: 1.25rem 1.5rem;
	margin-bottom: 2rem;
	background: var(--wash);
	border: 1px solid var(--line);
	border-left: 4px solid var(--leaf-dark);
	color: var(--ink);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.download:hover {
	background: var(--white);
	border-left-color: var(--raps);
	color: var(--ink);
}

.download__icon {
	width: 32px;
	height: 40px;
	flex: 0 0 auto;
	color: var(--leaf-dark);
}

.download__title {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.1rem;
	line-height: 1.3;
}

.download__meta {
	display: block;
	font-size: 0.95rem;
	color: var(--ink-mute);
}

/* Blogansicht, etwa der Anleitungsbereich.
   Kompaktes Register: die Spaltenzahl richtet sich nach der Breite,
   unabhängig davon, welche Spaltenklasse Joomla ausgibt. Nur bei
   ausdrücklich einer Spalte im Menüpunkt bleibt es einspaltig. */
.blog-items,
.items-leading {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
	gap: 0;
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
	margin-bottom: 2rem;
}

.blog-items.columns-1,
.items-leading {
	grid-template-columns: minmax(0, 1fr);
}

.blog-item,
.items-leading > div {
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 1.25rem 1.5rem 1.35rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.blog-item .page-header,
.items-leading .page-header {
	margin: 0;
}

/* Titel der Blogeinträge. Bewusst über jede Überschrift im Eintrag,
   damit die Größe auch dann stimmt, wenn Joomla die Klasse .item-title
   nicht setzt — sonst greift die allgemeine h2-Größe von bis zu 2,3rem. */
.item-title,
.blog-item h1,
.blog-item h2,
.blog-item h3,
.blog-items h1,
.blog-items h2,
.blog-items h3,
.items-leading h2,
.items-leading h3 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.08rem;
	line-height: 1.3;
	letter-spacing: 0;
	margin: 0;
}

.item-title a {
	text-decoration: none;
	color: var(--loam);
}

.item-title a:hover {
	color: var(--leaf-dark);
	text-decoration: underline;
}

/* Anrisstext auf zwei Zeilen begrenzen, damit die Kacheln
   gleich hoch bleiben und die Liste scanbar ist */
.blog-item p:not(.readmore) {
	font-size: 0.97rem;
	color: var(--ink-mute);
	margin: 0;
	max-width: 46ch;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* „Details" und „Kategorie: …" in der Übersichtsliste ausblenden.
   In einem Register, dessen Einträge alle derselben Kategorie angehören,
   ist die Angabe unter jedem Titel reine Wiederholung. Auf den einzelnen
   Artikelseiten bleibt sie sichtbar — dort steuert Joomla das über
   Inhalt → Beiträge → Optionen und die Optionen je Beitrag. */
.blog-item .article-info,
.blog-items .article-info,
.items-leading .article-info { display: none; }

.readmore {
	margin: auto 0 0;
	padding-top: 0.35rem;
}

.readmore a,
.readmore .btn {
	display: inline-block;
	font-weight: 600;
	font-size: 0.92rem;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	background: transparent;
	color: var(--leaf-dark);
	text-decoration: none;
}

.readmore a:hover,
.readmore .btn:hover {
	border-bottom-color: var(--leaf-dark);
	color: var(--loam);
	background: transparent;
}

.readmore .icon-chevron-right { display: none; }

/* Einzelne Anleitung: dort wieder volle Lesebreite, kein Register */
.item-page .blog-item p:not(.readmore) {
	display: block;
	overflow: visible;
	font-size: 1.0625rem;
	color: var(--ink);
	max-width: 68ch;
}

/* ==================================================================
   7c. Formulare (Convert Forms)

   Der Container heißt .convertforms mit der ID #cf_<Formularnummer>,
   NICHT .cf-wrapper. Convert Forms steuert sein Aussehen über
   CSS-Variablen, die es per <style> mit #cf_1 in den Kopf schreibt.
   Deshalb werden hier die Variablen überschrieben statt einzelner
   Eigenschaften — das !important ist nötig, weil eine ID jede Klasse
   schlägt und der Inline-Block nach dem Stylesheet geladen wird.

   Zweite Besonderheit: einzeilige Felder können als
   <textarea rows="1"> ausgegeben werden, je nach Feldtyp.
   ================================================================== */

/* Formularseiten wie alle anderen Unterseiten zentrieren */
.site-main > .convertforms {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding: var(--sec-y) var(--pad-x);
}

/* Gestaltung über die Variablen der Erweiterung */
.convertforms {
	--font: var(--font-body) !important;
	--max-width: 42rem !important;
	--background-color: transparent !important;
	--border-radius: 0 !important;
	--control-gap: 1.05rem !important;
	--label-color: var(--loam) !important;
	--label-size: 1rem !important;
	--label-weight: 700 !important;
	--input-color: var(--ink) !important;
	--input-placeholder-color: var(--ink-mute) !important;
	--input-background-color: var(--white) !important;
	--input-border-color: var(--line) !important;
	--input-border-radius: 2px !important;
	--input-size: 1rem !important;
	--input-padding: 0.6rem 0.75rem !important;
	--color-primary: var(--leaf-dark) !important;
	--color-success: var(--leaf-dark) !important;
	--color-danger: #A6301F !important;
	--color-grey: var(--line) !important;
}

/* Die Schaltfläche bekommt eigene Variablen auf der Feldgruppe */
.convertforms .cf-control-group {
	--button-background-color: var(--leaf-dark) !important;
	--button-color: var(--white) !important;
	--button-border-radius: 2px !important;
	--button-padding: 0.85em 1.8em !important;
	--button-font-size: 1rem !important;
}

.convertforms .cf-btn:hover {
	--button-background-color: var(--leaf-deep) !important;
	background: var(--leaf-deep) !important;
}

/* Einzeilige Felder, die als Textarea ausgegeben werden */
.convertforms textarea.cf-input[rows="1"] {
	height: auto !important;
	min-height: 0 !important;
	overflow: hidden !important;
	resize: none !important;
	white-space: nowrap !important;
}

.convertforms textarea.cf-input:not([rows="1"]) {
	min-height: 8rem !important;
	resize: vertical;
}

/* Feldbeschriftungen fett, Auswahlbeschriftungen normal */
.convertforms .cf-control-label .cf-label,
.convertforms legend.cf-label {
	font-weight: 700 !important;
	line-height: 1.35 !important;
	margin-bottom: 0.3rem !important;
}

.convertforms .cf-required-label { color: #A6301F !important; }

/* Auswahlkästchen und Optionsfelder tragen ebenfalls .cf-input und
   würden sonst Polsterung und Rahmen der Textfelder erben */
.convertforms input[type="checkbox"].cf-input,
.convertforms input[type="radio"].cf-input {
	width: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	flex: 0 0 auto;
}

.convertforms .cf-list {
	display: grid;
	gap: 0.4rem;
}

.convertforms .cf-checkbox-group,
.convertforms .cf-radio-group {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
}

.convertforms .cf-checkbox-group label.cf-label,
.convertforms .cf-radio-group label.cf-label {
	font-weight: 400 !important;
	font-size: 1rem !important;
	color: var(--ink) !important;
	margin: 0 !important;
	cursor: pointer;
	line-height: 1.45 !important;
}

/* Auswahllisten: Der Aufklapp-Pfeil sitzt auf dem Wrapper .cf-select.
   Deshalb muss die Breite dort begrenzt werden, nicht am select selbst,
   sonst steht der Pfeil weit rechts neben dem Feld. */
.convertforms .cf-select {
	display: block;
	max-width: 30rem;
}

.convertforms select.cf-input {
	width: 100% !important;
	max-width: none !important;
}

/* Spam-Schutz ALTCHA */
.convertforms altcha-widget { display: block; max-width: 22rem; }

/* Einzelne Felder schmaler: Klasse beim Feld unter „CSS Classes"
   eintragen. Wrapper ist .cf-control-input. */
.convertforms .cf-schmal .cf-control-input,
.convertforms .cf-schmal .cf-select,
.convertforms .cf-schmal input.cf-input,
.convertforms .cf-schmal textarea.cf-input { max-width: 8rem !important; }

.convertforms .cf-mittel .cf-control-input,
.convertforms .cf-mittel .cf-select,
.convertforms .cf-mittel input.cf-input,
.convertforms .cf-mittel textarea.cf-input { max-width: 16rem !important; }

.convertforms .cf-breit .cf-control-input,
.convertforms .cf-breit .cf-select,
.convertforms .cf-breit input.cf-input,
.convertforms .cf-breit textarea.cf-input { max-width: 26rem !important; }

/* Rückmeldung nach dem Absenden */
.convertforms .cf-response:not(:empty) {
	border: 1px solid var(--line);
	border-left: 4px solid var(--leaf-dark);
	background: var(--wash);
	color: var(--ink);
	padding: 1rem 1.25rem;
	border-radius: 0;
	margin-bottom: 1.25rem;
}

/* ---------- Joomla-Kontaktformular und RSForm Pro ---------- */
.site-main input[type="text"],
.site-main input[type="email"],
.site-main input[type="tel"],
.site-main input[type="url"],
.site-main input[type="password"],
.site-main input[type="search"],
.site-main input[type="number"],
.site-main input[type="date"],
.site-main select,
.site-main textarea {
	font: inherit;
	color: var(--ink);
	background: var(--white);
	max-width: 30rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--line);
	border-radius: 2px;
}

.site-main textarea { min-height: 8rem; }

.site-main > * label.control-label,
.rsform-block > label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.3rem;
}

.site-main .control-group,
.rsform-block { margin-bottom: 1.05rem; }

.site-main .required,
.site-main .star,
.formRequired { color: #A6301F; }

.form-note {
	display: block;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--ink-mute);
	max-width: 60ch;
}

/* ---------- 8. Responsiv ---------- */
@media (max-width: 1000px) {
	/* Kopfzeile auf eine Zeile bringen: links das Namensfeld, rechts der
	   Menü-Schalter. Die Navigation und die beiden Schaltflächen liegen
	   im aufklappbaren Bereich darunter — eine mitscrollende Leiste soll
	   auf dem Handy nicht ein Drittel des Bildschirms belegen. */
	.masthead__inner {
		flex-wrap: wrap;
		gap: 0;
		min-height: 0;
		padding-block: 0.4rem;
	}

	.brand__frame { --logo-box: 50px; --logo-zoom: 60px; }

	.nav-toggle {
		display: block;
		margin-left: auto;
		align-self: center;
	}

	.nav {
		display: none;
		width: 100%;
		order: 3;
		margin: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.nav--open { display: flex; }

	.nav--open > ul,
	.nav--open > .mod-menu,
	.nav--open .moduletable {
		display: grid;
		gap: 0;
		width: 100%;
		border-top: 1px solid var(--line);
		margin: 0;
	}

	.nav--open li { border-bottom: 1px solid var(--line); }

	.nav--open a:not(.btn) {
		display: block;
		padding: 0.8rem 0;
		border-bottom: 0;
	}

	.nav--open .nav-child,
	.nav--open .mod-menu__sub {
		display: block;
		position: static;
		border: 0;
		box-shadow: none;
		padding: 0 0 0.5rem 1rem;
		min-width: 0;
	}

	.nav__actions {
		display: flex;
		width: 100%;
		gap: 0.6rem;
		margin: 0;
		padding: 0.85rem 0 0.4rem;
	}

	.nav__actions .btn {
		flex: 1;
		padding: 0.7em 0.9em;
	}

	.grid-fn { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
	.hero__inner,
	.split,
	.cols-2,
	.videos,
	.footer__inner { grid-template-columns: 1fr; }

	.split--text-right .split__media { order: 0; }

	.prices { grid-template-columns: 1fr; }

	.price {
		border-right: 0;
		border-bottom: 1px solid var(--line);
	}

	.price:last-child { border-bottom: 0; }

	.noticeband .btn { margin-left: 0; }

	.ansprech {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}

	.ansprech__name { margin-bottom: 0.2rem; }
}

@media (max-width: 560px) {
	.grid-fn { grid-template-columns: 1fr; }
	.btn { width: 100%; }
	.nav__actions .btn { width: auto; }
	.brand__frame { --logo-box: 44px; --logo-zoom: 53px; }
	.nav-toggle { padding: 0.45rem 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ---------- 9. Sicherung Schaltflächen ----------
   Umgebungsregeln wie ".nav a" oder ".section--dark a" sind spezifischer
   als eine einzelne Klasse und würden sonst die Schriftfarbe der
   Schaltflächen überschreiben. Diese Selektoren stehen absichtlich am
   Ende der Datei und haben dieselbe Spezifität wie jene Regeln. */
a.btn--primary,
a.btn--primary:hover,
a.btn--primary:focus {
	color: var(--white);
}

a.btn--accent,
a.btn--accent:hover,
a.btn--accent:focus {
	color: var(--loam);
}

@media print {
	.masthead,
	.nav,
	.noticeband,
	.footer,
	.skip-link { display: none !important; }

	body { color: #000; background: #fff; }
}