/* ==========================================================================
   QWAN KI DO NEFTENBACH - css/styles.css

   Aufbau dieser Datei:
     1. Grundlagen (box-sizing, body, .wrap) - aus dem KAI-CMS-Starter
     2. Header / Navigation - aus dem Starter, MUSS bleiben: hier liegt die
        Mechanik, die cms/js/menu.js und cms/css/system.css voraussetzen
        (der @media (min-width:721px)-Block, die Dropdown-Hover-Bruecke, die
        Burger-Balken). Nicht mit gleicher Spezifitaet dagegenhalten.
     3. Design dieser Website - alles Eigene
     4. Optik der Engine-Features (TinyMCE-Formate, 404, Cookie-Banner,
        Popup, Kalender, News, Preisliste, Menuekarten, Kontaktformular) -
        aus dem Starter, MUSS bleiben: cms/css/system.css liefert dort nur
        Struktur, nicht das Aussehen.

   Entfernt gegenueber dem Starter: Topbar, Hero, Sections, Grids, Galerie,
   Kontaktblock und Footer der Demo-Website - ersetzt durch Teil 3.

   Das Demo-Gruen #2f5d50 wurde durchgehend durch den Akzent #b5443a
   ersetzt (Hover-Variante #244a3f -> #943529).
   ========================================================================== */


/* ==========================================================================
   1. GRUNDLAGEN (Starter)
   ========================================================================== */

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

/* ==========================================================================
   2. HEADER / NAVIGATION (Starter - nicht entfernen)
   ========================================================================== */

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

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

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

/* ==========================================================================
   3. DESIGN QWAN KI DO NEFTENBACH
   ========================================================================== */

:root {
    --qkd-ink: #1c2536;          /* headings, primary text */
    --qkd-ink-soft: #4b5364;     /* body copy */
    --qkd-muted: #8a8272;        /* labels, meta, footer */
    --qkd-paper: #faf8f4;        /* page background, warm off-white */
    --qkd-paper-alt: #f4f1eb;    /* quote band, alternating sections */
    --qkd-rule: #e6e1d8;         /* hairlines */
    --qkd-seal: #b5443a;         /* single accent, used sparingly */

    /* Georgia sits on every machine: no web font request, so no cookie banner
       question either. For a self-hosted serif later, put it in a folder
       outside cms/ (e.g. /fonts/) so updates leave it alone. */
    --qkd-serif: Georgia, "Times New Roman", serif;
    --qkd-sans: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

body {
    background: var(--qkd-paper);
    color: var(--qkd-ink);
    font-family: var(--qkd-serif);
    line-height: 1.75;
}

/* ---- Links --------------------------------------------------------------
   No underlines anywhere by default. Body-copy links stay recognisable
   through colour and grow an underline on hover, so they are still findable
   without being noisy. Nav, logo, buttons and footer set their own colours
   further down and override this. */

a {
    color: var(--qkd-seal);
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}

a:hover {
    color: var(--qkd-ink);
}

/* Links inside editable text and prose: underline appears on hover only. */
.kai_edit_text a,
.prose a,
.imprint_lines a,
.contact-form a {
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
}

.kai_edit_text a:hover,
.prose a:hover,
.imprint_lines a:hover,
.contact-form a:hover {
    border-bottom-color: currentColor;
}

/* ---- Reveal on scroll ---------------------------------------------------
   Hiding only starts once site.js has put .js-reveal on <html>. Without JS
   everything stays visible - important, because the CMS editor writes into
   these same elements. Header, hero and page heads are deliberately not
   animated: they are above the fold and should be there immediately. */

.js-reveal .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.js-reveal .reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .js-reveal .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---- Shared bits -------------------------------------------------------- */

.rule-seal {
    width: 30px;
    height: 1px;
    background: var(--qkd-seal);
    margin: 0 auto 20px;
}

.section-label {
    font-family: var(--qkd-sans);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--qkd-muted);
    text-align: center;
    margin: 0 0 24px;
}

.section-label--left {
    text-align: left;
    margin: 0 0 10px;
}

.btn-outline {
    display: inline-block;
    font-family: var(--qkd-sans);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 13px 30px;
    border: 1px solid var(--qkd-ink);
    color: var(--qkd-ink);
    transition: background 0.25s ease, color 0.25s ease;
}

.btn-outline:hover {
    background: var(--qkd-ink);
    color: var(--qkd-paper);
}

/* ---- Header and logo ---------------------------------------------------- */

header {
    border-bottom: 1px solid var(--qkd-rule);
    padding: 20px 0;
}

