/* KAI-CMS Starter — Ausgangs-Stylesheet fuer ein neues Kundenprojekt.

Abgeleitet aus der Demo-Datei css/styles.css dieses Repos, aber bewusst NICHT deren Kopie:
das reine Demo-Layout (Hero, Karten-Raster, Galerie-Wrapper, Kontaktblock mit Social-Pillen)
ist entfernt, weil dazu im Starter kein Markup existiert. Uebrig bleiben zwei Sorten Regeln:

1. Das Grundgeruest, aus dem die beiden Starter-Seiten tatsaechlich gebaut sind - Topbar,
   Header/Logo, Navigation (Desktop und Burger-Panel), Sections, Footer. Das ist der Teil,
   der beim Aufbau eines Kundendesigns ersetzt oder ueberschrieben wird.

2. Die Optik der Engine-Features - TinyMCE-Formate, 404-Seite, Cookie-Banner, Popup,
   Kalender, News, Preisliste, Menuekarten, Kategorie-Karten, Kontaktformular. Die muss
   bleiben: cms/css/system.css liefert dazu nur Struktur und Mechanik, ohne diese Datei
   sieht ein aktivierter Kalender oder Cookie-Banner unformatiert aus. Die Kommentarkoepfe
   der einzelnen Bloecke nennen jeweils die vorgesehenen Anpassungspunkte.

Diese Datei ist Kundendesign und wird von keinem Engine-Update angefasst. */
/* VILUX — Grundgeruest (ersetzt den gleichnamigen Teil der Starter-Datei).
Nachgebaut nach dem Auftritt auf WordPress/Bricks, Stand 30.09.2026: Roboto fuer Text,
Source Sans Pro fuer Ueberschriften, graue Kopf- und Fusszeile, gelber Knopf, auf der
Startseite der bewegte Farbverlauf.
Die Schriften liegen auf dem eigenen Server (siehe @font-face unten). */

/* Schriften: selbst gehostet unter fonts/, keine Verbindung zu Google. Nur der Latin-Ausschnitt
(Umlaute, ß, «», –, €) und nur die Schnitte, die diese Datei braucht: Roboto 400/500/700/900,
Source Sans Pro 700. Quelle: Fontsource 5.3.0 (npm), Lizenz SIL OFL 1.1, siehe fonts/OFL-*.txt.
Kursive Schnitte fehlen bewusst - <em> im Editortext wird vom Browser schraeg gestellt. */
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/roboto-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/roboto-latin-500-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/roboto-latin-700-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("../fonts/roboto-latin-900-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Source Sans Pro";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/source-sans-pro-latin-700-normal.woff2") format("woff2");
}

:root {
	--vx-text: #101923;
	--vx-muted: #5e5e5e;
	--vx-bar: #f2f2f2;
	--vx-subbar: #d9d9d9;
	--vx-accent: #ffd64f;
	--vx-accent-hover: #f5c518;
	--vx-line: #dddedf;
	--vx-table-head: #d9edf7;
	--vx-table-zebra: #f9f9f9;
	--vx-font: Roboto, "Helvetica Neue", Arial, sans-serif;
	--vx-font-heading: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--vx-font);
	font-size: 17px;
	color: var(--vx-text);
	line-height: 1.5;
	background: #fff;
}

a { color: inherit; }

.wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px;
}

h1, h2, h3 {
	font-family: var(--vx-font-heading);
	font-weight: 700;
	line-height: 1.2;
	color: var(--vx-text);
}

.icon {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	vertical-align: -0.125em;
}

/* TOP BAR (Telefon und E-Mail aus den Kontaktdaten) */

.topbar {
	font-size: 15px;
	padding: 10px 0;
}

.topbar .wrap {
	display: flex;
	justify-content: flex-end;
	gap: 28px;
	flex-wrap: wrap;
}

.topbar a.topbar-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--vx-text);
	text-decoration: none;
}

/* HEADER / NAV */

.site-header {
	background: var(--vx-bar);
	padding: 10px 0;
}

.site-header .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.logo {
	display: block;
	line-height: 0;
}

/* Logo 325.5 x 155 (Entwurf A, Umrisse). 140 px breit ergibt 67 px Hoehe - etwa die
Hoehe des alten Logos in der Kopfzeile. */
.logo img {
	width: 140px;
	height: auto;
}

/* Nur oberhalb des Mobile-Breakpoints - Begruendung im Starter: gleiche Spezifitaet wie die
Sichtbarkeits-Mechanik in system.css, unbedingt gesetzt wuerde es das Burger-Panel aushebeln. */
@media (min-width: 721px) {
	nav.mainnav ul.mainnav-list {
		display: flex;
		align-items: center;
		gap: 28px;
	}
}

nav.mainnav a,
nav.mainnav .mainnav-toggle {
	color: var(--vx-muted);
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	cursor: pointer;
}

nav.mainnav .mainnav-toggle {
	background: transparent;
	border-top: none;
	border-left: none;
	border-right: none;
	font-family: inherit;
	padding: 6px 4px;
}

/* Der gelbe Strich markiert nur die aktuelle Seite. Beim Ueberfahren wechselt allein die
Farbe (Regel fuer alle Links am Ende der Datei). */
nav.mainnav a.active {
	color: var(--vx-text);
	border-bottom-color: var(--vx-accent);
}

nav.mainnav .mainnav-item.has-dropdown > .mainnav-toggle:after {
	content: '▾';
	display: inline-block;
	font-size: 11px;
}

nav.mainnav ul.mainnav-dropdown {
	background: #fff;
	border: 1px solid #eee;
	box-shadow: 0 10px 24px rgba(0,0,0,0.09);
	padding: 8px 0;
	margin-top: 10px;
}

/* Unsichtbare Bruecke ueber die 10px Luecke aus margin-top oben - ohne sie klappt das
Dropdown beim Herunterfahren mit der Maus zu, bevor der Unterpunkt erreicht ist (Begruendung
ausfuehrlich in der Starter-Datei). */
nav.mainnav ul.mainnav-dropdown:before {
	content: '';
	position: absolute;
	top: -10px;
	left: 0;
	right: 0;
	height: 10px;
}

nav.mainnav ul.mainnav-dropdown a {
	display: block;
	padding: 9px 20px;
	border-bottom: none;
	white-space: nowrap;
	font-size: 15px;
}

nav.mainnav ul.mainnav-dropdown a:hover,
nav.mainnav ul.mainnav-dropdown a.active {
	background: var(--vx-bar);
	color: var(--vx-text);
}

/* Burger: Sichtbarkeit steuert allein system.css, hier nur Groesse und Balken. */
.mainnav-burger {
	width: 26px;
	height: 20px;
	flex-direction: column;
	justify-content: space-between;
	--mainnav-burger-cross-offset: 9px;
}
.mainnav-burger span {
	display: block;
	height: 2px;
	background: var(--vx-text);
	border-radius: 1px;
}

