/* 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. */

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	color: #2b2b2b;
	line-height: 1.6;
	background: #fff;
}

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

/* TOP BAR (Firmendaten-Beispiel 1) */

.topbar {
	background: #2f5d50;
	color: #eaf3f0;
	font-size: 13px;
	padding: 6px 0;
}

.topbar .wrap {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

.topbar a.company-data {
	color: #eaf3f0;
	text-decoration: none;
}

.topbar a.company-data:hover {
	text-decoration: underline;
}

/* HEADER / NAV */

header {
	border-bottom: 1px solid #eee;
	padding: 18px 0;
}

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

.logo {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: #2b2b2b;
	text-decoration: none;
}

/* Nur oberhalb des Mobile-Breakpoints (siehe @media (max-width: 720px) weiter unten) -
bewusst NICHT unbedingt gesetzt: dieselbe Selektor-Spezifitaet wie die
Sichtbarkeits-Mechanik in system.css (nav.mainnav ul.mainnav-list) wuerde sonst bei
gleichem Spezifitaetswert allein durch die spaetere Ladereihenfolge von styles.css
gewinnen und "display:flex" auch auf schmalen Viewports erzwingen - der Button liesse
sich dann zwar anklicken, das Panel bliebe aber unsichtbar bzw. (wie hier) immer offen. */
@media (min-width: 721px) {
	nav.mainnav ul.mainnav-list {
		display: flex;
		align-items: center;
		gap: 28px;
	}
}

nav.mainnav a,
nav.mainnav .mainnav-toggle {
	color: #555;
	text-decoration: none;
	font-size: 15px;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	cursor: pointer;
}

/* .mainnav-toggle ist jetzt ein eigenstaendiger <button> NEBEN dem Label-Link (nicht mehr
der Link selbst, siehe menu.js renderItem()) - reine Browser-Button-Defaults (Rahmen/
Hintergrund/Schrift) zuruecksetzen, damit er wie zuvor als reiner Pfeil erscheint. */
nav.mainnav .mainnav-toggle {
	background: transparent;
	border-top: none;
	border-left: none;
	border-right: none;
	font-family: inherit;
	padding: 6px 4px;
}

nav.mainnav a:hover,
nav.mainnav a.active,
nav.mainnav .mainnav-toggle:hover {
	color: #2b2b2b;
	border-bottom-color: #2f5d50;
}

/* Kleiner Pfeil als Hinweis auf ein Untermenue - reines CSS, kein zusaetzliches Icon-Markup.
Der Button selbst hat keinen Text mehr (nur noch dieses Pseudo-Element), daher kein
margin-left mehr noetig (frueher: Abstand zum vorangehenden Label-Text im selben Element). */
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;
	border-radius: 6px;
	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 (siehe system.css:
das Dropdown klappt per :hover auf .mainnav-item.has-dropdown auf/zu - :hover bleibt nur
aktiv, solange die Maus ueber .mainnav-item selbst oder einem seiner Nachfahren steht).
Ohne diese Bruecke verlaesst die Maus beim geraden Herunterbewegen vom Hauptmenuepunkt
zu einem Untermenuepunkt kurzzeitig JEDE hoverbare Flaeche (weder mehr ueber Label/Pfeil
noch schon ueber dem sichtbaren Dropdown-Kasten) - :hover faellt weg, das Dropdown klappt
per CSS sofort wieder zu, BEVOR der Klick auf den Untermenuepunkt ueberhaupt registriert
werden kann. Nur der explizite Klick auf den Pfeil-Button (setzt .is_open statisch, siehe
menu.js) blieb davon unberuehrt, weil er nicht von :hover abhaengt. Die Bruecke ist als
Nachfahre von .mainnav-dropdown selbst Teil von dessen Hover-Kette, transparent und
veraendert daher nichts am sichtbaren Erscheinungsbild. */
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: 14px;
}

nav.mainnav ul.mainnav-dropdown a:hover,
nav.mainnav ul.mainnav-dropdown a.active {
	background: #f7f7f5;
	color: #2f5d50;
}

/* Klassisches 3-Balken-Icon, per JS als drei <span> ins Burger-Button-Markup gesetzt
(cms/js/menu.js). display bewusst NICHT hier gesetzt (nur Groesse/Anordnung) - ob der
Button ueberhaupt sichtbar ist (display:none auf breiten, display:flex auf schmalen
Viewports), steuert allein system.css; wuerde hier zusaetzlich ein unbedingtes
display:flex stehen, ueberschriebe das (spaeter geladen) dessen display:none auf dem
Desktop, der Button bliebe faelschlich immer sichtbar. */
.mainnav-burger {
	width: 26px;
	height: 20px;
	flex-direction: column;
	justify-content: space-between;
}
.mainnav-burger span {
	display: block;
	height: 2px;
	background: #2b2b2b;
	border-radius: 1px;
}

/* SECTIONS */

section { padding: 50px 0; }
section.alt { background: #f7f7f5; }
h2 { font-size: 26px; margin: 0 0 24px; }

/* GALLERY */

.gallery_item img { width: 100%; border-radius: 6px; display: block; object-fit: cover; object-position: center; }

/* .kai_lightbox_image (cms/js/lightbox.js) is a general, reusable "fixed-size thumbnail with a
   click-to-enlarge lightbox" pattern (see the CMS's own "Hilfe" panel), always paired with
   .kai_edit_image data-type="thumb_and_big_image" and explicit width/height attributes -
   a fixed-dimension image box by definition. Every current use of it (team.html/
   ueber-uns.html's member photos, gallery_item.html) happens to also sit inside .card or
   .gallery_item, both already covered above - so this rule doesn't change how any existing
   page renders today. Added anyway as its own direct, explicit rule (same fix as
   fix/image-object-fit-cover, 2026-08-12, applied here) rather than relying on that
   incidental ancestor coverage - a standalone .kai_lightbox_image outside of either wrapper
   (a single portrait/photo, not in a grid) would otherwise still get the browser's default
   object-fit: fill and distort any image that doesn't already exactly match its box. */
.kai_lightbox_image { object-fit: cover; object-position: center; }

/* FOOTER (Firmendaten-Beispiel 3) */

footer {
	border-top: 1px solid #eee;
	padding: 30px 0;
	color: #666;
	font-size: 13px;
}
footer .wrap {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}
footer a.company-data { color: #666; text-decoration: none; }
footer a.company-data:hover { text-decoration: underline; }

/* 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 vier 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.

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. */

.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;
		display: none;
	}
	nav.mainnav li.mainnav-item.has-dropdown.is_open > ul.mainnav-dropdown {
		display: block;
	}
	nav.mainnav ul.mainnav-dropdown a {
		padding: 9px 20px 9px 14px;
	}
}

/* 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-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; }

/* 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_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;
}


/* ==========================================================================================
   NETZDIENST - Kopfzeile, Fusszeile, Schriften und Hilfeartikel

   Angehaengt an das Starter-Stylesheet. Alles hier haengt an body.nd-site oder an eigenen
   Klassen (nd-*, help-*), damit die Starter-Regeln fuer header, footer, body und h2 die
   netzdienst-Seiten nicht erreichen und umgekehrt die Starter-Seiten unveraendert bleiben.

   Werte gemessen an netzdienst.ch (WordPress/Bricks) am 16.09.2026:
   - Schrift Open Sans 300/400/700/900 (Dateien aus wp-content/uploads nach fonts/)
   - Grundschrift 18px, Zeilenhoehe 1.4, Text #000
   - Kopf- und Fussbereich #212121, Navigation #d6e5e9, Fusszeilenlinks #cddfe4
   - Akzent #1e9ae2 = Sparten-Farbe Hosting (Flaechen, Linien, Links auf dunklem Grund)
   - Innenabstand 60px seitlich (Desktop)

   Links auf hellem Grund: --nd-link #1673aa, gleicher Farbton wie der Akzent, dunkler.
   Kontrast auf Weiss 5,2 : 1, auf den getoenten Flaechen (Sprungliste, Warnkasten) ueber
   4,6 : 1. #1e9ae2 selbst erreicht auf Weiss nur 3,1 : 1. Im Artikeltext sind Links
   zusaetzlich unterstrichen, weil sich #1673aa von schwarzem Text nur um 4 : 1 abhebt.

   Anpassungspunkte: die Variablen in body.nd-site.
   ========================================================================================== */

