/* VKU Onepage – eigene Styles, nur via jweiland/vku-Set geladen */

/* Sanftes Scrollen bei Anker-Klicks im Ankermenue */
html {
	scroll-behavior: smooth;
}

/* === "Warum wir" als Karten (Inhaltselement c244) === */
#e244 .ce-bodytext {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5rem;
}
#e244 .ce-bodytext > p {
	margin: 0;
	padding: 1.25rem 1.5rem;
	background:  #f0f0f0;
	border: 1px solid #e2e2e2;
	border-top: 4px solid var(--color1, #0026a8);
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
	line-height: 1.7;
}
#e244 {
	margin-bottom: 2rem;
}

/* === Kursdaten im alten Tabellen-Format (CType=table, .ce-table) === */
.frame-type-table .ce-table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	margin-bottom: 0.5rem; /* klein: Tabelle klebt an ihrem Anmelde-Button darunter */
}
.frame-type-table header h3 {
	text-align: center;
	font-weight: 400;
	margin-bottom: 0.75rem;
}
.frame-type-table .ce-table thead th,
.frame-type-table .ce-table tr:first-child td {
	text-align: left;
	color: var(--color1, #0026a8);
	font-size: 1.15rem;
	font-weight: 400;
	padding: 0.5rem 0.75rem 0.75rem;
	border: 0;
	border-bottom: 2px solid var(--color1, #0026a8);
	background: none;
}
.frame-type-table .ce-table td {
	padding: 0.85rem 0.75rem;
	border: 0;
	border-bottom: 1px solid #ddd;
}
.frame-type-table .ce-table tbody tr:hover,
.frame-type-table .ce-table tbody tr:nth-child(2n) {
	background: none;
}

/* === Anmelde-Link je Kursgruppe ===
   Strukturell: der Text-Block DIREKT nach einer Tabelle (Tabelle -> Anker-Div -> Text).
   Kein Backend-Marker noetig. Klebt als roter Button unter der Tabelle,
   mit Abstand zur naechsten Kursgruppe. */
.frame-type-table + .anker + .frame-type-textpic {
	margin: 0 0 3rem;
}
.frame-type-table + .anker + .frame-type-textpic p {
	margin: 0;
}
.frame-type-table + .anker + .frame-type-textpic a {
	display: inline-block;
	padding: 0.62rem 2rem 0.76rem;
	background: transparent;
	color: #e53d3a;
	text-decoration: none;
	border: 2px solid #e53d3a;
	border-radius: 100px;
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 1;
	max-width: 335px;
}
.frame-type-table + .anker + .frame-type-textpic a:hover {
	background: #e53d3a;
	color: #fff;
}

/* === Anmelde-Lightbox (Popup mit Kursdatum-Kopf + ASA-iFrame) === */
.vku-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	z-index: 9999;
}
.vku-modal {
	background: #fff;
	width: 100%;
	max-width: 820px;
	max-height: 90vh;
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.vku-modal__header {
	position: relative;
	padding: 1.1rem 3.25rem 1.1rem 1.5rem;
	background: #f4f6f7;
	border-bottom: 1px solid #e2e2e2;
}
.vku-modal__badge {
	display: inline-block;
	background: var(--color1, #0026a8);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 0.15rem 0.5rem;
	border-radius: 4px;
	margin-right: 0.6rem;
	vertical-align: middle;
}
.vku-modal__title {
	font-size: 1.2rem;
	font-weight: 700;
	text-transform: uppercase;
	color: #222;
	vertical-align: middle;
}
.vku-modal__subtitle {
	margin-top: 0.4rem;
	color: #5a6b72;
	font-size: 0.9rem;
}
.vku-modal__close {
	position: absolute;
	top: 0.9rem;
	right: 1rem;
	width: 2rem;
	height: 2rem;
	border: 0;
	border-radius: 50%;
	background: #dfe4e6;
	color: #333;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}
.vku-modal__close:hover { background: #cbd2d5; }
.vku-modal__body {
	flex: 1 1 auto;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
.vku-modal__body iframe {
	display: block;
	width: 100%;
	height: 70vh;
	border: 0;
}
body.vku-modal-open { overflow: hidden; }

/* === Header VKU: Logo zentriert (wie alte Seite) === */
.wrapper-header-vku {
    display: flex;
    justify-content: center;
    padding: 1.75rem 0;
}
.wrapper-header-vku .wrapper-logo {
    text-align: center;
}

/* === Türkiser Seitentitel-Balken (#b4dedf, wie alte Seite) === */
.page-header-vku {
    background-color: #b4dedf;
    text-align: center;
    padding: 1.17rem 1rem;
}
.page-header-vku h1 {
    margin: 0;
    color: #000;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.26;
}

/* Leerer Kopfbereich (kein Hero) darf keinen Abstand erzeugen */
.header-image:empty {
    display: none;
}

/* === Schriftart Raleway (wie alte VKU-Seite), selbst gehostet === */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Raleway Medium'), local('Raleway-Medium'),
         url('../Fonts/Raleway/raleway-v14-latin-500.woff2') format('woff2'),
         url('../Fonts/Raleway/raleway-v14-latin-500.woff') format('woff');
}
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Raleway Bold'), local('Raleway-Bold'),
         url('../Fonts/Raleway/raleway-v14-latin-700.woff2') format('woff2'),
         url('../Fonts/Raleway/raleway-v14-latin-700.woff') format('woff');
}
/* Grundschrift der vku-Site auf Raleway umstellen (ueberschreibt custom.css :root) */
:root {
    --font-family-normal: 'Raleway', verdana, arial, helvetica, sans-serif;
}

/* Fade-Reveal-JS (fadeInContent.js) blendet auf Desktop manche Bloecke (z.B. Section-Header)
   nicht zuverlaessig ein -> sie bleiben unsichtbar (visibility:hidden). Inhalt darf nie
   unsichtbar sein: .fade grundsaetzlich sichtbar schalten. .fadeIn-Animation spielt weiter. */
.fade {
    visibility: visible;
}


/* Positionierungsanker fuer den Hamburger in der Logo-Zeile */
.content-header .width-max { position: relative; }

/* === Anker-Menue als Hamburger, oben rechts in der Logo-Zeile === */
.vku-menu {
    position: absolute;
    top: 0.5rem;
    right: var(--gutter, 1.5rem);
    z-index: 100;
}
.vku-menu__toggle {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}
.vku-menu__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    color: var(--color1, #e53d3a);
    font-weight: 700;
    user-select: none;
}
.vku-menu__icon,
.vku-menu__icon::before,
.vku-menu__icon::after {
    content: "";
    display: block;
    width: 1.5rem; height: 2px;
    background: currentColor;
    border-radius: 2px;
}
.vku-menu__icon { position: relative; }
.vku-menu__icon::before { position: absolute; left: 0; top: -10px; }
.vku-menu__icon::after  { position: absolute; left: 0; top: 10px; }
.vku-menu__toggle:checked ~ .vku-menu__btn .vku-menu__icon { background: transparent; }
.vku-menu__toggle:checked ~ .vku-menu__btn .vku-menu__icon::before { top: 0; transform: rotate(45deg); }
.vku-menu__toggle:checked ~ .vku-menu__btn .vku-menu__icon::after  { top: 0; transform: rotate(-45deg); }
.vku-menu__toggle:focus-visible ~ .vku-menu__btn {
    outline: 2px solid var(--color1, #e53d3a);
    outline-offset: 3px;
}
/* Dropdown-Panel */
.vku-menu__nav {
    display: none;
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    min-width: 13rem;
    background: #fff;
    border: 1px solid var(--gray4, #ccc);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}
.vku-menu__toggle:checked ~ .vku-menu__nav { display: block; }
.vku-menu__list {
    list-style: none;
    margin: 0;
    padding: 0.4rem 0;
}
.vku-menu__list a {
    display: block;
    padding: 0.6rem 1.2rem;
    color: var(--color1, #e53d3a);
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
}
.vku-menu__list a:hover,
.vku-menu__list a:focus { background: var(--gray5, #eee); }

/* === Fixed-Header deaktivieren (nur vku-Site, nur Desktop >=769px) ===
   Sitepackage macht .content-header position:fixed und kompensiert mit
   main{padding-top:--header-height}. Unser Custom-Header (Logo + Tuerkis-Balken)
   ist viel hoeher -> Kompensation zu klein -> erster Inhalt (H1 "Kursdaten")
   verschwindet unter dem fixierten Header. Header im normalen Fluss lassen. */
@media screen and (min-width: 769px) {
    .header-fixed .content-header { position: static; }
    .header-fixed main,
    .header-fixed main.less-padding { padding-top: 0; }
    .header-fixed .anker { position: static; margin-top: 0; }
}


/* === "Aktuell"-Teaser (ContentBlock jweiland_current_teaser, nachgebaut von der Live-Seite) === */
.vku-teaser {
	width: 100vw;
	margin: calc(-1 * var(--base-size)) calc(50% - 50vw) 1.5rem; /* -margin-top schliesst content-main padding-top -> Band schliesst am Tuerkis-Balken an */
	box-sizing: border-box;
	background: #fff; /* volle Breite weiss (Full-Bleed) auf grauem Seiten-BG */
	color: #000;
	padding: 2.5rem max(1.25rem, calc(50vw - 241px)) 3rem; /* Inhalt bleibt auf 482px zentriert (241 = 482/2) */
}
.vku-teaser__label {
	font-weight: 700;
	margin-bottom: 1.5rem;
}
.vku-teaser__headline {
	margin: 0 0 1.5rem;
	font-size: 1.4705882353rem;
	line-height: 1.25;
	font-weight: 700;
	color: #000;
}
.vku-teaser__subline {
	margin: 0;
}
.vku-teaser__action {
	margin-top: 3rem;
	text-align: center;
}
/* Roter Anmelde-Pill-Button (zentriert, ohne Icon; #e53d3a / hover #b93230) */
.vku-whatsapp-btn {
	display: inline-block;
	box-sizing: border-box;
	width: 90%;
	max-width: 340px;
	padding: 1.32rem 2rem 1.44rem;
	background-color: #e53d3a;
	color: #fff !important;
	text-align: center;
	text-decoration: none;
	font-size: 1.35rem;
	line-height: 0.956;
	border-radius: 100px;
}
.vku-whatsapp-btn:hover {
	background-color: #b93230;
	color: #fff !important;
}
@media screen and (max-width: 768px) {
	.vku-teaser {
		padding-top: 1.5rem;
		padding-bottom: 1.75rem;
	}
	.vku-teaser__headline {
		font-size: 1.5rem;
	}
	.vku-whatsapp-btn {
		font-size: 1rem;
		padding: 0.94rem 1.5rem 1.06rem;
		max-width: 280px;
	}
}


/* === Inhaltsbreite wie Live-Seite (schmale zentrierte Spalte) ===
   Live vku-kuessnacht.ch haelt den Content in .width-med = max-width:482px, zentriert.
   Neue Seite nutzt .content-main.width-max (~1280px). Hoehere Spezifitaet (0,2,0)
   schlaegt .width-max (0,1,0); vku.css laedt zuletzt -> gewinnt. Nur Content wird
   schmal, Header/Tuerkis-Balken (eigene Wrapper) bleiben voll breit. */
.content-main.width-max {
	max-width: 482px;
}


/* === Hamburger-Menue nach links (ohne Text-Label) === */
.vku-menu {
	right: auto;
	left: var(--gutter, 1.5rem);
}
.vku-menu__nav {
	right: auto;
	left: 0;
}

/* VKU-Footer rechte Spalte, NUR Desktop (footer-2col erzwingt sonst align-right):
   (a) linksbuendig wie die linke Spalte;
   (b) um --base-size (1.5rem) nachschieben -> Body fluchtet mit linker Spalte
       (links hat h4-Ueberschrift ~3rem, rechts nur <br> = 1.5rem).
   Mobil (<769px, Spalten gestapelt) NICHT ueberschreiben -> align-center_sm bleibt,
   damit beide Spalten mittig sind (konsistent). */
@media (min-width: 769px) {
  /* linke Spalte (1. Kind) rechtsbuendig, rechte (.align-right) linksbuendig
     -> beide Textbloecke zeigen zur Mitte wie im Original. */
  .content-footer .flex-container > div:first-child { text-align: center; }
  .content-footer .align-right {
    text-align: left;
    padding-top: var(--base-size);
  }
}

/* ===== Signup-CTA (zweiter Teaser vor dem Footer) =====
   Tuerkises Vollbreiten-Band + 2 rote Pill-Buttons, wie das Original-Band.
   Full-Bleed-Trick: Element sprengt den schmalen .content-main-Container (482px)
   auf volle Viewport-Breite. */
.vku-cta {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
	background: #b4dedf;            /* tuerkis wie der Titel-Balken */
	padding: 3rem 1rem 3.5rem;
	text-align: center;
	/* weissen Spalt zum Footer schliessen: hebt content-main padding-bottom (--base-size) auf */
	margin-bottom: calc(-1 * var(--base-size));
}
.vku-cta__headline {
	margin: 0 0 2.25rem;
	color: #000;
	font-size: 2rem;
	line-height: 1.2;
}
.vku-cta__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}
.vku-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 340px;
	padding: 1.1rem 2rem;
	background-color: #e53d3a;
	color: #fff !important;
	text-decoration: none;
	font-size: 1.35rem;
	line-height: 1;
	border-radius: 100px;
}
.vku-cta-btn:hover, .vku-cta-btn:focus {
	background-color: #b93230;
	color: #fff !important;
}
.vku-cta-btn--whatsapp::after {
	content: "";
	display: inline-block;
	width: 28px;
	height: 28px;
	margin-left: 0.75rem;
	background: url('whatsapp-chat-red.svg') no-repeat center / contain;
}
@media screen and (max-width: 768px) {
	.vku-cta { padding: 2rem 1rem 2.25rem; }
	.vku-cta__headline { font-size: 1.5rem; margin-bottom: 1.5rem; }
	.vku-cta-btn { min-width: 0; width: 90%; max-width: 300px; font-size: 1.1rem; padding: 0.9rem 1.5rem; }
}

/* Seiten-Hintergrund grau wie Original vku-kuessnacht.ch (dort body #f0f0f0).
   Inhaltsbereiche (.content-main/main/.wrapper-content) sind transparent -> Grau scheint durch.
   Header (weiss), Titel-Balken/2. Teaser (tuerkis) und Footer (dunkel) haben eigene BG. */
body { background-color: #f0f0f0; }

/* === Gesamtschriftgroesse der vku-Seite ===
   Ueberschreibt --base-html-size aus custom.css (Standard 16px). Weil die ganze
   Seite in rem laeuft und --base-html-size-small/medium/large per calc() darauf
   aufbauen, skaliert dieser eine Wert alles proportional (auch responsive Stufen).
   Nur vku-Site (vku.css laedt nach custom.css). */
:root {
	--base-html-size: 15.5px;
}

/* === Hamburger als Vollbild-Overlay (wie Standard-Sitepackage-Menue) 2026-07-15 ===
   Ersetzt das kleine Dropdown durch ein Vollbild-Overlay: breite Zeilen mit
   Trennlinien, grosses X oben links. Desktop + Mobil identisch. Angehaengt ans
   Dateiende -> gewinnt per Kaskade ueber die frueheren .vku-menu__nav/__list-Regeln. */
.vku-menu { z-index: 1000; }
.vku-menu__icon,
.vku-menu__icon::before,
.vku-menu__icon::after { width: 1.9rem; height: 3px; }
.vku-menu__icon { flex-shrink: 0; }

/* Geoeffnet: X oben links, FIXIERT (bleibt sichtbar, auch wenn gescrollt) */
.vku-menu__btn { position: relative; z-index: 1010; padding: 14px; margin: -14px; cursor: pointer; }
.vku-menu__toggle:checked ~ .vku-menu__btn {
    position: fixed;
    top: 1.4rem;
    left: var(--gutter, 1.5rem);
    z-index: 1010;
}

/* Overlay ueber die ganze Seite */
.vku-menu__nav {
    display: none;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    min-width: 0;
    background: #f0f0f0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 4.5rem;
}
.vku-menu__toggle:checked ~ .vku-menu__nav { display: block; }

.vku-menu__list { list-style: none; margin: 0; padding: 0; }
.vku-menu__list li { border-top: 1px solid #e2e2e2; }
.vku-menu__list li:last-child { border-bottom: 1px solid #e2e2e2; }
.vku-menu__list a {
    display: block;
    padding: 1.15rem var(--gutter, 1.5rem);
    color: var(--color1, #e53d3a);
    font-weight: 700;
    font-size: 1.3rem;
    text-decoration: none;
    white-space: normal;
}
.vku-menu__list a:hover,
.vku-menu__list a:focus { background: #e7e7e7; }

/* === H2-Ueberschriften in VKU-Rot (2026-07-15) ===
   Generische Regel h1..h5{color:var(--header-font-color)} (Spez. 0,0,1) wird von
   diesem spaeter geladenen, gleichspezifischen h2 ueberschrieben. Footer bleibt
   unberuehrt (.content-footer h2 ist mit 0,1,1 hoeher spezifisch). */
h2, .h2 { color: var(--color1, #e53d3a); }

/* === Google-Maps-Karte im Kontakt-Bereich (2026-07-15) === */
.vku-map {
    margin: 1.5rem 0;
    border-radius: 8px;
    overflow: hidden;
    line-height: 0;
}
.vku-map iframe { display: block; width: 100%; border: 0; }

/* Hinweis-Streifen im Anmelde-Modal (Ausweisnummer je Kanton) – 2026-07-21 */
.vku-modal__note {
	padding: 0.7rem 1.5rem;
	background: #fff8e1;
	border-bottom: 1px solid #f0e2b8;
	color: #5a4b1f;
	font-size: 0.85rem;
	line-height: 1.4;
}