/* .logo is a plain text link in the demo. Here it carries a logo image plus a
   two-line name, so the original font-size/weight are reset. */
.logo {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: inherit;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--qkd-ink);
}

.logo img {
    display: block;
    height: 68px;
    width: auto;
    flex-shrink: 0;
}

.logo_name {
    display: block;
    line-height: 1.3;
}

.logo_name1 {
    display: block;
    font-family: var(--qkd-serif);
    font-size: 1.12rem;
}

.logo_name2 {
    display: block;
    font-family: var(--qkd-sans);
    font-size: 10px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--qkd-muted);
}

/* ---- Navigation --------------------------------------------------------
   Colour and type only. The show/hide mechanics stay untouched - see the
   note at the top of this file. The one exception is the gap, adjusted
   inside the same conditional media query the starter uses, so the
   breakpoint behaviour is not affected. */

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

nav.mainnav a,
nav.mainnav .mainnav-toggle {
    font-family: var(--qkd-sans);
    font-size: 12.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #3f4757;
    border-bottom-width: 1px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

nav.mainnav a:hover,
nav.mainnav a.active,
nav.mainnav .mainnav-toggle:hover {
    color: var(--qkd-ink);
    border-bottom-color: var(--qkd-seal);
}

nav.mainnav ul.mainnav-dropdown {
    background: var(--qkd-paper);
    border: 1px solid var(--qkd-rule);
    border-radius: 0;
    box-shadow: 0 12px 28px rgba(28, 37, 54, 0.08);
}

nav.mainnav ul.mainnav-dropdown a {
    font-size: 11.5px;
    letter-spacing: 0.08em;
}

nav.mainnav ul.mainnav-dropdown a:hover,
nav.mainnav ul.mainnav-dropdown a.active {
    background: var(--qkd-paper-alt);
    color: var(--qkd-seal);
}


/* Burger bars: colour and type only, plus the open-state cross.
   The engine sets aria-expanded on the button itself, so the state
   is addressed via attribute selector - no class needed and no
   equal-specificity fight with system.css.
   Open animation follows the "elastic" pattern: over-rotation with an
   overshooting easing curve, middle bar fading on its own timing. */
.mainnav-burger span {
    height: 1px;
    border-radius: 0;
    background: var(--qkd-ink);
    transform-origin: center;
    transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.mainnav-burger span:nth-child(2) {
    transition: opacity 0.125s ease 0.275s;
}
.mainnav-burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(9.5px) rotate(135deg);
    transition-delay: 0.075s;
}
.mainnav-burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transition-delay: 0s;
}
.mainnav-burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-9.5px) rotate(-135deg);
    transition-delay: 0.075s;
}

@media (prefers-reduced-motion: reduce) {
    .mainnav-burger span { transition-duration: 0.01s; }
}

/* ---- Hero --------------------------------------------------------------- */

.hero {
    border-bottom: 1px solid var(--qkd-rule);
}

.hero img {
    display: block;
    width: 100%;
    height: 62vh;
    min-height: 340px;
    max-height: 620px;
    object-fit: cover;
    object-position: center;
}

/* ---- Lead (home page) --------------------------------------------------- */

.lead {
    max-width: 620px;
    margin: 0 auto;
    padding: 62px 24px 56px;
    text-align: center;
    border-bottom: 1px solid var(--qkd-rule);
}

.lead_title {
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.32;
    margin: 0 0 20px;
}

.lead_intro {
    color: var(--qkd-ink-soft);
    font-size: 1.02rem;
    max-width: 460px;
    margin: 0 auto;
}

.lead_intro p {
    margin: 0 0 16px;
}

.lead_federation {
    font-family: var(--qkd-sans);
    font-size: 10.5px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--qkd-muted);
    margin: 0 0 32px;
}

.lead_action {
    margin: 0;
}

/* ---- Page head (subpages) ----------------------------------------------- */

.page-head {
    max-width: 620px;
    margin: 0 auto;
    padding: 66px 24px 52px;
    text-align: center;
    border-bottom: 1px solid var(--qkd-rule);
}

.page-head_title {
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.3;
    margin: 0 0 20px;
}

.page-head_intro {
    color: var(--qkd-ink-soft);
    font-size: 1.02rem;
    max-width: 480px;
    margin: 0 auto;
}

.page-head_intro p {
    margin: 0;
}

/* ---- News detail page (cse/_template_content_item.html) ------------------ */

.entry_date {
    font-family: var(--qkd-sans);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--qkd-muted);
    margin: 0 0 12px;
}