@font-face { font-family: "Open Sans"; font-weight: 300; font-display: swap; src: url("../fonts/OpenSans-Light.ttf") format("truetype"); }
@font-face { font-family: "Open Sans"; font-weight: 400; font-display: swap; src: url("../fonts/OpenSans-Regular.ttf") format("truetype"); }
@font-face { font-family: "Open Sans"; font-weight: 700; font-display: swap; src: url("../fonts/OpenSans-Bold.ttf") format("truetype"); }
@font-face { font-family: "Open Sans"; font-weight: 900; font-display: swap; src: url("../fonts/OpenSans-ExtraBold.ttf") format("truetype"); }

body.nd-site {
	--nd-dark: #212121;
	--nd-nav: #d6e5e9;
	--nd-footer-link: #cddfe4;
	--nd-accent: #1e9ae2;
	--nd-link: #1673aa;
	--nd-accent-soft: #eaf5fc;
	--nd-text: #000;
	--nd-muted: #5c5c5c;
	--nd-line: #e3e3e3;
	--nd-gutter: 60px;
	--nd-measure: 760px;
	--nd-step-indent: 56px;
	--nd-max: 1400px;
	--nd-header-h: 120px;
	/* Flaeche von Kopf- und Fusszeile. Firmenseiten einer Sparte setzen ihre Farbe (siehe
	   FIRMENSEITEN), alle anderen Seiten bleiben dunkel. */
	--nd-sparte: var(--nd-dark);

	font-family: "Open Sans", Arial, sans-serif;
	font-size: 18px;
	line-height: 1.4;
	color: var(--nd-text);
	background: #fff;
}

.nd-site a { color: var(--nd-link); }

.nd-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ------------------------------------------------------------------------------------------
   KOPFZEILE
   Das Menue rendert cms/js/menu.js aus menu.json (Panel «Menü») in nav.mainnav. Sichtbarkeit
   und Burger-Mechanik liegen in cms/css/system.css (Umschaltpunkt 720px), hier nur die Optik.
   Alle Regeln haengen an .nd-header, damit sie die Starter-Regeln fuer nav.mainnav schlagen
   und die Starter-Seiten nicht erreichen.
   ------------------------------------------------------------------------------------------ */

.nd-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--nd-sparte);
	border-bottom: none;
	padding: 30px var(--nd-gutter);
}

/* Im Editor nicht kleben - die CMS-Werkzeugleiste liegt oben. */
body.editing .nd-header { position: static; }

.nd-header__inner {
	max-width: var(--nd-max);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
}

.nd-logo { display: block; line-height: 0; flex: none; }
.nd-logo img { display: block; height: 60px; width: auto; }

@media (min-width: 721px) {
	.nd-header nav.mainnav ul.mainnav-list { gap: 30px; }
}

.nd-header nav.mainnav a,
.nd-header nav.mainnav .mainnav-toggle {
	color: var(--nd-nav);
	font-size: 20px;
	font-weight: 700;
	line-height: 20px;
	padding: 15px 0;
	border-bottom: none;
	text-decoration: none;
}