/* STARTSEITE: bewegter Farbverlauf hinter Topbar, Kopfzeile und Logo */

body.page-home {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	background-attachment: fixed;
	animation: vx-gradient 9s ease infinite;
}

@keyframes vx-gradient {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
	body.page-home { animation: none; }
}

body.page-home .site-header {
	background: transparent;
}

body.page-home nav.mainnav a,
body.page-home nav.mainnav .mainnav-toggle {
	color: var(--vx-text);
}

.home-hero {
	text-align: center;
	padding: 90px 0 120px;
}

.home-logo {
	width: min(440px, 80%);
	height: auto;
}

.home-hero h1 {
	font-family: var(--vx-font);
	font-weight: 900;
	font-size: 38px;
	margin: 40px 0 0;
}

/* SEITENINHALT */

.page-content { padding: 60px 0 80px; }
.page-content h1 { font-size: 38px; margin: 0 0 32px; }
.page-content h2 { font-size: 24px; margin: 32px 0 12px; }

/* KONTAKT */

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}

.contact-item {
	display: flex;
	gap: 16px;
	margin-bottom: 24px;
}

.contact-item > .icon {
	width: 28px;
	height: 28px;
	margin-top: 4px;
	color: var(--vx-muted);
}

.contact-item h2 {
	font-size: 18px;
	margin: 0 0 4px;
}

.contact-item p { margin: 0 0 4px; }
.contact-item a { text-decoration: none; }

/* IMPRESSUM / DATENSCHUTZ */

.legal-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
}

.legal-cols .legal-col > h2:first-child { margin-top: 0; }

.legal-contact-line {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 4px 0;
}

.legal-contact-line a { text-decoration: none; }

.legal-content .kai_edit_text { max-width: 760px; }

/* FOOTER */

.site-footer {
	background: var(--vx-bar);
	margin-top: 0;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1.4fr;
	gap: 48px;
	padding-top: 72px;
	padding-bottom: 72px;
}

.footer-col h3 {
	font-size: 24px;
	margin: 0 0 16px;
}

.footer-logo img {
	width: 120px;
	height: auto;
}

.footer-company address {
	font-style: normal;
	margin: 16px 0;
}

.footer-contact-line { margin: 4px 0; }

.footer-contact-line a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}


.footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-links li { margin: 0 0 8px; }
.footer-links a { color: var(--vx-muted); text-decoration: none; }

.subfooter {
	background: var(--vx-subbar);
	font-size: 15px;
	padding: 14px 0;
}

.subfooter .wrap {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.subfooter p { margin: 0; }

/* Unterste Zeile: Copyright links (Link aufs Impressum), die drei Links rechtsbuendig an
der Inhaltskante - auf einer Linie mit dem Formular darueber. Auf dem Handy untereinander. */
.subfooter-links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin-left: auto;
}

/* netzdienst-Hinweis: Aufbau wie bei blankton (Rakete + Schriftzug, css/styles.css dort,
.footer-credit). Farbe angepasst: blankton nimmt seine Akzentfarbe, bei vilux waere das Gelb
auf dem grauen Grund kaum lesbar - deshalb dunkel wie der Rest der Zeile. Beim Ueberfahren
wird er grau (Regel fuer alle Links am Ende der Datei). */
.footer-credit {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	vertical-align: middle;
	color: var(--vx-text);
	transition: color 0.2s ease;
}
.footer-credit svg {
	width: 16px;
	height: 16px;
}