/* ---- Wide image band ---------------------------------------------------- */

.band {
    border-bottom: 1px solid var(--qkd-rule);
}

.band img {
    display: block;
    width: 100%;
    height: 380px;
    object-fit: cover;
    object-position: center;
}

/* ---- Prose sections ----------------------------------------------------- */

.prose {
    max-width: 620px;
    margin: 0 auto;
    padding: 60px 24px;
}

.prose_title {
    font-size: 1.4rem;
    font-weight: 400;
    margin: 0 0 18px;
}

.prose p {
    color: var(--qkd-ink-soft);
    margin: 0 0 16px;
}

/* Alternating variant: full-width background, content still in the 620px
   column. The centring rule has to come AFTER .prose_title - that one uses
   the margin shorthand, which resets left/right to 0 at equal specificity
   and would otherwise push the heading to the left edge. */

.prose--alt {
    max-width: none;
    background: var(--qkd-paper-alt);
    border-top: 1px solid var(--qkd-rule);
    border-bottom: 1px solid var(--qkd-rule);
}

.prose--alt > * {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

/* ---- Offers (angebot.html) ---------------------------------------------- */

.offers {
    max-width: 900px;
    margin: 0 auto;
    padding: 56px 24px 20px;
}

.offer {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 30px;
    align-items: center;
    padding-bottom: 46px;
    margin-bottom: 46px;
    border-bottom: 1px solid var(--qkd-rule);
}

.offer:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.offer_image img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
}

.offer_title {
    font-size: 1.3rem;
    font-weight: 400;
    margin: 0 0 6px;
}

.offer_meta {
    font-family: var(--qkd-sans);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--qkd-muted);
    margin: 0 0 14px;
}

.offer_text {
    color: var(--qkd-ink-soft);
}

.offer_text p {
    margin: 0 0 14px;
}

/* ---- Callout ------------------------------------------------------------ */

.callout {
    background: var(--qkd-paper-alt);
    border-top: 1px solid var(--qkd-rule);
    border-bottom: 1px solid var(--qkd-rule);
    padding: 56px 24px;
    text-align: center;
}

.callout_text {
    max-width: 480px;
    margin: 0 auto 26px;
    color: var(--qkd-ink-soft);
}

.callout_text p {
    margin: 0;
}

.callout_action {
    margin: 0;
}

/* ---- Facts strip -------------------------------------------------------- */

.facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
    padding: 56px 24px;
}

.facts_label {
    font-family: var(--qkd-sans);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--qkd-muted);
    margin: 0 0 10px;
}

.facts_text {
    color: var(--qkd-ink-soft);
    font-size: 0.95rem;
}

.facts_text p {
    margin: 0;
}

/* ---- Contact (kontakt.html) --------------------------------------------- */

.contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 46px;
    max-width: 820px;
    margin: 0 auto;
    padding: 60px 24px;
}

.contact_lines {
    color: var(--qkd-ink-soft);
    margin-bottom: 32px;
}

.contact_lines p {
    margin: 0;
}

.contact_lines a {
    color: inherit;
}

/* ---- Contact form (kontakt.html) ----------------------------------------
   The form itself is styled in part 4 (from the starter), where it has
   max-width: 480px but no centring - in the demo it sat inside a .wrap.
   Standing on its own it needs both a wrapper and a margin. */

.contactform {
    max-width: 620px;
    margin: 0 auto;
    padding: 0 24px 66px;
}

.contact-form {
    margin: 0 auto;
}

/* ---- Quote -------------------------------------------------------------- */

.quote {
    background: var(--qkd-paper-alt);
    border-top: 1px solid var(--qkd-rule);
    border-bottom: 1px solid var(--qkd-rule);
    padding: 66px 24px;
    text-align: center;
}

.quote_text {
    max-width: 520px;
    margin: 0 auto 20px;
    font-size: 1.35rem;
    font-style: italic;
    line-height: 1.7;
    color: #2a3446;
}

.quote_text p {
    margin: 0;
}

.quote_source {
    font-family: var(--qkd-sans);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--qkd-muted);
    margin: 0;
}

/* ---- Figures ------------------------------------------------------------ */

.figures {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 700px;
    margin: 0 auto;
    padding: 50px 24px;
    border-bottom: 1px solid var(--qkd-rule);
    text-align: center;
}

.figures_value {
    display: block;
    font-size: 1.9rem;
    line-height: 1.2;
    color: #2a3446;
}