.nd-header nav.mainnav a:hover,
.nd-header nav.mainnav a:focus-visible,
.nd-header nav.mainnav a.active,
.nd-header nav.mainnav .mainnav-toggle:hover { color: #fff; }

.nd-header nav.mainnav li.mainnav-item.has-dropdown { display: flex; align-items: center; }

.nd-header nav.mainnav .mainnav-toggle { padding: 15px 0 15px 6px; }

.nd-header nav.mainnav .mainnav-item.has-dropdown > .mainnav-toggle::after {
	content: "";
	display: block;
	width: 7px;
	height: 7px;
	margin-top: -5px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

.nd-header nav.mainnav ul.mainnav-dropdown {
	left: auto;
	right: 0;
	min-width: 195px;
	margin-top: 0;
	padding: 4px 18px 16px;
	background: var(--nd-sparte);
	border: none;
	border-radius: 0;
	box-shadow: none;
}

.nd-header nav.mainnav ul.mainnav-dropdown a {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	padding: 12px 0 0;
	white-space: nowrap;
}

.nd-header nav.mainnav ul.mainnav-dropdown a:hover,
.nd-header nav.mainnav ul.mainnav-dropdown a.active { background: none; color: #fff; }

.nd-header .mainnav-burger { width: 28px; height: 20px; }
.nd-header .mainnav-burger span { background: var(--nd-nav); }

/* Schnappschuss ohne JavaScript (von der Engine beim Speichern des Menues geschrieben,
   klassenlos <ul><li><a>): als Zeile darstellen, Untermenue ausblenden. */
.nd-header nav.mainnav > ul:not(.mainnav-list) {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 30px;
}
.nd-header nav.mainnav > ul:not(.mainnav-list) ul { display: none; }

@media (max-width: 900px) {
	body.nd-site { --nd-gutter: 20px; --nd-header-h: 76px; }
	.nd-header { padding: 16px var(--nd-gutter); }
	.nd-logo img { height: 44px; }
	.nd-header nav.mainnav a,
	.nd-header nav.mainnav .mainnav-toggle { font-size: 18px; }
	@media (min-width: 721px) {
		.nd-header nav.mainnav ul.mainnav-list { gap: 22px; }
	}
}

/* Burger-Panel (bis 720px): dunkles Panel unter der Kopfzeile. Ohne JavaScript steht statt
   des Burgers der Schnappschuss als eigene Zeile unter dem Logo. */
@media (max-width: 720px) {
	.nd-header__inner { flex-wrap: wrap; row-gap: 8px; }
	.nd-header nav.mainnav:has(> ul:not(.mainnav-list)) { flex-basis: 100%; }
	.nd-header nav.mainnav > ul:not(.mainnav-list) { gap: 0 20px; }
	.nd-header nav.mainnav > ul:not(.mainnav-list) a { font-size: 17px; padding: 6px 0; }
	.nd-header nav.mainnav ul.mainnav-list {
		background: var(--nd-sparte);
		border: none;
		border-radius: 0;
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
		margin-top: 16px;
		padding: 8px 20px 16px;
		min-width: 240px;
	}
	.nd-header nav.mainnav ul.mainnav-list a {
		display: block;
		padding: 12px 0;
		font-size: 18px;
	}
	.nd-header nav.mainnav ul.mainnav-list a:hover,
	.nd-header nav.mainnav ul.mainnav-list a.active,
	.nd-header nav.mainnav ul.mainnav-list .mainnav-toggle:hover { background: none; color: #fff; }
	.nd-header nav.mainnav ul.mainnav-list li.mainnav-item.has-dropdown { flex-wrap: wrap; justify-content: space-between; }
	.nd-header nav.mainnav ul.mainnav-list li.mainnav-item.has-dropdown > .mainnav-toggle { padding: 12px 4px 12px 16px; }
	.nd-header nav.mainnav ul.mainnav-dropdown {
		flex-basis: 100%;
		padding: 0 0 8px 16px;
		min-width: 0;
		box-shadow: none;
	}
	.nd-header nav.mainnav ul.mainnav-dropdown a { font-size: 16px; padding: 8px 0; }
}

/* ------------------------------------------------------------------------------------------
   HILFEARTIKEL - Seitenraster
   Quelltext-Reihenfolge: Brotkrumen, Artikel, Seitenleiste. Ab 1120px steht die Seitenleiste
   links neben dem Artikel, darunter folgt sie ihm.

   Zwei Breiten im Artikel: Text laeuft hoechstens --nd-measure breit (Lesbarkeit), Screenshots
   nutzen die ganze Artikelspalte und ragen ueber die Texteinrueckung der Schritte hinaus.
   Ziel: Screenshots mindestens rund 780px breit, wo das Fenster es zulaesst - so gross zeigte
   WordPress die Bilder, und in dieser Groesse sind die Beschriftungen der Retina-Screenshots
   lesbar. Deshalb faellt die Seitenleiste schon unter 1120px unter den Artikel.
   ------------------------------------------------------------------------------------------ */

.help-page { padding: 40px var(--nd-gutter) 90px; }

.help-page__inner {
	max-width: var(--nd-max);
	margin: 0 auto;
}

.help-columns {
	display: grid;
	grid-template-columns: 270px minmax(0, 1fr);
	grid-template-areas: "sidebar article";
	gap: 60px;
	align-items: start;
}

.help-article { grid-area: article; min-width: 0; }
/* stretch: die Seitenleiste muss so hoch sein wie der Artikel, sonst hat die klebende
   Artikelliste darin keinen Weg. */
.help-sidebar { grid-area: sidebar; align-self: stretch; }

/* 1120-1279px: schmalere Seitenleiste, Artikelspalte bleibt mindestens 780px breit. */
@media (min-width: 1120px) and (max-width: 1279px) {
	body.nd-site { --nd-gutter: 40px; }
	.help-columns { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
}

@media (min-width: 901px) and (max-width: 1119px) {
	body.nd-site { --nd-gutter: 40px; }
}

@media (max-width: 1119px) {
	.help-page { padding-top: 24px; padding-bottom: 60px; }
	.help-columns {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "article" "sidebar";
		gap: 48px;
	}
}

/* Brotkrumen (erzeugt) */

.help-breadcrumb { margin: 0 0 36px; font-size: 15px; color: var(--nd-muted); }
.help-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.help-breadcrumb li + li::before { content: "›"; margin: 0 10px; color: #9a9a9a; }
.nd-site .help-breadcrumb a { text-decoration: none; }
.nd-site .help-breadcrumb a:hover { text-decoration: underline; }

@media (max-width: 900px) {
	.help-breadcrumb { margin-bottom: 24px; }
}

/* Seitenleiste (erzeugt) */

.help-catnav {
	position: sticky;
	top: calc(var(--nd-header-h) + 24px);
	max-height: calc(100vh - var(--nd-header-h) - 48px);
	overflow-y: auto;
	font-size: 16px;
	line-height: 1.35;
}

body.editing .help-catnav { position: static; max-height: none; }

.help-catnav__title {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.nd-site .help-catnav__title a { color: var(--nd-text); text-decoration: none; }

.help-catnav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 1px solid var(--nd-line);
}

.nd-site .help-catnav li a {
	display: block;
	margin-left: -1px;
	padding: 7px 12px 7px 16px;
	border-left: 3px solid transparent;
	color: #333;
	text-decoration: none;
}

.nd-site .help-catnav li a:hover { color: var(--nd-link); border-left-color: var(--nd-line); }

.nd-site .help-catnav li.is-current a {
	border-left-color: var(--nd-accent);
	background: var(--nd-accent-soft);
	color: var(--nd-text);
	font-weight: 700;
}

.help-catnav__all { margin: 16px 0 0 16px; font-size: 15px; }

@media (max-width: 1119px) {
	.help-catnav { position: static; max-height: none; overflow: visible; }
	.help-sidebar { border-top: 1px solid var(--nd-line); padding-top: 32px; }
}

/* Titel und Sprungliste (erzeugt) */

.nd-site .help-article__title {
	max-width: var(--nd-measure);
	font-size: 34px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.2px;
	margin: 0 0 24px;
	overflow-wrap: break-word;
	hyphens: auto;
}

.help-toc {
	max-width: var(--nd-measure);
	margin: 0 0 48px;
	padding: 18px 24px 20px;
	background: #f5f7f8;
	border-left: 4px solid var(--nd-accent);
}

.help-toc__title {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.help-toc ol { margin: 0; padding: 0 0 0 22px; }
.help-toc li { margin: 4px 0; }
.nd-site .help-toc a { text-decoration: none; }
.nd-site .help-toc a:hover { text-decoration: underline; }

/* Hinweiskasten ueber dem Artikeltext (Fassung 15). Erzeugt aus redaktion.json, steht NICHT im
   kai_edit_text - er gehoert dem Generator und ueberlebt jede Bearbeitung im Backend. Zwei Arten:
   warnung (etwas stimmt mit dem Beschriebenen nicht mehr) und empfehlung (es gibt einen besseren
   Weg). Gleiches Markup, andere Farbe; die Farbe traegt der Rand, die Schrift bleibt schwarz -
   damit steht der Kontrast nie zur Debatte. Die Sparten-Farbe wird bewusst NICHT verwendet:
   die Online Hilfe ist durchgehend orange, ein oranger Kasten waere Dekoration statt Signal. */
.help-hinweis {
	max-width: var(--nd-measure);
	margin: 0 0 40px;
	padding: 18px 24px 20px;
	border-left: 4px solid var(--nd-dark);
	background: #f5f7f8;
}

.help-hinweis--warnung { border-left-color: #b45309; background: #fdf4e8; }
.help-hinweis--empfehlung { border-left-color: var(--nd-accent); background: var(--nd-accent-soft); }

.nd-site .help-hinweis__titel {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
}

.help-hinweis__text { margin: 0; }
.help-hinweis__weg { margin: 12px 0 0; font-weight: 700; }
.help-hinweis__weg a::before { content: "\2192\00a0"; }

@media (max-width: 900px) {
	.help-hinweis { margin-bottom: 30px; padding: 14px 18px 16px; }
}

@media (max-width: 900px) {
	.nd-site .help-article__title { font-size: 28px; }
	.help-toc { margin-bottom: 36px; padding: 14px 18px 16px; }
}

/* ------------------------------------------------------------------------------------------
   HILFEARTIKEL - Artikeltext (redaktionell)
   Diese Regeln gelten fuer alles, was im Editor entsteht. Deshalb ohne Zusatzklassen:
   jede ol ist eine Schrittfolge, jedes Bild nutzt die Spaltenbreite bis zu seiner eigenen
   Groesse (nie hochskaliert, nie breiter als die Spalte - wichtig fuer die Retina-Bilder
   ueber 2000px).
   ------------------------------------------------------------------------------------------ */

.help-article-body { overflow-wrap: break-word; }

.help-article-body p { margin: 0 0 16px; }

.nd-site .help-article-body a { text-decoration: underline; text-underline-offset: 2px; }

.nd-site .help-article-body h2 {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.2px;
	margin: 64px 0 24px;
	padding-top: 32px;
	border-top: 1px solid var(--nd-line);
	scroll-margin-top: calc(var(--nd-header-h) + 16px);
}

.nd-site .help-article-body h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.nd-site .help-article-body h3 {
	font-size: 20px;
	font-weight: 700;
	margin: 36px 0 12px;
	scroll-margin-top: calc(var(--nd-header-h) + 16px);
}

.help-article-body img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 1px solid #d5d5d5;
	border-radius: 3px;
}

/* Die Engine umschliesst Bilder mit WebP-Geschwister mit <picture data-cms-webp="auto">
   (beim Einfuegen im Editor und beim Speichern) - alle Bildregeln gelten fuer beide Formen. */
.help-article-body picture { display: block; }

.help-article-body li > p:last-child,
.help-article-body li > p:only-child { margin-bottom: 0; }

/* Textbreite: Absaetze, Listen und Hinweiskaesten laufen hoechstens --nd-measure breit,
   im Schritt abzueglich der Einrueckung. Absaetze mit einem Bild sind davon ausgenommen. */
.help-article-body p,
.help-article-body ul,
.nd-site .help-article-body .infobox { max-width: var(--nd-measure); }
.help-article-body li > p { max-width: calc(var(--nd-measure) - var(--nd-step-indent)); }
.help-article-body p:has(> picture),
.help-article-body p:has(> img),
.help-article-body p:has(> a > picture),
.help-article-body p:has(> a > img) { max-width: none; }

/* Bild im Schritt: Luft zum Text darueber, und nach links ueber die Einrueckung hinaus bis an
   den Rand der Artikelspalte - so wird der Screenshot um die Einrueckung breiter als der Text.
   Der Link auf die Originaldatei bleibt zusaetzlich (volle Groesse, Zoom auf dem Telefon). */
.help-article-body li picture,
.help-article-body li p > img,
.help-article-body li p > a > img { margin-top: 20px; }
.help-article-body li picture img { margin-top: 0; }
.help-article-body a:has(> picture),
.help-article-body a:has(> img) { display: block; cursor: zoom-in; }

.help-article-body li > p > picture,
.help-article-body li > p > a:has(> picture),
.help-article-body li > p > a:has(> img) { margin-left: calc(-1 * var(--nd-step-indent)); }
.help-article-body li > p > img {
	margin-left: calc(-1 * var(--nd-step-indent));
	max-width: calc(100% + var(--nd-step-indent));
}

/* Schritte */

.help-article-body ol {
	list-style: none;
	counter-reset: nd-step;
	margin: 0 0 40px;
	padding: 0;
}

.help-article-body ol > li {
	counter-increment: nd-step;
	position: relative;
	padding: 0 0 0 var(--nd-step-indent);
	margin: 0;
}

.help-article-body ol > li + li {
	margin-top: 40px;
	padding-top: 40px;
	border-top: 1px solid var(--nd-line);
}

.help-article-body ol > li::before {
	content: counter(nd-step);
	position: absolute;
	left: 0;
	top: -3px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--nd-dark);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	line-height: 36px;
	text-align: center;
}

.help-article-body ol > li + li::before { top: 37px; }

.help-article-body ul { margin: 0 0 16px; padding-left: 24px; }

/* Tabellen im Artikeltext (Editor-Schaltflaeche «Tabelle», migriert aus WordPress-Tabellenbloecken).
   Schlicht: Linie unter jeder Zeile, Kopfzeile fett mit dunkler Linie, keine Streifen, kein Rahmen.
   Linksbuendig in allen Spalten - die Zentrierung der Werte-Spalten aus WordPress wird nicht
   uebernommen (der Generator entfernt die Ausrichtungsklassen). Zwei Tabellen hintereinander
   (Posteingang/Postausgang) behalten durch margin-bottom ihren Abstand. */
.help-article-body table {
	width: 100%;
	max-width: var(--nd-measure);
	margin: 0 0 40px;
	border-collapse: collapse;
	font-size: 17px;
	line-height: 1.4;
}

.help-article-body th,
.help-article-body td {
	padding: 10px 20px 10px 0;
	border-bottom: 1px solid var(--nd-line);
	text-align: left;
	vertical-align: top;
	hyphens: auto;
}

/* Nur die erste Spalte (Bezeichnungen) darf an beliebiger Stelle umbrechen: «Kontakte/Adressbuch
   importieren/exportieren» machte die Tabelle auf dem Telefon sonst breiter als die Spalte
   (390 px: 402 px). Fuer alle Spalten gesetzt, quetscht der Browser die kurzen Werte-Spalten
   («Horde», «nein») auf wenige Pixel. */
.help-article-body th:first-child,
.help-article-body td:first-child { overflow-wrap: anywhere; }

.help-article-body th {
	font-weight: 700;
	border-bottom: 2px solid var(--nd-dark);
}

.help-article-body th:last-child,
.help-article-body td:last-child { padding-right: 0; }

/* Hinweiskaesten aus dem Editor (Formate Info-Box / Warnung) */
.nd-site .help-article-body .infobox { margin: 0 0 40px; font-size: 17px; }
.nd-site .help-article-body .infobox p:last-child { margin-bottom: 0; }

.help-meta {
	margin: 56px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--nd-line);
	font-size: 15px;
	color: var(--nd-muted);
}

/* Schmale Bildschirme: kleinere Nummer, kleinere Einrueckung. */
@media (max-width: 600px) {
	body.nd-site { --nd-step-indent: 42px; }
	.help-article-body ol > li::before {
		top: -1px;
		width: 30px;
		height: 30px;
		line-height: 30px;
		font-size: 15px;
	}
	.help-article-body ol > li + li { margin-top: 32px; padding-top: 32px; }
	.help-article-body ol > li + li::before { top: 31px; }
	.nd-site .help-article-body h2 { font-size: 23px; margin-top: 48px; padding-top: 24px; }
	.help-article-body table { font-size: 16px; }
	.help-article-body th,
	.help-article-body td { padding-right: 12px; }
}

/* ------------------------------------------------------------------------------------------
   HILFE - KATEGORIESEITEN UND UEBERSICHT (erzeugt, Fassung 6)
   Beide Seiten entstehen aus help-articles.json. Kategorieseite: Raster der Artikelseiten
   (Seitenleiste links mit Suchfeld und allen Kategorien, rechts die Artikelliste mit Kurztext).
   Uebersicht: drei Zeilen zu je drei Feldern wie auf netzdienst.ch/online-hilfe - Titel
   ungekuerzt, Kategorien als leichte Karten mit redaktionellem Kurztext.
   ------------------------------------------------------------------------------------------ */

/* Suchfeld - vorerst ohne Funktion, schickt an die kuenftige Seite «suchen» (?q=). */
.help-search { margin: 0; }
.help-search__label {
	display: block;
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.help-search__feld { display: flex; gap: 8px; }
.help-search__eingabe {
	flex: 1 1 auto;
	min-width: 0;
	padding: 9px 12px;
	border: 1px solid #949494;
	border-radius: 3px;
	background: #fff;
	color: var(--nd-text);
	font: inherit;
	font-size: 16px;
	line-height: 1.3;
}
.help-search__eingabe:focus { outline: 2px solid var(--nd-accent); outline-offset: 1px; border-color: var(--nd-accent); }
.help-search__knopf {
	flex: 0 0 auto;
	padding: 9px 14px;
	border: 0;
	border-radius: 3px;
	background: var(--nd-dark);
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	cursor: pointer;
}
.help-search__knopf:hover { background: #000; }
.help-search__knopf:focus-visible { outline: 2px solid var(--nd-accent); outline-offset: 2px; }

.help-sidebar__kopf { margin: 0 0 36px; }

/* Kategorieseite: Einleitung, Anzahl, Artikelliste */
.help-kategorie__intro {
	max-width: var(--nd-measure);
	margin: 0 0 6px;
	font-size: 20px;
	line-height: 1.45;
	color: #333;
}
.help-kategorie__anzahl { margin: 0 0 28px; font-size: 15px; color: var(--nd-muted); }

.help-artikelliste {
	list-style: none;
	max-width: var(--nd-measure);
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--nd-line);
}
.help-artikelliste li { padding: 16px 0 17px; border-bottom: 1px solid var(--nd-line); }
.nd-site .help-artikelliste__titel {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--nd-link);
	text-decoration: none;
}
.nd-site .help-artikelliste__titel:hover { text-decoration: underline; }
.help-artikelliste__text { display: block; margin-top: 4px; font-size: 16px; line-height: 1.4; color: var(--nd-muted); }

/* Uebersicht */
.nd-site .help-uebersicht__titel { margin-bottom: 44px; }

.help-uebersicht__zeile {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px 56px;
	align-items: start;
}
.help-uebersicht__zeile + .help-uebersicht__zeile {
	margin-top: 56px;
	padding-top: 56px;
	border-top: 1px solid var(--nd-line);
}

/* section: der Starter gibt jedem <section> 50px Innenabstand oben und unten - hier nicht. */
.help-karte,
.help-kategorie { padding: 0; }
.help-karte { min-width: 0; }
.nd-site .help-karte__titel { margin: 0 0 8px; font-size: 22px; font-weight: 700; line-height: 1.25; }
.nd-site .help-karte__titel a { color: var(--nd-text); text-decoration: none; }
.nd-site .help-karte__titel a:hover { color: var(--nd-link); text-decoration: underline; }
.help-karte__text { margin: 0 0 16px; font-size: 16px; line-height: 1.45; color: var(--nd-muted); }

/* Titel ungekuerzt: umbrechen statt abschneiden (auf netzdienst.ch nach vier Woertern gekuerzt). */
.help-karte__liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--nd-line); }
.help-karte__liste li { border-bottom: 1px solid var(--nd-line); }
.nd-site .help-karte__liste a {
	display: block;
	padding: 9px 0;
	font-size: 16px;
	line-height: 1.35;
	color: #333;
	text-decoration: none;
	overflow-wrap: break-word;
}
.nd-site .help-karte__liste a:hover { color: var(--nd-link); text-decoration: underline; }
.help-karte__alle { margin: 12px 0 0; font-size: 15px; }
.nd-site .help-karte__alle a { text-decoration: none; }
.nd-site .help-karte__alle a:hover { text-decoration: underline; }

/* Suchfeld auf der Uebersicht: Kasten im Stil der Sprungliste */
.help-karte--suche {
	padding: 18px 24px 22px;
	background: #f5f7f8;
	border-left: 4px solid var(--nd-accent);
}
.nd-site .help-karte--suche .help-karte__titel { font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; }

@media (max-width: 1119px) {
	.help-uebersicht__zeile { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
}

/* Telefon: eine Spalte, Suchfeld zuoberst statt nach zwei langen Listen. */
@media (max-width: 700px) {
	.help-uebersicht__zeile { grid-template-columns: minmax(0, 1fr); }
	.help-uebersicht__zeile + .help-uebersicht__zeile { margin-top: 40px; padding-top: 40px; }
	.help-karte--suche { order: -1; }
	.nd-site .help-uebersicht__titel { margin-bottom: 28px; }
}

/* ------------------------------------------------------------------------------------------
   FIRMENSEITEN (erzeugt von firmenseiten/erzeuge-firmenseiten.py, Fassung 15)
   index, hosting, telefonie, webdesign, support, support-anfragen, fernwartung, impressum,
   suchen, bestellung. Seitenaufbau: <main class="nd-page"> mit Baendern (.nd-hero, .nd-band).

   Vier Sparten-Farben (Fox, 17.9.): Hosting blau #1e9ae2, Telefonie rot #d20134 (beide von
   netzdienst.ch), Webdesign gruen #15803d und Support orange #dd6b00 (neu). Sie faerben Kopf,
   Fuss und farbige Baender der Sparten-Seiten und die Kacheln der Startseite. Support-Orange gilt
   fuer den ganzen Bereich: support, support-anfragen, fernwartung und die Online Hilfe (die
   Seitenschale hilfe-vorlage/outlook-2016-2019.html traegt nd-sparte-support). Weisse Schrift:
   Rot 5,5 : 1, Gruen 5,0 : 1, Orange 3,4 : 1, Blau 3,1 : 1 - AA verlangt 4,5 : 1 fuer normalen
   Text; Blau wie auf netzdienst.ch bewusst uebernommen, Orange liegt knapp darueber. Navigation
   und Fusszeilenlinks werden auf Sparten-Flaechen weiss (die Grautoene #d6e5e9, #cddfe4 laegen
   auf Blau bei 2,4 : 1).

   Die Starter-Regel section { padding: 50px 0 } und h2 { margin } werden hier ueberschrieben.
   ------------------------------------------------------------------------------------------ */

body.nd-sparte-hosting { --nd-sparte: #1e9ae2; }
body.nd-sparte-telefonie { --nd-sparte: #d20134; }
body.nd-sparte-webdesign { --nd-sparte: #15803d; }
body.nd-sparte-support { --nd-sparte: #dd6b00; }
body.nd-sparte-hosting,
body.nd-sparte-telefonie,
body.nd-sparte-webdesign,
body.nd-sparte-support { --nd-nav: #fff; --nd-footer-link: #fff; }
/* Die vier Farben auch ausserhalb der Sparten-Seiten (Kacheln der Startseite). */
body.nd-site { --nd-farbe-hosting: #1e9ae2; --nd-farbe-telefonie: #d20134; --nd-farbe-webdesign: #15803d; --nd-farbe-support: #dd6b00; }

.nd-page { display: block; }

.nd-site .nd-hero {
	background: var(--nd-sparte);
	color: #fff;
	padding: 80px var(--nd-gutter) 72px;
}

.nd-hero__inner,
.nd-band__inner { max-width: var(--nd-max); margin: 0 auto; }
.nd-hero--mitte { text-align: center; }
.nd-site .nd-hero--mitte .nd-hero__titel { margin-left: auto; margin-right: auto; }

.nd-site .nd-hero__titel {
	margin: 0;
	max-width: 18em;
	font-size: 60px;
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -0.5px;
	color: #fff;
	overflow-wrap: break-word;
	hyphens: auto;
}

.nd-site .nd-band { padding: 80px var(--nd-gutter) 90px; }
.nd-site .nd-band--seite { padding-top: 48px; }
.nd-band--sparte { background: var(--nd-sparte); color: #fff; }
.nd-band--dunkel { background: var(--nd-dark); color: #fff; }
/* Hero und farbiges Band derselben Farbe gehen ineinander ueber - kein doppelter Abstand. */
.nd-site .nd-hero + .nd-band--sparte { padding-top: 0; }
.nd-band--mitte { text-align: center; }
.nd-site .nd-band--sparte a:not(.nd-knopf),
.nd-site .nd-band--dunkel a:not(.nd-knopf) { color: #fff; }

/* Einleitung eines Bandes: Ueberschrift und Absatz aus dem Editor */
.nd-einleitung { max-width: var(--nd-measure); margin: 0 0 44px; }
.nd-band--mitte .nd-einleitung,
.nd-einleitung--mitte { max-width: 900px; margin-left: auto; margin-right: auto; text-align: center; }
.nd-site .nd-einleitung h1,
.nd-site .nd-einleitung h2,
.nd-site .nd-text h1 {
	margin: 0 0 16px;
	font-size: 38px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.2px;
	overflow-wrap: break-word;
	hyphens: auto;
}
.nd-einleitung p { margin: 0; }
.nd-einleitung p + p { margin-top: 12px; }
.nd-einleitung > :last-child { margin-bottom: 0; }

/* Laufender Text (Fernwartung, Impressum, Datenschutz, AGB) */
.nd-text { max-width: var(--nd-measure); }
.nd-site .nd-text h2 { margin: 40px 0 12px; font-size: 26px; line-height: 1.25; }
.nd-text p { margin: 0 0 16px; }
.nd-site .nd-text a { text-decoration: underline; text-underline-offset: 2px; }
.nd-text ol { margin: 0 0 16px; padding-left: 1.4em; }
.nd-text ol li { margin: 0 0 10px; padding-left: 6px; }
/* Aufzaehlungen in den Rechtstexten (verbotene Inhalte, Ressourcen) und die Zeile mit dem Stand. */
.nd-text ul.nd-rechtsliste { margin: 0 0 16px; padding-left: 1.4em; }
.nd-text ul.nd-rechtsliste li { margin: 0 0 10px; padding-left: 6px; }
.nd-text .nd-stand { margin-top: 40px; color: var(--nd-muted); }

/* Knopf */
.nd-site a.nd-knopf,
.nd-site .contact-form button.nd-knopf {
	display: inline-block;
	padding: 14px 28px;
	border: 0;
	border-radius: 3px;
	background: var(--nd-dark);
	color: #fff;
	font: inherit;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.nd-site a.nd-knopf:hover,
.nd-site .contact-form button.nd-knopf:hover { background: #000; }
.nd-site a.nd-knopf--hell { background: #fff; color: var(--nd-text); }
.nd-site a.nd-knopf--hell:hover { background: #f0f0f0; }
.nd-site .nd-knopf:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--nd-dark); }

.nd-mitte { max-width: var(--nd-measure); margin: 0 auto 32px; }
.nd-mitte p { margin: 0; }

/* Hosting - Angebote
   Farbfamilie wie auf netzdienst.ch: hellblaue Karten (#bbe1f6), die mittlere dunkelblau
   (#0f4d71), Knoepfe dunkelblau (#156c9e). Kontraste: Text #0b2e44 auf Hellblau 10,2 : 1,
   Weiss auf #0f4d71 9,1 : 1, Weiss auf dem Knopf 5,7 : 1. */
.nd-angebote {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	--nd-karte: #bbe1f6;
	--nd-karte-text: #0b2e44;
	--nd-karte-linie: rgba(11, 46, 68, 0.18);
	--nd-karte-knopf: #156c9e;
	--nd-karte-knopf-hover: #0f4d71;
	--nd-karte-knopf-text: #fff;
	--nd-karte-haken: #156c9e;
}
.nd-angebot {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 40px 32px 32px;
	border-radius: 6px;
	background: var(--nd-karte);
	color: var(--nd-karte-text);
}
.nd-angebot--hervorgehoben {
	--nd-karte: #0f4d71;
	--nd-karte-text: #fff;
	--nd-karte-linie: rgba(255, 255, 255, 0.25);
	--nd-karte-knopf: #bbe1f6;
	--nd-karte-knopf-hover: #fff;
	--nd-karte-knopf-text: #0b2e44;
	--nd-karte-haken: #bbe1f6;
}
.nd-site .nd-angebot__markierung {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 6px 14px;
	border-radius: 0 6px 0 6px;
	background: #bbe1f6;
	color: #0b2e44;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.nd-angebot__text { flex: 1 1 auto; }
/* Name in Grossbuchstaben wie auf netzdienst.ch - im Text steht «Mini», passend zur Auswahl im Bestellformular. */
.nd-site .nd-angebot__name { margin: 0 0 14px; font-size: 22px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: inherit; }
.nd-angebot__preis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 0 0 18px; }
.nd-angebot__waehrung { font-size: 18px; font-weight: 700; }
.nd-angebot__betrag { font-size: 50px; font-weight: 900; line-height: 1; letter-spacing: -0.5px; }
.nd-angebot__zeitraum { flex-basis: 100%; margin-top: 4px; font-size: 15px; opacity: 0.85; }
.nd-angebot__beschreibung { margin: 0 0 18px; font-weight: 700; }
.nd-angebot__merkmale { list-style: none; margin: 0 0 28px; padding: 0; border-top: 1px solid var(--nd-karte-linie); }
.nd-angebot__merkmale li { position: relative; padding: 10px 0 10px 30px; border-bottom: 1px solid var(--nd-karte-linie); }
.nd-angebot__merkmale li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 17px;
	width: 13px;
	height: 7px;
	border-left: 3px solid var(--nd-karte-haken);
	border-bottom: 3px solid var(--nd-karte-haken);
	transform: rotate(-45deg);
}
.nd-angebot__aktion { margin: 0; }
.nd-site .nd-angebot a.nd-knopf { display: block; text-align: center; background: var(--nd-karte-knopf); color: var(--nd-karte-knopf-text); }
.nd-site .nd-angebot a.nd-knopf:hover { background: var(--nd-karte-knopf-hover); }
.nd-site .nd-angebot a.nd-knopf:focus-visible { outline: 3px solid var(--nd-karte-text); outline-offset: 2px; box-shadow: none; }

/* Hosting - Highlights */
.nd-highlights {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px 40px;
}
.nd-highlight { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 18px; align-items: start; }
.nd-highlight__icon {
	display: block;
	width: 52px;
	height: 52px;
	padding: 13px;
	border-radius: 50%;
	background: var(--nd-accent-soft);
	color: var(--nd-link);
}
.nd-site .nd-highlight__titel { margin: 12px 0 8px; font-size: 20px; line-height: 1.25; }
.nd-highlight__text p { margin: 0; font-size: 17px; }

/* Telefonie, Webdesign - Logos */
.nd-logo-gross { margin: 0 0 36px; }
.nd-logo-gross__bild { display: block; width: min(440px, 100%); height: auto; margin: 0 auto; }
.nd-logo-gross__bild--wordpress { width: min(360px, 100%); }
.nd-partner {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 30px 50px;
}
.nd-partner a { display: block; line-height: 0; }
.nd-partner__bild { display: block; width: auto; height: 90px; max-width: 100%; object-fit: contain; }

/* Support - drei Wege */
.nd-wege {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
}
.nd-weg { position: relative; padding: 32px 30px; border: 1px solid var(--nd-line); border-radius: 6px; }
.nd-weg:hover { border-color: #bdbdbd; }
.nd-weg__icon { display: block; width: 44px; height: 44px; margin: 0 0 16px; color: var(--nd-link); }
.nd-site .nd-weg__titel { margin: 0 0 8px; font-size: 22px; line-height: 1.25; }
.nd-site .nd-weg__titel a { color: var(--nd-text); text-decoration: none; }
/* Die ganze Karte ist klickbar; der Link bleibt der Titel. */
.nd-site .nd-weg__titel a::after { content: ""; position: absolute; inset: 0; }
.nd-site .nd-weg__titel a:hover { text-decoration: underline; }
.nd-weg__text p { margin: 0; font-size: 17px; }
body.editing .nd-weg__titel a::after { display: none; }

/* Formulare (support-anfragen, bestellung) - KAI contact-form, Starter-Regeln ueberschrieben */
.nd-site .contact-form.nd-formular { display: block; max-width: var(--nd-measure); }
.nd-formular__pflicht { margin: 0 0 28px; font-size: 15px; color: var(--nd-muted); }
.nd-formular__gruppe { min-width: 0; margin: 0 0 36px; padding: 0; border: 0; }
.nd-site .nd-formular__titel { margin: 0 0 18px; padding: 0; font-size: 26px; font-weight: 700; line-height: 1.25; }
.nd-feld { margin: 0 0 20px; }
fieldset.nd-feld { min-width: 0; padding: 0; border: 0; }
.nd-site .contact-form .nd-feld__label { display: block; margin: 0 0 6px; padding: 0; font-size: 16px; font-weight: 700; }
.nd-site .contact-form .nd-feld input:not([type="radio"]),
.nd-site .contact-form .nd-feld select,
.nd-site .contact-form .nd-feld textarea {
	display: block;
	width: 100%;
	padding: 11px 12px;
	border: 1px solid #8a8a8a;
	border-radius: 3px;
	background: #fff;
	color: var(--nd-text);
	font: inherit;
	font-size: 17px;
	line-height: 1.3;
}
.nd-site .contact-form .nd-feld textarea { min-height: 150px; resize: vertical; }
.nd-site .contact-form .nd-feld input:focus,
.nd-site .contact-form .nd-feld select:focus,
.nd-site .contact-form .nd-feld textarea:focus { outline: 2px solid var(--nd-link); outline-offset: 1px; border-color: var(--nd-link); }
.nd-feld__hinweis { margin: 6px 0 0; font-size: 15px; color: var(--nd-muted); }
.nd-site .contact-form .nd-auswahl { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; font-size: 17px; font-weight: 400; }
.nd-site .contact-form .nd-auswahl input { flex: none; width: 20px; height: 20px; margin: 0; padding: 0; accent-color: var(--nd-dark); }
.nd-formular__aktion { margin: 8px 0 0; }
/* Pflicht-Checkbox am Schluss des Formulars: Kenntnisnahme der Datenschutzerklaerung (siehe Generator).
   Kein flex: das Kaestchen sitzt auf der ersten Zeile, mehrzeiliger Text laeuft buendig daneben um. */
/* overflow schliesst das schwebende Kaestchen ein - sonst ragt es bei einzeiliger
   Beschriftung um ein paar Pixel in die Knopfzeile. */
.nd-datenschutz { max-width: var(--nd-measure); margin: 24px 0 16px; overflow: hidden; font-size: 17px; }
.nd-site .contact-form .nd-datenschutz input[type="checkbox"] { float: left; width: 20px; height: 20px; margin: 2px 10px 0 0; padding: 0; accent-color: var(--nd-dark); }
.nd-site .contact-form .nd-datenschutz input[type="checkbox"]:focus { outline: 2px solid var(--nd-link); outline-offset: 1px; }
/* font-weight 400 gegen .contact-form label (600) aus dem Starter: ein Saetzchen, keine Feldbeschriftung. */
.nd-site .contact-form .nd-datenschutz__label { display: block; overflow: hidden; font-size: 17px; font-weight: 400; line-height: 1.5; cursor: pointer; }
.nd-site .nd-datenschutz a { text-decoration: underline; text-underline-offset: 2px; }
.nd-site .contact-form-message { margin-top: 20px; font-size: 17px; font-weight: 700; }
.nd-site .contact-form-message:empty { display: none; }
.nd-site .contact-form-message.success { color: #1b6e3a; }
.nd-site .contact-form-message.error { color: #b3261e; }

/* 404 - die Fehlerseite (Fassung 14). Sie wird unter BELIEBIGEN Adressen ausgeliefert, auch unter
   /kategorie/gibtsnicht/ - deshalb traegt sie <base href="/"> im Kopf und ihr Suchformular einen
   absoluten Pfad. Beides steht im Generator, nicht hier.
   Der Astronaut dreht sich einmal in 24 Sekunden. So langsam, dass man die Bewegung eher spuert
   als sieht - schneller lenkt er von der Suche ab, die auf dieser Seite die Hauptsache ist. */
.nd-404 { max-width: 760px; margin: 0 auto; text-align: center; }
.nd-404__astro { width: 180px; height: auto; margin: 0 auto 24px; display: block; animation: nd-404-drehen 24s linear infinite; }
@keyframes nd-404-drehen { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.nd-site .nd-404__code { margin: 0; font-size: 72px; font-weight: 800; line-height: 1; letter-spacing: -2px; color: var(--nd-muted); }
.nd-site .nd-404__titel { margin: 8px 0 16px; font-size: 34px; line-height: 1.2; }
.nd-404__text { max-width: var(--nd-measure); margin: 0 auto 32px; font-size: 18px; }
/* Das Suchfeld ist die Hauptsache dieser Seite - schmaler als die Textbreite, damit es als ein
   Element wahrgenommen wird, und mit Luft darunter vor den Bereichslinks. */
.nd-404 .nd-suche { max-width: 520px; margin: 0 auto 44px; text-align: left; }
.nd-site .nd-404 .nd-404__wege-titel { margin: 0 auto 16px; font-size: 17px; color: var(--nd-muted); }
.nd-404__wege { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; }
.nd-site .nd-404__wege a {
	display: inline-block;
	padding: 10px 18px;
	border: 2px solid var(--nd-dark);
	border-radius: 4px;
	color: var(--nd-dark);
	text-decoration: none;
	font-weight: 700;
}
.nd-site .nd-404__wege a:hover,
.nd-site .nd-404__wege a:focus-visible { background: var(--nd-dark); color: #fff; }

/* Wie beim Burger und den Startseiten-Kacheln: keine Bewegung, wenn der Besucher das so
   eingestellt hat. Der Astronaut steht dann einfach still. */
@media (prefers-reduced-motion: reduce) {
	.nd-404__astro { animation: none; }
}

@media (max-width: 640px) {
	.nd-404__astro { width: 130px; }
	.nd-site .nd-404__code { font-size: 56px; }
	.nd-site .nd-404__titel { font-size: 28px; }
}

/* Suchen (Fassung 12) - Seitensuche der Engine (cms/js/search.js, KAI-CMS 2.13.0). Das Skript fuellt
   die Vorlage in suchen.html; die Trefferliste nimmt den Aufbau der Artikelliste der Kategorieseiten
   (.help-artikelliste) und ergaenzt nur den Textausschnitt. <mark> umschliesst die Suchbegriffe im
   Ausschnitt - hellblau aus der Akzentfamilie statt Browser-Gelb. Die Statuszeile ist leer, bis das
   Skript sie fuellt; ohne JavaScript steht dort der <noscript>-Hinweis. */
.nd-suche { max-width: var(--nd-measure); }
.nd-suche__ergebnisse { max-width: var(--nd-measure); margin-top: 40px; }
.nd-suche__status { margin: 0 0 16px; font-size: 17px; font-weight: 700; }
.nd-suche__status:empty { display: none; }
.nd-suche__hinweis { max-width: var(--nd-measure); margin: 40px 0 0; font-size: 17px; }
.nd-treffer__auszug { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--nd-text); }
.nd-treffer__auszug mark {
	background: var(--nd-accent-soft);
	color: inherit;
	font-weight: 700;
	padding: 0 2px;
	border-radius: 2px;
}

/* Startseite - vier Kacheln
   Dauerhaft in der Sparten-Farbe (auf dem Telefon gibt es kein Ueberfahren). Mit der Maus:
   leicht aufgehellt, Schatten und 3 % groesser - transform veraendert das Raster nicht, die
   Nachbarn bleiben stehen. Bei prefers-reduced-motion nur das Aufhellen, ohne Bewegung und
   ohne Uebergang. Keine Animation beim Laden. */
.nd-kacheln {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
}
.nd-kachel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 300px;
	padding: 36px 36px 32px;
	overflow: hidden;
	border-radius: 6px;
	background: var(--nd-kachel);
	color: #fff;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.nd-kachel--hosting { --nd-kachel: var(--nd-farbe-hosting); }
.nd-kachel--telefonie { --nd-kachel: var(--nd-farbe-telefonie); }
.nd-kachel--webdesign { --nd-kachel: var(--nd-farbe-webdesign); }
.nd-kachel--support { --nd-kachel: var(--nd-farbe-support); }
/* Aufhellen als weisse Lasur ueber der Flaeche - Symbol und Schrift bleiben unveraendert. */
.nd-kachel::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}
.nd-kachel__icon {
	position: absolute;
	top: 32px;
	right: 32px;
	width: 72px;
	height: 72px;
	color: #fff;
	opacity: 0.9;
}
.nd-kachel__text { position: relative; }
.nd-site .nd-kachel__titel { margin: 0 0 6px; font-size: 40px; font-weight: 800; line-height: 1.1; letter-spacing: -0.3px; }
.nd-site .nd-kachel__titel a { color: #fff; text-decoration: none; }
/* Die ganze Kachel ist klickbar; der Link bleibt der Titel. */
.nd-site .nd-kachel__titel a::after { content: ""; position: absolute; inset: -400px -400px -400px -400px; }
.nd-kachel { isolation: isolate; }
/* Grosse Schrift im Sinn von WCAG (fett ab 18,66 px), damit 3 : 1 genuegt - Blau 3,1 : 1 und
   Orange 3,4 : 1 erreichen fuer normale Schrift die 4,5 : 1 nicht. Nicht kleiner stellen. */
.nd-kachel__text p { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.3; }
body.editing .nd-kachel__titel a::after { display: none; }

@media (hover: hover) {
	.nd-kachel:hover { transform: scale(1.03); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35); z-index: 1; }
	.nd-kachel:hover::before { opacity: 0.1; }
}
.nd-kachel:focus-within { box-shadow: 0 0 0 4px #fff; }
.nd-kachel:focus-within::before { opacity: 0.1; }
.nd-site .nd-kachel__titel a:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
	.nd-kachel,
	.nd-kachel::before { transition: none; }
	.nd-kachel:hover { transform: none; box-shadow: none; }
}

/* Startseite: Hero, Kacheln und Fusszeile haben dieselbe dunkle Flaeche - die Standard-Abstaende
   der Baender (80 / 90 px) addierten sich dort zu grossen leeren Flaechen (Fox, 17.9.). */
.nd-site .nd-hero.nd-startseite__hero { padding-bottom: 48px; }
.nd-site .nd-band.nd-startseite__kacheln { padding-top: 0; padding-bottom: 24px; }
.nd-startseite__lede { max-width: 900px; margin: 24px auto 0; font-size: 22px; line-height: 1.45; }
.nd-startseite__lede p { margin: 0 0 12px; }
.nd-startseite__lede p:last-child { margin-bottom: 0; }

@media (max-width: 1119px) {
	.nd-angebote,
	.nd-wege { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
	.nd-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.nd-site .nd-hero { padding-top: 48px; padding-bottom: 44px; }
	.nd-site .nd-hero__titel { font-size: 40px; }
	.nd-site .nd-band { padding-top: 56px; padding-bottom: 64px; }
	.nd-site .nd-band--seite { padding-top: 32px; }
	.nd-site .nd-einleitung h1,
	.nd-site .nd-einleitung h2,
	.nd-site .nd-text h1 { font-size: 30px; }
}

@media (max-width: 640px) {
	.nd-highlights { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.nd-site .nd-hero__titel { font-size: 34px; }
	.nd-partner__bild { height: 70px; }
	.nd-kacheln { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.nd-site .nd-hero.nd-startseite__hero { padding-bottom: 32px; }
	.nd-site .nd-band.nd-startseite__kacheln { padding-bottom: 8px; }
	.nd-kachel { min-height: 200px; padding: 28px 24px 24px; }
	.nd-kachel__icon { top: 24px; right: 24px; width: 56px; height: 56px; }
	.nd-site .nd-kachel__titel { font-size: 32px; }
	.nd-kachel__text p { font-size: 19px; } /* fett, ab 18,66 px gross */
	.nd-startseite__lede { font-size: 19px; }
	.nd-angebot { padding: 36px 24px 26px; }
}

/* ------------------------------------------------------------------------------------------
   FUSSZEILE
   ------------------------------------------------------------------------------------------ */

.nd-footer {
	background: var(--nd-sparte);
	color: #fff;
	border-top: none;
	padding: 90px var(--nd-gutter);
	font-size: 18px;
}

.nd-footer__inner { max-width: var(--nd-max); margin: 0 auto; }

.nd-footer__logo img { display: block; width: 144px; height: auto; }

.nd-footer__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr);
	gap: 30px;
	margin-top: 34px;
	padding-top: 34px;
	border-top: 2px solid rgba(217, 217, 217, 0.4);
}

.nd-site .nd-footer__heading {
	font-size: 26.66px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.2px;
	color: #fff;
	margin: 0 0 30px;
}

.nd-site .nd-footer__subheading {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.2px;
	color: #fff;
	margin: 0 0 4px;
}

.nd-footer__list { list-style: none; margin: 0; padding: 0; }
.nd-site .nd-footer__list a { color: var(--nd-footer-link); text-decoration: none; }
.nd-site .nd-footer a:hover { text-decoration: underline; }

.nd-footer__address { margin: 0; }
/* Adresszeilen aus dem Kontaktdaten-Panel - je Feld eine Zeile, ein leeres Feld faellt weg. */
.nd-footer__address .company-data { display: block; }

/* Statusmeldungen: das News-Widget der Engine (cms/js/content-items.js, Panel «Statusmeldungen»)
   als schlichte Linkliste. Die Engine rendert alle Eintraege als Karten mit Bild, Datum und
   Anrisstext, neueste zuerst - hier bleiben nur die Titel der zwei neuesten sichtbar. */
.nd-footer .content-items-widget {
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	max-width: none;
	margin: 0;
	padding: 0;
}
.nd-footer .content-items-card:nth-child(n+3),
.nd-footer .content-items-card-image,
.nd-footer .content-items-card-date,
.nd-footer .content-items-card-teaser { display: none; }
.nd-site .nd-footer .content-items-card-title {
	margin: 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
	color: #fff;
}
.nd-site .nd-footer .content-items-card:hover .content-items-card-title { color: #fff; text-decoration: underline; }
/* Leerer Zustand: der Engine-Text «Noch keine Einträge.» passt nicht zu Statusmeldungen. */
.nd-footer .content-items-empty { font-size: 0; }
.nd-footer .content-items-empty::before {
	content: "Keine aktuellen Meldungen";
	font-size: 18px;
	color: var(--nd-footer-link);
}

.nd-footer__contact { display: flex; flex-wrap: wrap; gap: 16px 30px; }

.nd-site .nd-footer__meta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	color: var(--nd-footer-link);
	text-decoration: none;
}

.nd-footer__meta svg { color: #fff; flex: none; }

.nd-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px 30px;
	margin-top: 34px;
	padding-top: 34px;
	border-top: 2px solid rgba(217, 217, 217, 0.4);
	font-size: 13.5px;
}

.nd-footer__legal ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 30px; }
.nd-site .nd-footer__legal a { color: var(--nd-footer-link); text-decoration: none; }

@media (max-width: 900px) {
	.nd-footer { padding: 56px var(--nd-gutter); }
	.nd-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 30px; }
	.nd-site .nd-footer__heading { font-size: 22px; margin-bottom: 16px; }
}

@media (max-width: 560px) {
	.nd-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------------------------------
   STATUSMELDUNG - Detailseite (cse/_template_content_item.html, erzeugt vom Panel)
   ------------------------------------------------------------------------------------------ */

.nd-item-page { padding: 40px var(--nd-gutter) 90px; }
.nd-item { max-width: 860px; margin: 0 auto; }
.nd-site .nd-item .kai_contentitem_title {
	font-size: 34px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.2px;
	margin: 0 0 8px;
}
.nd-item .kai_contentitem_date { margin: 0 0 32px; font-size: 15px; color: var(--nd-muted); }
.nd-item .kai_edit_text p { margin: 0 0 16px; }
.nd-site .nd-item .kai_edit_text a { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 900px) {
	.nd-item-page { padding-top: 24px; padding-bottom: 60px; }
	.nd-site .nd-item .kai_contentitem_title { font-size: 28px; }
}