/* Die Rakete "steigt", sobald sie ins Bild kommt und beim Ueberfahren - Klasse is-rising
setzt js/footer.js (aus blankton uebernommen). */
.footer-credit svg.is-rising {
	animation: footer-rocket-launch 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes footer-rocket-launch {
	0% { transform: translateY(14px) rotate(-10deg) scale(0.85); }
	60% { transform: translateY(-13px) rotate(5deg) scale(1.1); }
	100% { transform: translateY(0) rotate(0deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.footer-credit svg.is-rising {
		animation: none;
	}
}
.subfooter a { text-decoration: none; }

@media (max-width: 900px) {
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.footer-form { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
	.topbar .wrap { justify-content: center; gap: 8px 20px; }
	.contact-grid,
	.legal-cols,
	.footer-grid { grid-template-columns: 1fr; gap: 32px; }
	.footer-grid { padding-top: 48px; padding-bottom: 48px; }
	.page-content { padding: 40px 0 56px; }
	.page-content h1 { font-size: 30px; }
	.home-hero { padding: 48px 0 72px; }
	.home-hero h1 { font-size: 30px; }
}

/* Kontaktseite ohne Formular in der Fusszeile (dort steht das Seitenformular) */
@media (min-width: 721px) {
	.footer-grid--no-form {
		grid-template-columns: 1fr 1fr;
	}
}

/* Karte auf der Kontaktseite: statisches Bild aus OpenStreetMap-Kacheln auf unserem Server,
beim Seitenaufruf entsteht keine Verbindung zu einem Kartendienst. Ausschnitt auf das Gebaeude
Geroldstrasse 27 zentriert (Zoomstufe 19), die Spitze des Markers sitzt deshalb in der
Bildmitte. Der Quellenvermerk unter dem Bild ist Pflicht nach der ODbL. Gleicher Aufbau wie
bei blankton: das Bild in einem eigenen .contact-map-image, damit spaeter ein Knopf
darueber passt, ohne figcaption oder Link anzutasten. */
.contact-map {
	margin: 32px 0 0;
}
.contact-map-image {
	position: relative;
	overflow: hidden;
	line-height: 0;
	border: 1px solid var(--vx-line);
}
/* Das Bild ist ein Link auf dieselbe Google-Maps-Suche wie der Textlink darunter (Feld
karte_google aus den Kontaktdaten, von company-data.js bzw. beim Speichern eingesetzt). Beim
Ueberfahren ein dezenter Hinweis: dunklerer Rahmen und leichter Schatten. Die Quellenangabe
steht bewusst AUSSERHALB dieses Links, mit eigenem Link auf die OSM-Seite. */
.contact-map-image-link {
	display: block;
	cursor: pointer;
}
.contact-map-image-link .contact-map-image {
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.contact-map-image-link:hover .contact-map-image {
	border-color: var(--vx-muted);
	box-shadow: 0 4px 14px rgba(16, 25, 35, 0.18);
}
.contact-map-image-link:focus-visible {
	outline: 2px solid var(--vx-text);
	outline-offset: 3px;
}
.contact-map-image img {
	display: block;
	width: 100%;
	height: auto;
}
.contact-map-marker {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -100%);
	width: 40px;
	height: 40px;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}
.contact-map-marker svg {
	width: 100%;
	height: 100%;
	fill: var(--vx-accent);
	stroke: var(--vx-text);
}
.contact-map figcaption {
	margin-top: 6px;
	font-size: 13px;
	color: var(--vx-muted);
}
.contact-map figcaption a {
	color: var(--vx-muted);
}
.contact-map-link {
	margin: 8px 0 0;
	font-size: 15px;
}
.contact-map-link a {
	color: var(--vx-muted);
}

/* TINYMCE-FORMATE (Optik - Konfiguration in cms/settings.php $tinymcedivoptions style_formats)

Vorgesehene Customization-Hooks fuer individuelles Kunden-Design (die Editor-Formate
"Zitat"/"Info-Box"/"Warnung"/"Button-Link" im TinyMCE-Dropdown setzen ausschliesslich diese
Klassen - hier komplett frei anpassbar, es gibt keine Struktur-/Mechanik-Gegenrolle in
cms/css/system.css, da diese Formate rein statischer Content sind, keine JS-Mechanik haben):
- .quote: Zitat-Block (Randfarbe, Kursivschrift, Textfarbe).
- .infobox / .infobox-info / .infobox-warning: Hervorhebungs-Box, Basis-Look in .infobox,
  Farbvarianten in den beiden Zusatzklassen (info = neutral, warning = Warnhinweis).
- .btn-link: Button-artig gestylter Link im Fliesstext (z.B. ein "Jetzt anrufen"-CTA). */

.quote {
	margin: 20px 0;
	padding: 4px 20px;
	border-left: 4px solid #4a6fa5;
	font-style: italic;
	color: #666;
}

.infobox {
	margin: 20px 0;
	padding: 16px 20px;
	border-radius: 6px;
	border-left: 4px solid #888;
	background: #f7f7f5;
}

.infobox-info {
	background: #eef3fa;
	border-left-color: #4a6fa5;
}

.infobox-warning {
	background: #fdf3e0;
	border-left-color: #d99a2b;
}

.btn-link {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 6px;
	background: #4a6fa5;
	color: #fff;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.btn-link:hover {
	background: #3c5c8a;
}

/* 404-SEITE (404.html, ueber .htaccess/ErrorDocument ausgeliefert - siehe dort) */

.error-404 {
	text-align: center;
	padding: 70px 0 90px;
}

.error-404 .error-404-code {
	/* max-width hebt den 480px-Deckel von ".error-404 p" auf, der sonst auch fuer dieses
	<p> gilt: mit "margin: 0 0 8px" unten stuende die Zahl dann in einem 480px breiten
	Kasten am linken Rand statt mittig. Gleiche Geometrie wie ".error-404 h1". */
	max-width: none;
	font-size: 72px;
	font-weight: 700;
	color: #2f5d50;
	line-height: 1;
	margin: 0 0 8px;
}

.error-404 h1 {
	margin: 0 0 12px;
}

.error-404 p {
	color: #666;
	font-size: 16px;
	max-width: 480px;
	margin: 0 auto 28px;
}

/* Gescopte Umfaerbung statt .btn-link selbst zu aendern - .btn-link ist auch das
TinyMCE-Editor-Format "Button-Link" (siehe cms/settings.php style_formats) und wird damit
potenziell schon in echtem Seiteninhalt verwendet; eine globale Farbaenderung dort waere
eine unbeabsichtigte Nebenwirkung fuer jede Seite, die dieses Format bereits nutzt. Auf
der 404-Seite selbst darf der Button ruhig den Marken-Gruenton statt des generischen
Standard-Blaus (siehe die TINYMCE-FORMATE-Sektion weiter oben in dieser Datei) tragen. */
.error-404 .btn-link {
	background: #2f5d50;
}

.error-404 .btn-link:hover {
	background: #244a3f;
}

/* COOKIE-CONSENT-BANNER (Optik - Struktur/Mechanik in cms/css/system.css, js/cookieconsent.js) */

.cookieconsent_accept, .cookieconsent_embed_accept {
	background: #2f5d50;
}
.cookieconsent_accept:hover, .cookieconsent_embed_accept:hover {
	background: #244a3f;
}
.cookieconsent_reject:hover {
	border-color: #999;
	color: #333;
}

/* POPUP (Optik - Struktur/Mechanik in cms/css/system.css, js/popup.js)

Vorgesehene Customization-Hooks fuer individuelles Kunden-Design (siehe cms/css/
system.css fuer die Struktur/Mechanik dieser Klassen - dort bewusst NICHT ueberschreiben,
Aenderungen gehoeren hierher):
- .popup_overlay: Hintergrund/Abdunkelung hinter dem Dialog (z.B. andere Farbe/Deckkraft).
- .popup_dialog: Look der Dialog-Box selbst (Hintergrundfarbe, Eckenradius, Innenabstand,
  text-align fuer zentrierten statt linksbuendigen Inhalt).
- .popup_close: Farbe des Schliessen-Buttons (Normal-/Hover-Zustand).
- .popup_image: Abstand/Eckenradius des optionalen Bildes.
- .popup_text: Typografie des Textinhalts (Schriftgroesse, Zeilenabstand, Farbe). */

.popup_overlay {
	background: rgba(20,20,20,0.75);
}
.popup_dialog {
	background: #fff;
	border-radius: 6px;
	padding: 40px 30px 30px;
}
.popup_close {
	background: transparent;
	color: #666;
}
.popup_close:hover {
	color: #111;
}
.popup_image {
	margin: 0 0 20px;
	border-radius: 4px;
}
.popup_text {
	font-size: 16px;
	line-height: 1.5;
	color: #333;
}
.popup_text p { margin: 0 0 14px; }
.popup_text p:last-child { margin-bottom: 0; }

/* LIGHTBOX (Optik - Struktur/Mechanik in cms/css/system.css, js/lightbox.js)

Vorgesehene Customization-Hooks fuer individuelles Kunden-Design (siehe cms/css/
system.css fuer die Struktur/Mechanik dieser Klassen - dort bewusst NICHT ueberschreiben,
Aenderungen gehoeren hierher):
- .lightbox_overlay: Abdunkelung hinter dem Grossbild (Farbe/Deckkraft).
- .lightbox_img: Eckenradius des Grossbilds.
- .lightbox_caption: Typografie der Bildunterschrift (Farbe, Schriftgroesse, Abstand nach
  oben). Der Text kommt aus dem alt-Attribut des Thumbnails, das der Dateimanager aus der
  gespeicherten Dateibeschreibung setzt (siehe lightbox.js).
- .lightbox_close / .lightbox_prev / .lightbox_next: Look der drei Bedienknoepfe -
  Hintergrund, Textfarbe, Schriftgroesse des Symbols, Eckenradius, Hover-Zustand. Ihre
  Groesse (44 bzw. 52 px) und ihre Position stehen bewusst NICHT hier, sondern in
  system.css: das ist die Trefferflaeche fuer den Finger, nicht Gestaltung.
- .lightbox_fields / .lightbox_field / .lightbox_field_label / .lightbox_field_value:
  die beschrifteten Felder eines Referenz-Eintrags unter der Bildunterschrift (siehe
  cse/referenz_item.html und renderFields() in js/lightbox.js) - Spaltenaufteilung,
  Typografie, Abstaende. Die Beschriftungen selbst stehen als data-label in der Vorlage,
  nicht hier und nicht im Skript.
Nicht hier, aber von hier aus ueberschreibbar: die Zentrierung der Bildunterschrift
(text-align auf .lightbox_figure) steht in system.css, weil eine linksbuendige Unterschrift
unter einem zentrierten Bild nach Fehler aussieht - system.css wird zuerst geladen. */

.lightbox_overlay {
	background: rgba(20,20,20,0.92);
}

.lightbox_img {
	border-radius: 4px;
}

.lightbox_caption {
	color: #eee;
	font-size: 14px;
	margin-top: 12px;
}

.lightbox_close, .lightbox_prev, .lightbox_next {
	background: rgba(255,255,255,0.1);
	color: #fff;
}

.lightbox_close { font-size: 32px; border-radius: 50%; }
.lightbox_prev, .lightbox_next { font-size: 34px; border-radius: 50%; }

.lightbox_close:hover, .lightbox_prev:hover, .lightbox_next:hover { background: rgba(255,255,255,0.25); }

.lightbox_fields {
	margin-top: 14px;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 14px;
	font-size: 14px;
	line-height: 1.45;
}

.lightbox_field {
	display: contents;
}

.lightbox_field_label {
	color: #999;
}

.lightbox_field_value {
	color: #eee;
}

/* REFERENZ-FELDER AUF DER SEITE (Struktur/Mechanik: cse/referenz_item.html,
js/lightbox.js, body.editing wird von cms.js gesetzt)

Die fuenf Felder eines Referenz-Eintrags gehoeren zum Grossbild, nicht zur Uebersicht: fuer
Besucher stehen sie deshalb im Markup, aber nicht im Bild. Sichtbar werden sie nur im
Bearbeitungsmodus, damit die Redaktion sie direkt am Eintrag pflegen kann - dasselbe
Zwei-Regel-Muster wie .cms_pagemetadescription_bar in cms/css/cms.css, nur hier statt dort,
weil cms.css auf einer Kundenseite gar nicht geladen wird.

Umgeschaltet wird ausschliesslich die SICHTBARKEIT, nie die Existenz: save.php ordnet die
gespeicherten Werte rein ueber die Position im Dokument zu, ein weggelassenes Feld wuerde
alle folgenden Werte um eins verschieben.

Der Titel (.kai_refitem_title) gehoert NICHT zu diesem Block: er steht in der Vorlage
ausserhalb davon und ist deshalb immer sichtbar - auf der Karte als Titel, im Grossbild als
Bildunterschrift (lightbox.js nimmt ihn, sobald er nicht leer ist, sonst die
Dateibeschreibung).

Vorgesehene Customization-Hooks: Abstaende und Typografie der Felder im Bearbeitungsmodus
sowie die Beschriftung ueber ::before - der Text dafuer kommt aus data-label in der
Vorlage; dazu Typografie und Abstand von .kai_refitem_title auf der Karte. */

.kai_refitem_title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	color: #2b2b2b;
	margin-top: 10px;
}

.kai_refitem_fields {
	display: none;
}

body.editing .kai_refitem_fields {
	display: block;
	margin-top: 10px;
}

body.editing .kai_refitem_field {
	font-size: 14px;
	line-height: 1.5;
	min-height: 1.5em;
}

body.editing .kai_refitem_field:before {
	content: attr(data-label) ": ";
	color: #999;
}

@media (max-width: 720px) {
	/* .mainnav-list ist auf schmalen Viewports das aufklappbare Burger-Panel (Sichtbarkeit/
	Positionierung: system.css) - hier nur die Optik dieses Panels. */
	nav.mainnav ul.mainnav-list {
		background: #fff;
		border: 1px solid #eee;
		border-radius: 6px;
		box-shadow: 0 10px 24px rgba(0,0,0,0.09);
		padding: 8px 0;
		margin-top: 10px;
		min-width: 200px;
		gap: 0;
	}
	nav.mainnav ul.mainnav-list a,
	nav.mainnav ul.mainnav-list .mainnav-toggle {
		display: block;
		padding: 10px 20px;
		border-bottom: none;
	}
	nav.mainnav ul.mainnav-list a:hover,
	nav.mainnav ul.mainnav-list a.active,
	nav.mainnav ul.mainnav-list .mainnav-toggle:hover {
		background: #f7f7f5;
		border-bottom: none;
	}
	/* Elternpunkt mit eigenem Link (a) UND Ausklapp-Button (.mainnav-toggle) sind zwei
	getrennte Geschwister-Elemente im selben <li> (siehe menu.js) - ohne diese Regel wuerde
	obiges "display:block" beide untereinander stapeln (der Button dann als eigene,
	fast leere Zeile nur mit dem Pfeil). Per flex-wrap in eine Zeile nebeneinander, das
	Dropdown (flex-basis:100%) faellt dabei automatisch in die naechste Zeile.
	list-style:none/margin:0 gleichen aus, dass dieses <li> jetzt selbst der Flex-
	Container ist statt nur eines seiner Kind-Links. */
	nav.mainnav ul.mainnav-list li.mainnav-item.has-dropdown {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		list-style: none;
		margin: 0;
	}
	nav.mainnav ul.mainnav-list li.mainnav-item.has-dropdown > a {
		flex: 1 1 auto;
	}
	nav.mainnav ul.mainnav-list li.mainnav-item.has-dropdown > .mainnav-toggle {
		flex: 0 0 auto;
		padding: 10px 20px;
	}
	nav.mainnav ul.mainnav-list li.mainnav-item.has-dropdown > ul.mainnav-dropdown {
		flex-basis: 100%;
	}

	/* Untermenue stapelt sich eingerueckt UNTER seinem Ausloeser (position:static kommt
	aus system.css) statt schwebend danebenzuklappen - passt zur bereits senkrechten
	Burger-Liste. */
	nav.mainnav ul.mainnav-dropdown {
		box-shadow: none;
		border: none;
		margin: 0;
		padding-left: 14px;
	}
	nav.mainnav ul.mainnav-dropdown a {
		padding: 9px 20px 9px 14px;
	}
}

/* Ein- und Ausklappen des Untermenues NUR, wenn Skripte laufen - sonst gaebe es keinen Knopf,
der es je wieder aufklappen koennte, und die Unterpunkte waeren ohne JavaScript unerreichbar
(seit 2.25.0, dieselbe Bedingung wie in cms/css/system.css). Ohne Skript stehen sie
eingerueckt offen da. Zwei Zeilen, die in einer bestehenden Installation von Hand nachgezogen
werden koennen: das display:none aus dem Block oben herausnehmen und hierher stellen. */
@media (max-width: 720px) and (scripting: enabled) {
	nav.mainnav ul.mainnav-dropdown {
		display: none;
	}
	nav.mainnav li.mainnav-item.has-dropdown.is_open > ul.mainnav-dropdown {
		display: block;
	}
}

/* TERMINE/KALENDER (Optik - Struktur/Mechanik in cms/css/system.css, js/calendar.js)

Vorgesehene Customization-Hooks fuer individuelles Kunden-Design (siehe cms/css/
system.css fuer die Struktur/Mechanik dieser Klassen - dort bewusst NICHT ueberschreiben,
Aenderungen gehoeren hierher):
- .calendar-widget: Breite/Aussenabstand des gesamten Widgets.
- .calendar-view-button, .calendar-filter (+ .is_active-Varianten): Look der Liste/Monat-
  Umschalter und Kategorie-Filter-Pills (Farben, Rahmen, Radius).
- .calendar-list-item + Sub-Klassen (.calendar-list-date/-day/-time/-title/-location/
  -description): Look eines einzelnen Termin-Eintrags in der Listenansicht (Farben,
  Abstaende, Typografie, text-align fuer zentrierten statt linksbuendigen Inhalt).
- .calendar-dot: Farbe/Groesse der Kategorie-Farbpunkte.
- .calendar-grid-*: Look der Monatsansicht (Raster-Zellen, Wochentags-Kopfzeile, aktiver/
  heutiger Tag).
- .calendar-blackout + Sub-Klassen (.calendar-blackout-dates/-separator/-title/
  -description): Look des Sperrzeit-Bands ("6. Juli bis 16. August - Sommerferien") in der
  Listenansicht und im Tagesbereich unter dem Monatsraster.
- .calendar-grid-day.is_blackout: Markierung der gesperrten Tage im Monatsraster (die
  Klickbarkeit kommt aus cms/css/system.css, hier nur die Optik). */

.calendar-widget {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px;
}

.calendar-toolbar {
	gap: 16px;
}

.calendar-view-button {
	font-size: 13px;
	color: #555;
	padding: 7px 16px;
	border: 1px solid #ddd;
}
.calendar-view-button:first-child { border-radius: 20px 0 0 20px; }
.calendar-view-button:last-child { border-radius: 0 20px 20px 0; margin-left: -1px; }

.calendar-view-button.is_active {
	background: #2f5d50;
	color: #fff;
	border-color: #2f5d50;
}

.calendar-filter {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #555;
	padding: 6px 14px;
	margin: 0 8px 8px 0;
	border: 1px solid #ddd;
	border-radius: 20px;
}

.calendar-filter.is_active {
	background: #f7f7f5;
	color: #2b2b2b;
	border-color: #2b2b2b;
}

.calendar-filter .calendar-dot {
	width: 9px;
	height: 9px;
}

.calendar-body {
	margin-top: 24px;
}

.calendar-empty {
	color: #999;
	font-size: 14px;
}

.calendar-month-heading {
	font-size: 18px;
	margin: 28px 0 14px;
	color: #2b2b2b;
}
.calendar-month-group:first-child .calendar-month-heading {
	margin-top: 0;
}

.calendar-list-item {
	gap: 20px;
	padding: 14px 0;
	border-bottom: 1px solid #eee;
}

.calendar-list-date {
	width: 130px;
	flex-shrink: 0;
}

.calendar-list-day {
	font-size: 13px;
	color: #666;
}

.calendar-list-time {
	font-size: 13px;
	color: #999;
}

.calendar-dot {
	width: 10px;
	height: 10px;
	margin-right: 4px;
	flex-shrink: 0;
}

.calendar-list-title {
	font-size: 16px;
	font-weight: 700;
	color: #2b2b2b;
}

.calendar-list-location {
	font-size: 13px;
	color: #666;
	margin-top: 2px;
}

.calendar-list-description {
	font-size: 14px;
	color: #555;
	margin-top: 6px;
}
.calendar-list-description p:first-child { margin-top: 0; }
.calendar-list-description p:last-child { margin-bottom: 0; }

/* Sperrzeit-Band: Ferien, Feiertage, ausgefallene Termine. Bewusst zurueckhaltend und klar
anders als ein Termin (grauer Grund, Balken links, kein Farbpunkt), damit es nicht als
weiterer Termin gelesen wird. */
.calendar-blackout {
	margin: 14px 0;
	padding: 12px 16px;
	/* Etwas dunkler als #f7f7f5: auf diesem Grund steht der Kalender-Abschnitt der Demo selbst,
	gleiche Farbe liesse das Band nur noch am Balken erkennen. */
	background: #edebe4;
	border-left: 3px solid #b8b5aa;
	border-radius: 4px;
	font-size: 14px;
	color: #555;
}

.calendar-blackout-dates {
	font-weight: 700;
	color: #2b2b2b;
}

.calendar-blackout-description {
	font-size: 13px;
	margin-top: 6px;
}
.calendar-blackout-description p:first-child { margin-top: 0; }
.calendar-blackout-description p:last-child { margin-bottom: 0; }

/* Monatsansicht */

.calendar-grid-header {
	margin-bottom: 16px;
}

.calendar-grid-title {
	font-size: 18px;
	font-weight: 700;
	color: #2b2b2b;
}

.calendar-grid-nav {
	font-size: 22px;
	color: #555;
	padding: 4px 12px;
}
.calendar-grid-nav:hover { color: #2f5d50; }

.calendar-grid-weekdays {
	font-size: 12px;
	color: #999;
	text-align: center;
	margin-bottom: 6px;
}

.calendar-grid-day {
	aspect-ratio: 1;
	border-radius: 8px;
	gap: 4px;
	padding: 6px 0;
}

.calendar-grid-day.has_events:hover {
	background: #f7f7f5;
}

.calendar-grid-daynum {
	font-size: 14px;
	color: #2b2b2b;
}

.calendar-grid-day.is_today .calendar-grid-daynum {
	color: #fff;
	background: #2f5d50;
	border-radius: 50%;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.calendar-grid-day.is_blackout {
	background: repeating-linear-gradient(135deg, #e6e4dc 0, #e6e4dc 4px, transparent 4px, transparent 8px);
}

/* :not(.is_today) - sonst ueberschriebe dieses Grau (gleiche Spezifitaet, steht spaeter) die
weisse Zahl im gruenen Heute-Kreis, sobald heute in einer laufenden Sperrzeit liegt. */
.calendar-grid-day.is_blackout:not(.is_today) .calendar-grid-daynum {
	color: #999;
}

/* Steht nach .is_blackout, damit ein angeklickter gesperrter Tag als ausgewaehlt erkennbar
bleibt. */
.calendar-grid-day.is_selected {
	background: #f0efe9;
}

.calendar-grid-dots {
	gap: 3px;
}

.calendar-grid-dot {
	width: 6px;
	height: 6px;
}

.calendar-grid-dayevents {
	margin-top: 20px;
	border-top: 1px solid #eee;
	padding-top: 10px;
}

@media (max-width: 720px) {
	.calendar-list-item {
		flex-direction: column;
		gap: 4px;
	}
	.calendar-list-date {
		width: auto;
		display: flex;
		gap: 10px;
	}
}

/* NEWS/AKTUELLES (Optik - Struktur/Mechanik in cms/css/system.css, js/content-items.js)

Vorgesehene Customization-Hooks fuer individuelles Kunden-Design (siehe cms/css/
system.css fuer die Struktur/Mechanik dieser Klassen - dort bewusst NICHT ueberschreiben,
Aenderungen gehoeren hierher):
- .content-items-widget: Breite/Aussenabstand des Grids, Abstand zwischen den Karten.
- .content-items-card-image: Look des Karten-Vorschaubilds (Seitenverhaeltnis, Radius,
  Abstand, Platzhalter-Hintergrund).
- .content-items-card-date, .content-items-card-title, .content-items-card-teaser: Look/
  Typografie der Karten-Textelemente (Farben, Groessen, text-align fuer zentrierten statt
  linksbuendigen Inhalt).
- .content-items-empty: Look des "Noch keine Eintraege"-Hinweistexts. */

.content-items-widget {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px;
	gap: 28px;
}

.content-items-empty {
	color: #999;
	font-size: 14px;
}

.content-items-card-image {
	aspect-ratio: 16 / 9;
	border-radius: 4px;
	margin-bottom: 14px;
	background: #f0efe9;
}

/* .kai_contentitem_image (singular) is the detail page's own hero image (see
cse/_template_content_item.html) - distinct from .content-items-card-image (plural) above,
which is only the small teaser-card thumbnail on the overview page. Had no rule at all until
now (unlike every other image slot here), so it rendered unconstrained at its raw
width/height HTML attributes - same width:100%/max-height/object-fit treatment as .hero img,
since it plays the identical "full-width banner image at the top of a page" role. */
.kai_contentitem_image {
	width: 100%;
	max-height: 420px;
	object-fit: cover;
	object-position: center;
	display: block;
	margin-bottom: 24px;
}

.content-items-card-date {
	font-size: 13px;
	color: #999;
}

.content-items-card-title {
	font-size: 18px;
	font-weight: 700;
	color: #2b2b2b;
	margin: 6px 0 8px;
}

.content-items-card-teaser {
	font-size: 14px;
	color: #555;
}

.content-items-card:hover .content-items-card-title {
	color: #2f5d50;
}

/* PREISLISTE (Optik - Struktur/Mechanik in cms/css/system.css, js/pricelist.js)

Vorgesehene Customization-Hooks fuer individuelles Kunden-Design (siehe cms/css/
system.css fuer die Struktur/Mechanik dieser Klassen - dort bewusst NICHT ueberschreiben,
Aenderungen gehoeren hierher):
- .pricelist-widget: Breite/Aussenabstand des gesamten Widgets.
- .pricelist-toc: Look des Inhaltsverzeichnisses (Ausrichtung/Abstaende der Links, z.B.
  horizontale Pills statt vertikaler Liste).
- .pricelist-category-title: Look der Kategorie-Ueberschriften.
- .pricelist-table (+ .pricelist-th-*/.pricelist-td-*): Look der Tabelle (Rahmen,
  Zebra-Streifen, Ausrichtung der Preis-Spalte, text-align fuer zentrierten statt
  linksbuendigen Inhalt).
- .pricelist-empty: Look des "noch keine Eintraege"-Hinweistexts. */

.pricelist-widget {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px;
}

.pricelist-toc {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin-bottom: 32px;
	padding: 16px 20px;
	background: #f7f7f5;
	border-radius: 8px;
}
.pricelist-toc a {
	color: #2f5d50;
	text-decoration: none;
	font-size: 14px;
}
.pricelist-toc a:hover {
	text-decoration: underline;
}

.pricelist-category {
	margin-bottom: 40px;
}

.pricelist-category-title {
	font-size: 22px;
	margin: 0 0 16px;
	padding-top: 8px; /* etwas Puffer ueber dem Anker-Sprungziel, damit die Ueberschrift beim Anspringen nicht direkt am oberen Rand klebt */
}

.pricelist-table {
	font-size: 15px;
}
.pricelist-table th, .pricelist-table td {
	padding: 10px 14px;
	text-align: left;
	border-bottom: 1px solid #eee;
}
.pricelist-table th {
	font-size: 13px;
	color: #666;
	font-weight: 700;
	border-bottom: 2px solid #ddd;
}
/* Zebra-Streifen + Hover: nth-child zaehlt pro <tbody>, und jede Kategorie hat ihre eigene
<table>/<tbody> (siehe renderCategoryHtml() in pricelist.js/renderPricelistCategoryHtml() in
pricelisthelper.php) - das Muster faengt dadurch bei jeder Kategorie automatisch wieder bei
Zeile 1 an, statt kategorieuebergreifend durchzulaufen. Farben wie bei .pricelist-toc/
.calendar-grid-day.has_events:hover (#f7f7f5) - Zebra-Ton bewusst noch einen Hauch heller
(#fafaf8), damit der Hover-Zustand sich sowohl von ungeraden als auch von geraden Zeilen
sichtbar abhebt. transition wie btn-link/.category-card (background-color 0.15s ease). */
.pricelist-table tbody tr:nth-child(even) {
	background: #fafaf8;
}
.pricelist-table tbody tr {
	transition: background-color 0.15s ease;
}
.pricelist-table tbody tr:hover {
	background: #f7f7f5;
}
/* Praefix ".pricelist-table" ist hier notwendig, nicht nur Stil: ohne ihn hat diese Regel
weniger Spezifitaet (0,1,0) als ".pricelist-table th, .pricelist-table td" oben (0,1,1, Klasse
+ Element) und wird von dessen "text-align: left" ueberschrieben, unabhaengig von der
Reihenfolge im Stylesheet - genau das war vorher der Fall (per getComputedStyle() bestaetigter,
bereits laenger bestehender Bug: die Preis-Spalte war trotz dieser Regel nie tatsaechlich
rechtsbuendig). */
.pricelist-table .pricelist-th-price, .pricelist-table .pricelist-td-price {
	text-align: right;
	white-space: nowrap;
}
.pricelist-td-description {
	font-weight: 600;
}
.pricelist-td-note {
	color: #666;
	font-size: 14px;
}

.pricelist-empty {
	color: #999;
	font-size: 14px;
}

/* MENÜKARTEN (Optik - Struktur/Mechanik: kai_section_wrap-Mechanismus in cms.js) */
.menu_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.menu_item {
  position: relative;
   padding-top: 56px;
}

.menu_item_badge {
  position: absolute;
  top: 0;
  left: 0;
  background: #1a1a1a;
  color: #fff;
  font-size: 12px;
  padding: 1px 14px;
  border-radius: 4px;
}

.menu_item_badge:empty {
  display: none;
}

.menu_item_head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  border-bottom: 1px dashed #999;
  padding-bottom: 6px;
  margin-bottom: 10px;
}

.menu_item_title {
  margin: 0;
  font-size: 18px;
}

.menu_item_price {
  white-space: nowrap;
  font-size: 14px;
  color: #666;
}

.menu_item_desc {
  color: #555;
  margin-bottom: 10px;
}

.menu_item_image {
  border-radius: 4px;
  object-fit: cover;
  object-position: center;
}

.menu_item_image[src$="spacer-lightgrey.jpg"] {
  display: none;
}

/* KATEGORIE-KARTEN (Optik - Struktur/Mechanik: kai_section_wrap-Mechanismus,
siehe cms/js/cms.js und Hilfe-Sektion im CMS)

Vorgesehene Customization-Hooks fuer individuelles Kunden-Design:
- .category-cards-wrap: Grid-Layout der Kartenuebersicht (Spaltenzahl, Abstand).
- .category-card: Look der einzelnen Karte (Hintergrund, Rahmen, Eckenradius).
- .category-card .kai_edit_text p: Innenabstand des Kartentexts.
- .category-card .kai_edit_text i: Icon-Groesse/-Farbe.
- .category-card .kai_edit_text a: Verlinkung als block-level Flaeche - macht die ganze
  Karte klickbar, wenn Icon+Text beim Verlinken gemeinsam markiert wurden (siehe
  Kommentar in cse/category_card.html). Falls nur der Text verlinkt wird, bleibt nur
  dieser klickbar - das Card-Padding sorgt optisch trotzdem fuer eine grosszuegige
  Klickflaeche. */

.category-cards-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
}

.category-card {
  border-radius: 8px;
  background: #f7f7f5;
  overflow: hidden;
}

.category-card .kai_edit_text p {
  margin: 0;
}

.category-card .kai_edit_text i {
  font-size: 32px;
  color: #2f5d50;
  display: block;
  margin-bottom: 12px;
}

.category-card .kai_edit_text a {
  display: block;
  padding: 28px 16px;
  text-align: center;
  color: #2b2b2b;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.15s ease;
}

.category-card .kai_edit_text a:hover {
  background: #ececea;
}

/* KONTAKTFORMULAR (Optik - Struktur/Mechanik in cms/css/system.css, js/contactform.js)

Vorgesehene Customization-Hooks fuer individuelles Kunden-Design:
- .contact-form: Breite/Abstand des Formulars als Ganzes.
- .contact-form-field: Abstand zwischen den einzelnen Feldern.
- .contact-form label: Beschriftungs-Optik.
- .contact-form input, .contact-form textarea: Eingabefeld-Optik (Rahmen, Radius, Fokus).
- .contact-form button: Absende-Button.
- .contact-form-message.success / .contact-form-message.error: Rueckmeldung nach dem
  Absenden (die Klasse wird von contactform.js je nach Ergebnis gesetzt). */

.contact-form {
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-form-field-checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
}

.contact-form label {
  font-weight: 600;
  font-size: 14px;
}

.contact-form input,
.contact-form textarea {
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font: inherit;
}

.contact-form textarea {
  min-height: 120px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #2f5d50;
}

.contact-form button {
  align-self: flex-start;
  padding: 10px 24px;
  border: none;
  border-radius: 4px;
  background: #2f5d50;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.contact-form button:disabled {
  opacity: 0.6;
  cursor: default;
}

.contact-form-message {
  font-size: 14px;
}

.contact-form-message.success {
  color: #2f5d50;
}

.contact-form-message.error {
  color: #c0392b;
}

/* VILUX — Anpassungen an der Engine-Optik (Preisliste, Kontaktformular, 404).
Steht bewusst am Ende: gleiche Selektoren wie die Starter-Bloecke oben, spaeter geladen
gewinnt. Die Starter-Bloecke selbst bleiben unveraendert, damit ein Vergleich mit der
Vorlage einfach bleibt. */

/* Preisliste: Kopfzeile hellblau und Zebra wie die alte TablePress-Tabelle */
.page-content .pricelist-widget {
	max-width: none;
	padding: 0;
}
.pricelist-toc {
	background: var(--vx-bar);
	border-radius: 0;
}
.pricelist-toc a {
	color: var(--vx-text);
}
.pricelist-category-title {
	font-size: 22px;
}
.pricelist-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}
.pricelist-table th {
	background: var(--vx-table-head);
	color: #111;
	font-size: 16px;
	border-bottom: none;
}
.pricelist-table th, .pricelist-table td {
	padding: 6px 10px;
}
.pricelist-table tbody tr:nth-child(even) {
	background: var(--vx-table-zebra);
}
.pricelist-table tbody tr:hover {
	background: #f0f0f0;
}
.pricelist-td-description {
	font-weight: 400;
}
.pricelist-td-link a {
	color: var(--vx-muted);
}
.pricelist-footnote {
	font-size: 15px;
	color: var(--vx-muted);
}
.pricelist-print-button {
	background: var(--vx-accent);
	color: #000;
	border: none;
	padding: 10px 20px;
	font: inherit;
	font-size: 15px;
	cursor: pointer;
	margin-bottom: 24px;
}
.pricelist-print-button:hover {
	background: var(--vx-accent-hover);
}
.pricelist-note {
	margin: 0 0 40px;
	max-width: 760px;
}

/* Kontaktformular: Felder ohne Rundung, gelber Knopf wie bisher */
.contact-form {
	max-width: none;
}
.contact-form input,
.contact-form textarea {
	background: #fff;
	border: 1px solid var(--vx-line);
	border-radius: 0;
	font: inherit;
}
.contact-form input:focus,
.contact-form textarea:focus {
	border-color: var(--vx-muted);
	outline: none;
}
.contact-form button {
	background: var(--vx-accent);
	color: #000;
	border: none;
	border-radius: 0;
	font: inherit;
	font-weight: 500;
	align-self: flex-start;
}
.contact-form button:hover {
	background: var(--vx-accent-hover);
}
/* Die Starter-Datei setzt 600 - diesen Schnitt liefern wir nicht mit (siehe @font-face). */
.contact-form label {
	font-weight: 500;
}
.contact-form-hint {
	font-size: 14px;
	color: var(--vx-muted);
	margin: 0;
}

/* 404 */
.error-404 .error-404-code {
	color: var(--vx-text);
}
.error-404 .btn-link {
	background: var(--vx-accent);
	color: #000;
}
.error-404 .btn-link:hover {
	background: var(--vx-accent-hover);
}

/* Jede Kategorie ist eine eigene Tabelle - ohne feste Breiten stehen die Spalten in jeder
Kategorie anders. Die Beschreibung nimmt den Rest. */
.pricelist-table {
	table-layout: fixed;
}
.pricelist-table .pricelist-th-note { width: 20%; }
.pricelist-table .pricelist-th-link { width: 16%; }
.pricelist-table .pricelist-th-quantity { width: 10%; }
.pricelist-table .pricelist-th-price { width: 16%; }
.pricelist-table td {
	overflow-wrap: anywhere;
}

/* Platz fuer den Knopf «Zum Seitenanfang» (system.css: fest 20 px vom Rand, 44 px gross).
Die Links der untersten Zeile stehen buendig an der Inhaltskante; der Knopf deckt sie am
Seitenende nur ab, wenn diese Kante naeher als 64 px am Fensterrand liegt - das ist unter
etwa 1180 px Fensterbreite der Fall (Inhalt 1100 px breit, 24 px Rand). Dort bekommt die
Zeile unten 76 px Luft (20 + 44 + 12), in der der Knopf am Seitenende steht. Die Links
selbst werden dafuer NICHT eingerueckt. */
@media (max-width: 1180px) {
	.subfooter {
		padding-bottom: 76px;
	}
}
/* Schmale Bildschirme: Eine Tabelle mit bis zu fuenf Spalten passt nicht auf 375 px. Jede
Zeile wird zu einem kleinen Raster - Beschreibung und Preis oben, Notiz, Anzahl und Link klein
darunter. Aus dem Tabellenkopf bleiben Beschreibung und Preis, damit der Spaltentitel der
Liste («CHF 1 Tag», «Dauer») sichtbar bleibt. */
@media (max-width: 600px) {
	.pricelist-table,
	.pricelist-table thead,
	.pricelist-table tbody {
		display: block;
	}
	.pricelist-table tr {
		display: grid;
		grid-template-columns: auto auto 1fr auto;
		column-gap: 12px;
		align-items: baseline;
		border-bottom: 1px solid #eee;
	}
	.pricelist-table th, .pricelist-table td {
		width: auto;
		border-bottom: none;
		padding: 6px 8px;
	}
	.pricelist-table .pricelist-th-description,
	.pricelist-table .pricelist-td-description {
		grid-row: 1;
		grid-column: 1 / 4;
	}
	.pricelist-table .pricelist-th-price,
	.pricelist-table .pricelist-td-price {
		grid-row: 1;
		grid-column: 4;
	}
	.pricelist-table .pricelist-th-note,
	.pricelist-table .pricelist-th-quantity,
	.pricelist-table .pricelist-th-link {
		display: none;
	}
	.pricelist-table .pricelist-td-note,
	.pricelist-table .pricelist-td-quantity,
	.pricelist-table .pricelist-td-link {
		grid-row: 2;
		font-size: 14px;
		padding-top: 0;
	}
	.pricelist-table .pricelist-td-note { grid-column: 1; }
	.pricelist-table .pricelist-td-quantity { grid-column: 2; }
	.pricelist-table .pricelist-td-link { grid-column: 3 / 5; text-align: right; }
	.pricelist-table .pricelist-td-quantity:not(:empty)::before {
		content: 'Anzahl: ';
		color: var(--vx-muted);
	}
	.pricelist-table td:empty {
		padding: 0;
	}
	.pricelist-table thead tr {
		background: var(--vx-table-head);
	}
}

/* LINKS BEIM UEBERFAHREN - Entscheid Fox vom 30.09.2026: auf der ganzen Website nie ein
Unterstrich, nur ein Farbwechsel. Dunkle Links werden grau, graue Links werden dunkel.
Links, die im Ruhezustand unterstrichen sind (Fliesstext, «Infos hier»), verlieren den
Strich beim Ueberfahren. Steht am Ende, damit die Regel gleich spezifische Starter-Regeln
(z.B. ".pricelist-toc a:hover") ueberstimmt. .btn-link ist ausgenommen: das ist ein Knopf,
dessen Hover die Hintergrundfarbe aendert, die Schrift muss darauf lesbar bleiben. */
a:not(.btn-link):hover {
	color: var(--vx-muted);
	text-decoration: none;
}
nav.mainnav a:hover,
nav.mainnav .mainnav-toggle:hover,
.footer-links a:hover,
.pricelist-td-link a:hover,
.contact-form-hint a:hover,
.contact-map figcaption a:hover,
.contact-map-link a:hover {
	color: var(--vx-text);
}
/* Startseite: Topbar und oberste Menueebene stehen auf dem Farbverlauf, dort waere Grau
kaum zu sehen. Das Burger-Panel darunter hat einen weissen Grund und bleibt bei der
Regel oben. */
body.page-home .topbar a.topbar-link:hover {
	color: #fff;
}
@media (min-width: 721px) {
	body.page-home nav.mainnav ul.mainnav-list > li > a:hover,
	body.page-home nav.mainnav ul.mainnav-list > li > .mainnav-toggle:hover {
		color: #fff;
	}
}

/* 404-SEITE MIT HINTERGRUNDBILD - im CMS austauschbar.
Der Motor kennt fuer austauschbare Bilder nur .kai_edit_image (ein <img>), keinen
austauschbaren CSS-Hintergrund. Deshalb liegt ein gewoehnliches Bild mit object-fit: cover
hinter dem Text, darueber eine dunkle Ueberlagerung fuer die Lesbarkeit.
Im Bearbeitungsmodus legt cms.js direkt hinter das Bild eine klickbare Flaeche
(.cms_editableimage_overlay, "Neues Bild hochladen" / "Aus Dateimanager waehlen"). Damit sie
trotz des Texts darueber erreichbar bleibt, lassen Textblock und Ueberlagerung Klicks durch
(pointer-events: none); nur der Knopf "Zur Startseite" faengt sie selbst ab. */
.error-page {
	position: relative;
	overflow: hidden;
	min-height: 60vh;
	display: flex;
	align-items: center;
}
.error-page-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.error-page-bg picture,
.error-page-bg .error-page-image {
	display: block;
	width: 100%;
	height: 100%;
}
.error-page-bg .error-page-image {
	object-fit: cover;
	object-position: center;
}
.error-page-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	/* 60 % halten die weisse Schrift auch ueber einem rein weissen Foto bei 4.65 : 1 (Minimum
	fuer normalen Text 4.5 : 1), ganz gleich, welches Bild eingesetzt wird. Mit 55 % waeren es
	im selben Fall nur 3.96 : 1. */
	background: rgba(16, 25, 35, 0.6);
	pointer-events: none;
}
.error-page .error-404 {
	position: relative;
	z-index: 1;
	width: 100%;
	color: #fff;
	pointer-events: none;
}
.error-page .error-404 a {
	pointer-events: auto;
}
.error-page .error-404 h1,
.error-page .error-404 .error-404-code,
.error-page .error-404 p {
	color: #fff;
}
.error-page .error-404 h1,
.error-page .error-404 .error-404-code {
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}