.figures_label {
    display: block;
    font-family: var(--qkd-sans);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--qkd-muted);
    margin-top: 6px;
}

/* ---- Training times ----------------------------------------------------- */

.training {
    max-width: 560px;
    margin: 0 auto;
    padding: 62px 24px;
}

.training_row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid var(--qkd-rule);
}

.training_row:last-child {
    border-bottom: none;
}

.training_group {
    font-size: 1rem;
}

.training_time {
    font-family: var(--qkd-sans);
    font-size: 0.85rem;
    color: var(--qkd-ink-soft);
    white-space: nowrap;
}

.training_place {
    font-family: var(--qkd-sans);
    font-size: 12px;
    color: var(--qkd-muted);
    text-align: center;
    margin: 24px 0 0;
}

/* ---- News section (index.html) ------------------------------------------
   The widget itself is styled in part 4 (from the starter). Only the wrapper
   is set here. When there are no entries the widget renders a
   .content-items-empty hint - on a public page that is just noise, so the
   whole section is hidden in that case. */

.news {
    padding: 56px 0 62px;
    border-bottom: 1px solid var(--qkd-rule);
}

.news:has(.content-items-empty) {
    display: none;
}

/* ---- Calendar section (termine.html) ------------------------------------
   The widget itself is styled in part 4 (from the starter). Only the wrapper
   is set here. */

.calendar {
    padding: 56px 0 62px;
    border-bottom: 1px solid var(--qkd-rule);
}

/* ---- Gallery ------------------------------------------------------------
   Uses the CMS's own .gallery_wrap / .gallery_item structure, so the
   "Bild hinzufügen" button inserts items that look like the existing ones.
   The starter's own rules for these lived in the removed demo block, so they
   are restated here - square instead of the original 280x200 ratio, which is
   what makes a mixed set of portrait and landscape shots line up. */

.gallery {
    max-width: 1100px;
    margin: 0 auto;
    padding: 56px 24px 66px;
}

.gallery_wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.gallery_item img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center;
}

/* General safety net: .kai_lightbox_image is a fixed-size thumbnail by
   definition, so without object-fit the browser would stretch anything that
   does not match its box. This rule was in the starter's demo block and is
   restated here because that block was removed. */
.kai_lightbox_image {
    object-fit: cover;
    object-position: center;
}

/* ---- Imprint (impressum.html) ------------------------------------------- */

.imprint {
    max-width: 620px;
    margin: 0 auto;
    padding: 56px 24px 66px;
}

.imprint_block {
    padding-bottom: 26px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--qkd-rule);
}

.imprint_block:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.imprint_lines {
    color: var(--qkd-ink-soft);
    font-size: 0.95rem;
}

.imprint_lines p {
    margin: 0 0 12px;
}

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

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

.site-foot {
    border-top: 1px solid var(--qkd-rule);
    padding: 38px 24px;
    text-align: center;
    font-family: var(--qkd-sans);
    font-size: 12px;
    color: var(--qkd-muted);
    line-height: 1.9;
}

.site-foot p {
    margin: 0;
}

.site-foot a {
    color: var(--qkd-muted);
}

/* Federation logo stays quiet in grayscale, so the club's own logo remains
   the only coloured element on the page. */
.site-foot_federation img {
    max-width: 150px;
    height: auto;
    margin-bottom: 16px;
    filter: grayscale(1);
    opacity: 0.55;
}

.site-foot_meta {
    margin-top: 12px;
}

.site-foot_sep {
    opacity: 0.5;
}

/* netzdienst-Hinweis als eigene, ruhige Zeile unter Impressum/Copyright (07.10.2026).
   Muster von blankton.ch, rasiti.ch und new.vilux.ch - dort ist die Rakete ein identisches
   Inline-SVG (keine Bilddatei, kein Fremdaufruf); uebernommen ist die einzeilige Fassung von
   rasiti.ch.

   ZWEI Klassen, nicht eine: .site-foot p { margin: 0 } weiter oben ist mit (0,1,1)
   spezifischer als ein einzelnes .site-foot_credit (0,1,0) und verschluckte den Abstand -
   gemessen am 07.10.2026, margin-top kam als 0px an. Gleiche Schreibweise wie .site-foot a.

   KEINE eigene Farbe und keine Zentrierung: .site-foot gibt text-align: center und
   color: var(--qkd-muted) schon vor, .site-foot a ebenfalls die Farbe. Die Zeile sitzt damit
   automatisch richtig und folgt jeder spaeteren Aenderung am Footer.

   KEINE Animation und kein JavaScript - die Rakete steht still, wie auf new.vilux.ch. Der
   Riegel unten ist deshalb trotzdem nicht leer: Der Link bekommt aus der globalen a-Regel
   (transition: color 0.2s ease) einen Farbuebergang beim Ueberfahren, und genau den schaltet
   er ab. */
.site-foot .site-foot_credit {
    margin-top: 8px;
}

.site-foot_credit a {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

.site-foot_credit svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
    .site-foot_credit a {
        transition: none;
    }
}

/* ---- Mobile ------------------------------------------------------------
   Content breakpoint at 780px. The nav switches at 720px, controlled by the
   engine - deliberately not aligned, so nothing here interferes with it. */

@media (max-width: 780px) {

    header {
        padding: 14px 0;
    }

    .logo img {
        height: 54px;
    }

    .hero img {
        height: 40vh;
        min-height: 240px;
    }

    .lead,
    .page-head {
        padding: 44px 24px;
    }

    .lead_title,
    .page-head_title {
        font-size: 1.6rem;
    }

    .band img {
        height: 240px;
    }

    .prose {
        padding: 44px 24px;
    }

    .quote {
        padding: 48px 24px;
    }

    .quote_text {
        font-size: 1.15rem;
    }

    .figures {
        padding: 36px 20px;
    }

    .figures_value {
        font-size: 1.5rem;
    }

    .training {
        padding: 48px 24px;
    }

    .news,
    .calendar {
        padding: 40px 0 46px;
    }

    .offers {
        padding: 40px 24px 10px;
    }

    .offer {
        grid-template-columns: 1fr;
        gap: 18px;
        padding-bottom: 34px;
        margin-bottom: 34px;
    }

    .facts,
    .contact {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 40px 24px;
    }

    .contact_lines {
        margin-bottom: 20px;
    }

    .imprint {
        padding: 40px 24px 48px;
    }

    .contactform {
        padding: 0 24px 48px;
    }

    .gallery {
        padding: 40px 24px 48px;
    }

    .gallery_wrap {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 12px;
    }
}

/* ==========================================================================
   4. OPTIK DER ENGINE-FEATURES (Starter - nicht entfernen)
   ========================================================================== */

/* 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-code {
	font-size: 72px;
	font-weight: 700;
	color: #b5443a;
	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: #b5443a;
}

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

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

.cookieconsent_accept, .cookieconsent_embed_accept {
	background: #b5443a;
}
.cookieconsent_accept:hover, .cookieconsent_embed_accept:hover {
	background: #943529;
}
.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) {
	.grid-3 { grid-template-columns: 1fr; }

	/* .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: #b5443a;
}

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

.contact-form button {
  align-self: flex-start;
  padding: 10px 24px;
  border: none;
  border-radius: 4px;
  background: #b5443a;
  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: #b5443a;
}

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

/* ==========================================================================
   5. BAUSTELLENSEITE UND 404
   Wird von im-aufbau.html und 404.html verwendet. Die .error-404-Regeln in
   Teil 4 (Starter) sind damit toter Code - sie zielen auf Klassen, die keine
   dieser beiden Seiten benutzt. Koennen weg, wenn du dort aufraeumst.
   ========================================================================== */

.construction {
    max-width: 640px;
    margin: 0 auto;
    padding: 12vh 24px 6vh;
    text-align: center;
}

.construction_logo {
    margin-bottom: 3rem;
}

.construction_logo img {
    max-width: 260px;
    height: auto;
}

.construction h1 {
    font-family: var(--qkd-serif);
    font-size: 1.75rem;
    font-weight: 400;
    margin: 0 0 1.5rem;
}

.construction .kai_edit_text {
    line-height: 1.7;
    color: var(--qkd-ink-soft);
}

.construction .kai_edit_text p {
    margin: 0 0 1rem;
}

/* Nur auf der 404-Seite: die grosse Zahl ueber der Ueberschrift. */
.construction_code {
    font-family: var(--qkd-serif);
    font-size: 3.5rem;
    font-weight: 400;
    line-height: 1;
    margin: 0 0 0.5rem;
    color: var(--qkd-rule);
}

.construction_contact {
    margin-top: 2.5rem;
}

.construction_contact a {
    color: inherit;
}

.construction_contact a:hover {
    color: var(--qkd-seal);
}

@media (max-width: 780px) {
    .construction {
        padding-top: 8vh;
    }

    .construction_logo img {
        max-width: 180px;
    }

    .construction_code {
        font-size: 2.5rem;
    }
}