/* Schriften lokal gehostet (kein Abruf bei Google) – Lizenz: SIL Open Font License, siehe Fonts/LICENSE-*.txt */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../Fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../Fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../Fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600; font-display: swap; src: url("../Fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700; font-display: swap; src: url("../Fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); }

:root {
    --ks-font-text: "Inter", system-ui, sans-serif;
    --ks-font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
    --ks-radius: 16px;
    --ks-gutter: 20px;
    --ks-bg: #f9f8f5;
    --ks-sand: #f1eee7;
    --ks-ink: #1d242c;
    --ks-text: #4a525c;
    --ks-dark: #1e2939;
    --ks-black: #161c24;
    --ks-accent: #984308;
    --ks-gold: #ffb878;
    --ks-line: #e7e1d8;
    --ks-white: #fff;
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--ks-bg); color: var(--ks-ink); font-family: var(--ks-font-text); font-size: clamp(1rem, .96rem + .15vw, 1.0625rem); line-height: 1.6; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--ks-accent); text-underline-offset: .2em; }
a:focus-visible, button:focus-visible { outline: 3px solid #187aaa; outline-offset: 4px; }
[hidden] { display: none !important; }
h1, h2, h3, .ks-logo { font-family: var(--ks-font-display); font-weight: 700; }
h1, h2, h3 { margin: 0; letter-spacing: -.025em; }
h1 { font-size: clamp(2.25rem, 1.6rem + 2.9vw, 3.5rem); line-height: 1.05; }                 /* 36 → 56 px */
.ks-hero h1 { font-size: clamp(2.625rem, 1.5rem + 5vw, 4.75rem); line-height: 1.02; }        /* 42 → 76 px */
h2 { font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem); line-height: 1.1; }                 /* 28 → 40 px */
h3 { font-size: clamp(1.25rem, 1.12rem + .55vw, 1.5rem); line-height: 1.2; }                 /* 20 → 24 px */
p { margin: .7em 0 0; }

.ks-wrap { width: min(100% - 2 * var(--ks-gutter), 1200px); margin-inline: auto; }
.ks-section { padding-block: clamp(2.75rem, 1.4rem + 5.6vw, 6rem); }   /* 44 → 96 px */
.ks-section-heading { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.ks-section-heading > a { font-weight: 650; }
.ks-content { margin-top: 1rem; color: var(--ks-text); overflow-wrap: anywhere; }
.ks-lead { max-width: 58ch; margin-top: .9rem; color: var(--ks-text); font-size: clamp(1rem, 2.2vw, 1.2rem); }
.ks-kicker { margin: 0 0 .5rem; color: var(--ks-accent); font-size: clamp(.75rem, .7rem + .25vw, .875rem); font-weight: 600; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; }
.ks-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ks-skip { position: absolute; inset: 0 auto auto 1rem; z-index: 2; padding: .55rem 1rem; color: var(--ks-ink); background: var(--ks-white); transform: translateY(-130%); }
.ks-skip:focus { transform: translateY(0); }
@media (min-width: 760px) { :root { --ks-gutter: 32px; } }

.ks-header { position: relative; isolation: isolate; overflow: hidden; background: var(--ks-dark); color: var(--ks-white); }
.ks-header-image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 50%; }
.ks-header::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, #111820d6, #1118202e 40%, #111820df); content: ""; }
.ks-header-inner { display: flex; flex-direction: column; }
.ks-topbar { display: grid; grid-template-columns: 1fr auto 1fr; gap: .3rem 1.15rem; align-items: center; padding-block: .8rem; }
.ks-logo { color: inherit; font-size: 1.22rem; font-weight: 750; letter-spacing: -.05em; text-decoration: none; white-space: nowrap; }
.ks-logo span, .ks-hero .ks-kicker, .ks-knowledge .ks-kicker { color: var(--ks-gold); }
.ks-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 clamp(.65rem, 2.2vw, 1.8rem); }
.ks-nav a { display: inline-flex; min-height: 44px; align-items: center; color: var(--ks-white); font-size: .91rem; font-weight: 630; text-decoration: none; }
.ks-nav a:hover, .ks-nav a.is-current { color: var(--ks-gold); }
.ks-tools { display: flex; gap: .5rem; justify-self: end; }
.ks-search { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #ffffff3b; border-radius: 50%; background: #17212db5; color: var(--ks-white); }
.ks-hero { display: flex; flex-direction: column; justify-content: end; min-height: clamp(16.5rem, 31vw, 26rem); padding-block: 2.25rem 3.25rem; }
.ks-hero p:not(.ks-kicker) { max-width: 54ch; margin-top: 1rem; color: #f0f2f5; font-size: clamp(1rem, 2.2vw, 1.2rem); }
.ks-header-spacer { min-height: clamp(4.25rem, 10vw, 8rem); }

.ks-welcome { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.ks-updates { padding: 1.5rem; border: 1px solid var(--ks-line); border-radius: var(--ks-radius); background: var(--ks-white); }
.ks-updates h2 { color: var(--ks-text); }
.ks-updates .frame { margin-top: .75rem; }
.ks-recent { margin: .75rem 0 0; padding: 0; list-style: none; }
.ks-recent li + li { margin-top: .85rem; }
.ks-recent small { display: block; color: var(--ks-text); }
.ks-recent a { color: var(--ks-ink); font-weight: 650; }
.ks-family { background: var(--ks-sand); }
.ks-family-grid, .ks-knowledge-grid { display: grid; gap: clamp(1rem, .7rem + 1vw, 1.5rem); margin-top: 1.6rem; }
.ks-family-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ks-knowledge-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); color: #e5e8ee; }
.ks-family-grid > *, .ks-knowledge-grid > * { min-width: 0; margin: 0; padding: 1.5rem; border-radius: var(--ks-radius); }
.ks-family-grid > * { background: var(--ks-white); text-align: center; }
.ks-family-grid img { width: 6rem; height: 6rem; margin-inline: auto; border-radius: 50%; object-fit: cover; }
.ks-knowledge { background: var(--ks-dark); color: var(--ks-white); }
.ks-knowledge-grid > * { border: 1px solid #ffffff20; background: #ffffff0a; }
.ks-knowledge a { color: var(--ks-gold); }

.ks-breadcrumbs { margin: 0 0 1.25rem; color: var(--ks-text); font-size: .9rem; }
.ks-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.ks-breadcrumbs li + li::before { margin-inline-end: .35rem; content: "›"; }
.ks-project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 1.3rem + .4vw, 1.75rem); margin-top: 1.5rem; }
.ks-project { display: flex; flex-direction: column; overflow: hidden; min-width: 0; border: 1px solid var(--ks-line); border-radius: var(--ks-radius); background: var(--ks-white); }
.ks-project-visual { aspect-ratio: 16 / 10; overflow: hidden; background: #2b3542; }
.ks-project-visual img, .ks-project-visual video, .ks-project-visual iframe { width: 100%; height: 100%; object-fit: cover; }
.ks-project-body { display: flex; flex: 1; flex-direction: column; gap: .55rem; padding: clamp(1rem, 2.5vw, 1.5rem); overflow-wrap: anywhere; }
.ks-project-body h3 a { color: inherit; text-decoration: none; }
.ks-project-body h3 a:hover { text-decoration: underline; }
.ks-project-body p { margin: 0; color: var(--ks-text); }
.ks-project-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.ks-tag { padding: .2rem .6rem; border-radius: 99px; background: #edf0f2; font-size: .82rem; }
.ks-tag-category { background: #fae6d3; color: #793600; }
.ks-project-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .35rem; margin-top: auto; padding-top: .5rem; color: var(--ks-text); font-size: .91rem; }
.ks-project-foot a { font-weight: 670; }
.ks-filters { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.7rem; }
.ks-filters button { min-height: 44px; padding: .35rem 1rem; border: 1px solid var(--ks-line); border-radius: 99px; background: var(--ks-white); color: var(--ks-ink); font: inherit; font-weight: 600; cursor: pointer; }
.ks-filters button[aria-pressed="true"] { border-color: var(--ks-ink); background: var(--ks-ink); color: var(--ks-white); }
.ks-button { display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 1.15rem; border-radius: 99px; background: var(--ks-accent); color: var(--ks-white); text-decoration: none; }
.ks-footer { background: var(--ks-black); color: var(--ks-white); }
.ks-footer-row, .ks-footer nav { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
.ks-footer-row { justify-content: space-between; min-height: 5.5rem; padding-block: 1rem; }
.ks-footer nav a { color: inherit; font-size: .9rem; }

/* Tablet: 760–1079 px – Karten 2-spaltig */
@media (max-width: 1079px) {
    .ks-family-grid, .ks-knowledge-grid, .ks-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Mobile: unter 760 px – eine Spalte, Familie 2-spaltig */
@media (max-width: 759px) {
    :root { --ks-radius: 14px; }
    .ks-topbar { grid-template-columns: 1fr auto; }
    .ks-topbar .ks-nav { grid-column: 1 / -1; grid-row: 2; justify-content: start; }
    .ks-topbar .ks-tools { grid-column: 2; grid-row: 1; }
    .ks-welcome, .ks-project-grid, .ks-knowledge-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .ks-family-grid { gap: .65rem; }
}

/* Familienkarten (Text & Bilder): Bild oben, Name darunter, Text zuletzt */
.ks-family-grid > * { display: flex; flex-direction: column; align-items: center; }
.ks-family-grid .ce-textpic { display: contents; }
.ks-family-grid .ce-gallery { order: 1; float: none; margin: 0; }
.ks-family-grid > * > header { order: 2; }
.ks-family-grid .ce-bodytext { order: 3; }
.ks-family-grid h2, .ks-family-grid h3 { margin: .75rem 0 .25rem; font-size: 1.35rem; line-height: 1.2; }
.ks-family-grid .ce-bodytext p { margin: 0; font-size: .95rem; }

/* Wissens-Kacheln (Text & Bilder mit Icon): Icon oben links, einheitliche Titel */
.ks-knowledge-grid > * { display: flex; flex-direction: column; align-items: flex-start; }
.ks-knowledge-grid .ce-textpic { display: contents; }
.ks-knowledge-grid .ce-gallery { order: 1; float: none; margin: 0; text-align: left; }
.ks-knowledge-grid .ce-outer, .ks-knowledge-grid .ce-inner { position: static; float: none; right: auto; }
.ks-knowledge-grid > * > header { order: 2; }
.ks-knowledge-grid .ce-bodytext { order: 3; }
.ks-knowledge-grid img { width: 32px; height: 32px; }
.ks-knowledge-grid h2, .ks-knowledge-grid h3 { margin: .75rem 0 .35rem; color: var(--ks-white); font-size: 1.35rem; line-height: 1.2; }
.ks-knowledge-grid h2 a, .ks-knowledge-grid h3 a { color: inherit; text-decoration: none; }

/* Footer bleibt auch auf kurzen Seiten am unteren Rand */
body { display: flex; flex-direction: column; min-height: 100vh; }
#ks-main { flex: 1 0 auto; }

/* ===== Formulare: Kontakt (EXT:form), Login (felogin), Suche (ke_search) ===== */
.ks-content form { max-width: 640px; }
.ks-content fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.ks-content form legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ks-content form label,
.ks-content .form-label { display: block; margin: 0 0 .4rem; color: var(--ks-ink); font-weight: 600; font-size: .95rem; }
.ks-content form .required { color: var(--ks-accent); }

.ks-content form input[type="text"],
.ks-content form input[type="email"],
.ks-content form input[type="password"],
.ks-content form input[type="search"],
.ks-content form input[type="tel"],
.ks-content form input[type="url"],
.ks-content form input[type="number"],
.ks-content form select,
.ks-content form textarea {
    display: block; width: 100%; box-sizing: border-box; min-height: 48px; padding: .7rem .95rem;
    border: 1px solid #cfc8bc; border-radius: 12px; background: var(--ks-white); color: var(--ks-ink);
    font: inherit; font-size: 1rem; line-height: 1.4; transition: border-color .15s, box-shadow .15s;
}
.ks-content form textarea { min-height: 170px; resize: vertical; }
.ks-content form ::placeholder { color: #7a828b; opacity: 1; }
.ks-content form input:focus,
.ks-content form select:focus,
.ks-content form textarea:focus { outline: none; border-color: var(--ks-accent); box-shadow: 0 0 0 3px #98430833; }

/* Abstände zwischen den Feldern */
.ks-content .form-element,
.ks-content .mb-3,
.ks-content .frame-type-felogin_login form > div,
.ks-content .frame-type-felogin_login fieldset > div { margin: 0 0 1.25rem; }

/* Fehlermeldungen */
.ks-content .error,
.ks-content .invalid-feedback,
.ks-content .help-block,
.ks-content .alert-danger { display: block; margin-top: .35rem; color: #b42318; font-size: .9rem; }
.ks-content .has-error input,
.ks-content .has-error textarea,
.ks-content input.is-invalid,
.ks-content textarea.is-invalid { border-color: #b42318; }

/* Schaltflächen */
.ks-content form button,
.ks-content form input[type="submit"],
.ks-content form input[type="reset"],
.ks-content form .btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .7rem 1.6rem;
    border: 1px solid var(--ks-accent); border-radius: 99px; background: var(--ks-accent); color: var(--ks-white);
    font: inherit; font-weight: 650; cursor: pointer; transition: background-color .15s, border-color .15s;
}
.ks-content form button:hover,
.ks-content form input[type="submit"]:hover,
.ks-content form .btn:hover { border-color: #7a3506; background: #7a3506; }
.ks-content form button:focus-visible,
.ks-content form input[type="submit"]:focus-visible,
.ks-content form .btn:focus-visible { outline: 3px solid #98430855; outline-offset: 2px; }
/* Zweitrangige Schaltflächen (Zurücksetzen, Zurück) */
.ks-content form .resetbutt,
.ks-content form input[type="reset"],
.ks-content form .btn-secondary,
.ks-content form .previous button { border-color: var(--ks-line); background: var(--ks-white); color: var(--ks-ink); }
.ks-content form .resetbutt:hover,
.ks-content form .btn-secondary:hover { border-color: var(--ks-ink); background: var(--ks-white); color: var(--ks-ink); }
.ks-content .form-navigation,
.ks-content .actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* Kontaktformular: Seitentitel des Formulars («Step») kleiner, falls er gesetzt ist */
.frame-type-form_formframework form > h2 { margin: 0 0 1rem; font-size: 1.35rem; }

/* Spam-Schutz ALTCHA im selben Look */
.ks-content altcha-widget {
    --altcha-border-radius: 12px; --altcha-color-border: #cfc8bc; --altcha-color-base: var(--ks-white);
    --altcha-color-text: var(--ks-ink); --altcha-color-border-focus: var(--ks-accent); --altcha-max-width: 100%;
    display: block; margin: 0 0 1.25rem;
}

/* Login */
.frame-type-felogin_login { max-width: 640px; }
.frame-type-felogin_login h3 { margin: 0 0 .5rem; font-size: 1.35rem; }
.frame-type-felogin_login p { color: var(--ks-text); }
.frame-type-felogin_login form { margin-top: 1.5rem; padding: 1.75rem; border: 1px solid var(--ks-line); border-radius: var(--ks-radius); background: var(--ks-white); }

/* Suche: Feld und Schaltflächen in einer Zeile, darunter die Treffer */
.ks-content .kesearchbox { display: flex; flex-wrap: wrap; gap: .75rem; align-items: stretch; }
.ks-content .kesearchbox input[type="text"],
.ks-content .kesearchbox input[type="search"],
.ks-content #ke_search_sword { flex: 1 1 260px; width: auto; }
.ks-content .kesearchbox .clearer { display: none; }
.ks-content #kesearch_num_results,
.ks-content .kesearch_num_results { margin: 2rem 0 1rem; color: var(--ks-text); font-size: .95rem; }
.ks-content .result-list-item { padding: 1.25rem 0; border-top: 1px solid var(--ks-line); }
.ks-content .result-list-item:last-child { border-bottom: 1px solid var(--ks-line); }
.ks-content .result-title { margin: 0 0 .35rem; font-size: 1.2rem; font-weight: 650; }
.ks-content .result-title a { color: var(--ks-ink); text-decoration: none; }
.ks-content .result-title a:hover { color: var(--ks-accent); text-decoration: underline; }
.ks-content .result-teaser { margin: 0; color: var(--ks-text); }
.ks-content .result-teaser .hit { background: #fae6d3; color: #793600; padding: 0 .15em; border-radius: 3px; }
.ks-content .kesearch_pagebrowser ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.ks-content .kesearch_pagebrowser a,
.ks-content .kesearch_pagebrowser span { display: grid; place-items: center; min-width: 44px; min-height: 44px; border: 1px solid var(--ks-line); border-radius: 99px; background: var(--ks-white); color: var(--ks-ink); text-decoration: none; }
.ks-content .kesearch_pagebrowser .current { border-color: var(--ks-ink); background: var(--ks-ink); color: var(--ks-white); }

/* ===== Seitenwechsel unter Projekte und Wissen ===== */
.ks-pager { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: center; margin-top: 2.5rem; }
.ks-pager[hidden] { display: none; }
.ks-pager button { min-width: 44px; min-height: 44px; padding: .35rem .9rem; border: 1px solid var(--ks-line); border-radius: 99px; background: var(--ks-white); color: var(--ks-ink); font: inherit; font-weight: 600; cursor: pointer; }
.ks-pager button:hover:not(:disabled) { border-color: var(--ks-ink); }
.ks-pager button[aria-current="page"] { border-color: var(--ks-ink); background: var(--ks-ink); color: var(--ks-white); }
.ks-pager button:disabled { opacity: .4; cursor: default; }
.ks-pager button:focus-visible,
.ks-filters button:focus-visible { outline: 3px solid #98430855; outline-offset: 2px; }
[data-ks-card][hidden] { display: none; }

/* ===== Sitemap: ein Kärtchen pro Hauptbereich ===== */
.frame-type-menu_sitemap > ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.frame-type-menu_sitemap > ul > li { padding: 1.5rem 1.6rem 1.6rem; border: 1px solid var(--ks-line); border-radius: var(--ks-radius); background: var(--ks-white); }
.frame-type-menu_sitemap > ul > li > a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; color: var(--ks-ink); font-size: 1.25rem; font-weight: 700; text-decoration: none; }
.frame-type-menu_sitemap > ul > li > a::after { content: "→"; color: var(--ks-accent); font-weight: 600; transition: transform .15s; }
.frame-type-menu_sitemap > ul > li > a:hover { color: var(--ks-accent); }
.frame-type-menu_sitemap > ul > li > a:hover::after { transform: translateX(3px); }
.frame-type-menu_sitemap ul ul { margin: 1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--ks-line); list-style: none; }
.frame-type-menu_sitemap ul ul li + li { margin-top: .15rem; }
.frame-type-menu_sitemap ul ul a { display: flex; align-items: center; gap: .55rem; min-height: 40px; color: var(--ks-text); text-decoration: none; }
.frame-type-menu_sitemap ul ul a::before { content: ""; flex: none; width: 6px; height: 6px; border-top: 1.6px solid var(--ks-accent); border-right: 1.6px solid var(--ks-accent); transform: rotate(45deg); }
.frame-type-menu_sitemap ul ul a:hover { color: var(--ks-accent); text-decoration: underline; }
.frame-type-menu_sitemap ul ul ul { margin: .25rem 0 .25rem 1.1rem; padding: 0; border-top: 0; font-size: .95rem; }

/* Teaser auf Karten auf 4 Zeilen kürzen, damit die Karten gleich wirken */
.ks-project-body > p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }

/* ===== Seite «Familie» ===== */
.ks-section-tight { padding-bottom: 2rem; }
.ks-intro { max-width: 760px; font-size: 1.08rem; }

/* ===== Profilkarte (Frame Class «profile») für «Das sind wir» =====
   Inhaltselement «Text & Bilder», ein Bild, Rahmen «Keller-Seiler: Profilkarte». */
.frame-profile { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 2.5rem; align-items: start;
    margin: 0 0 1.5rem; padding: 2rem; border: 1px solid var(--ks-line); border-radius: var(--ks-radius); background: var(--ks-white); }
.frame-profile .ce-textpic { display: contents; }
.frame-profile .ce-gallery { grid-column: 1; grid-row: 1 / span 2; float: none; margin: 0; width: auto; }
.frame-profile .ce-outer, .frame-profile .ce-inner, .frame-profile .ce-row, .frame-profile .ce-column { position: static; float: none; right: auto; width: auto; margin: 0; padding: 0; }
.frame-profile figure { margin: 0; }
.frame-profile img { display: block; width: 200px; height: 200px; border-radius: 50%; object-fit: cover; }
.frame-profile figcaption { margin-top: .5rem; color: var(--ks-text); font-size: .9rem; text-align: center; }
.frame-profile > header { grid-column: 2; }
.frame-profile > header h2, .frame-profile > header h3 { margin: 0; font-size: 1.75rem; }
.frame-profile > header p { margin: .25rem 0 0; color: var(--ks-accent); font-weight: 600; } /* Untertitel = Rolle */
.frame-profile .ce-bodytext { grid-column: 2; margin-top: .75rem; }
.frame-profile .ce-bodytext > :first-child { margin-top: 0; }
.frame-profile .ce-bodytext ul { padding-left: 1.1rem; }
.frame-profile:nth-of-type(even) { background: var(--ks-sand); border-color: transparent; }
@media (max-width: 759px) {
    .frame-profile { grid-template-columns: 1fr; text-align: center; padding: 1.5rem; }
    .frame-profile .ce-gallery, .frame-profile > header, .frame-profile .ce-bodytext { grid-column: 1; grid-row: auto; }
    .frame-profile img { width: 140px; height: 140px; margin: 0 auto 1rem; }
    .frame-profile .ce-bodytext { text-align: left; }
}

/* ===== Menü-Elemente als Kacheln (Unterseiten, Unterseiten mit Zusammenfassung, ausgewählte Seiten) ===== */
.frame-type-menu_subpages > ul,
.frame-type-menu_abstract > ul,
.frame-type-menu_pages > ul,
.frame-type-menu_card_list > ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.frame-type-menu_subpages > ul > li,
.frame-type-menu_abstract > ul > li,
.frame-type-menu_pages > ul > li { position: relative; padding: 1.5rem 1.6rem; border: 1px solid var(--ks-line); border-radius: var(--ks-radius); background: var(--ks-white); transition: border-color .15s; }
.frame-type-menu_subpages > ul > li:hover,
.frame-type-menu_abstract > ul > li:hover,
.frame-type-menu_pages > ul > li:hover { border-color: var(--ks-accent); }
.frame-type-menu_subpages > ul > li > a,
.frame-type-menu_abstract > ul > li > a,
.frame-type-menu_pages > ul > li > a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; color: var(--ks-ink); font-size: 1.2rem; font-weight: 700; text-decoration: none; }
/* ganze Kachel klickbar */
.frame-type-menu_subpages > ul > li > a::before,
.frame-type-menu_abstract > ul > li > a::before,
.frame-type-menu_pages > ul > li > a::before { content: ""; position: absolute; inset: 0; border-radius: var(--ks-radius); }
.frame-type-menu_subpages > ul > li > a::after,
.frame-type-menu_abstract > ul > li > a::after,
.frame-type-menu_pages > ul > li > a::after { content: "→"; color: var(--ks-accent); }
.frame-type-menu_abstract > ul > li p { margin: .5rem 0 0; color: var(--ks-text); }

/* Profilkarte: Name nicht als unterstrichener Link, Untertitel (h3) klein in Orange */
.frame-profile > header h2 a, .frame-profile > header h3 a { color: var(--ks-ink); text-decoration: none; }
.frame-profile > header h2 a:hover { color: var(--ks-accent); }
.frame-profile > header h2 + h3,
.frame-profile > header h2 + p { margin: .35rem 0 0; color: var(--ks-accent); font-size: 1rem; font-weight: 650; letter-spacing: .01em; }

/* Profilkarten im Bereich «Familienmitglieder»: volle Breite statt Viertelspalte */
.ks-family-grid > .frame-profile { grid-column: 1 / -1; display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 2.5rem; align-items: start;
    margin: 0; padding: 2rem; border: 0; border-radius: var(--ks-radius); background: var(--ks-white); text-align: left; }
.ks-family .ks-family-grid > .frame-profile:nth-of-type(even) { background: var(--ks-white); }
.ks-family-grid > .frame-profile > header h2 { margin: 0; font-size: 1.75rem; }
.ks-family-grid > .frame-profile .ce-bodytext p { margin: 0 0 .75rem; font-size: 1rem; }
@media (max-width: 759px) {
    .ks-family-grid > .frame-profile { grid-template-columns: 1fr; text-align: center; padding: 1.5rem; }
    .ks-family-grid > .frame-profile .ce-gallery,
    .ks-family-grid > .frame-profile > header,
    .ks-family-grid > .frame-profile .ce-bodytext { grid-column: 1; grid-row: auto; }
    .ks-family-grid > .frame-profile .ce-bodytext { text-align: left; }
}

/* ===== Kompakte Menüleiste beim Scrollen ===== */
.ks-header { z-index: 20; }
.ks-stuck .ks-topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 30;
    padding: .3rem max(clamp(1.25rem, 7vw, 7rem), calc((100% - 73rem) / 2));
    background: #111820f2; border-bottom: 1px solid #ffffff1f;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.ks-stuck .ks-logo { font-size: 1.05rem; }
.ks-stuck .ks-search { width: 40px; height: 40px; }
@media (prefers-reduced-motion: no-preference) {
    .ks-stuck .ks-topbar { animation: ks-bar-in .2s ease-out; }
    @keyframes ks-bar-in { from { transform: translateY(-100%); } to { transform: none; } }
}
/* Handy: eine einzige Zeile – Menü links (wischbar, falls es nicht passt), Symbole rechts, Logo ausgeblendet */
@media (max-width: 759px) {
    .ks-stuck .ks-topbar { grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; padding-inline: 1rem; }
    .ks-stuck .ks-logo { display: none; }
    .ks-stuck .ks-topbar .ks-nav { grid-column: 1; grid-row: 1; flex-wrap: nowrap; justify-content: start; gap: 0 1rem;
        overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
    .ks-stuck .ks-topbar .ks-nav::-webkit-scrollbar { display: none; }
    .ks-stuck .ks-nav a { flex: none; font-size: .88rem; }
    .ks-stuck .ks-topbar .ks-tools { grid-column: 2; grid-row: 1; gap: .4rem; }
}

/* ===== «Nach oben» unten rechts ===== */
.ks-totop {
    position: fixed; z-index: 25; right: 1rem; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #ffffff33; border-radius: 50%;
    background: var(--ks-dark); color: var(--ks-white);
    opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility 0s .2s;
}
.ks-totop.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s; }
.ks-totop:hover { background: var(--ks-accent); color: var(--ks-white); }
.ks-totop:focus-visible { outline: 3px solid #98430855; outline-offset: 3px; }
@media (min-width: 760px) { .ks-totop { right: 1.5rem; bottom: 1.5rem; } }

/* ===== Linkliste (Frame Class «linklist») =====
   Pro Thema ein Textelement: Überschrift = Thema, Text = Aufzählung «Link – kurze Beschreibung».
   Mehrere Linklisten hintereinander stehen als Karten nebeneinander. */
.ks-content:has(> .frame-linklist) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1.25rem; align-items: start; }
.ks-content:has(> .frame-linklist) > :not(.frame-linklist) { grid-column: 1 / -1; }
.frame-linklist { padding: 1.5rem 1.6rem; border: 1px solid var(--ks-line); border-radius: var(--ks-radius); background: var(--ks-white); }
.frame-linklist > header h2, .frame-linklist > header h3 { margin: 0 0 .75rem; font-size: 1.3rem; }
.frame-linklist > header p { margin: -.4rem 0 .75rem; color: var(--ks-text); font-size: .95rem; }
.frame-linklist ul { margin: 0; padding: 0; list-style: none; }
.frame-linklist li { padding: .7rem 0; border-top: 1px solid var(--ks-line); color: var(--ks-text); font-size: .95rem; line-height: 1.5; }
.frame-linklist li:first-child { border-top: 0; padding-top: .2rem; }
.frame-linklist li:last-child { padding-bottom: 0; }
.frame-linklist li a { color: var(--ks-ink); font-size: 1rem; font-weight: 650; text-decoration: none; }
.frame-linklist li a:hover { color: var(--ks-accent); text-decoration: underline; }
.frame-linklist p { margin: 0 0 .5rem; }

/* Pfeil-Symbol bei externen Links (überall im Inhalt, nicht nur in der Linkliste) */
.ks-content a[href^="http"]:not([href*="keller-seiler.ch"])::after,
.ks-content a[target="_blank"]::after {
    content: ""; display: inline-block; width: .8em; height: .8em; margin-left: .25em; vertical-align: -.05em;
    background-color: currentColor; opacity: .75;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Kein Pfeil auf Bild-Links und Schaltflächen */
.ks-content a:has(img)::after, .ks-content .btn::after, .ks-content [class*="ks-project"] a::after { content: none; }

/* ===== Hinweis-Band (Frame Class «teaser») für Menü-Elemente =====
   Dunkles, breites Band mit Symbol, Titel, Zusammenfassung und Pfeil – z. B. unter der Wissen-Liste. */
.frame-teaser { margin: 3rem 0 0; }
.frame-teaser > header h2, .frame-teaser > header h3 { margin: 0 0 1rem; font-size: 1.35rem; }
.frame-teaser > ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.frame-teaser > ul > li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 1.25rem; align-items: center;
    padding: 1.4rem 1.6rem; border: 0; border-radius: var(--ks-radius); background: var(--ks-dark); color: #ffffffc7; transition: transform .15s, box-shadow .15s; }
.frame-teaser > ul > li::before { content: ""; grid-row: 1 / span 2; width: 56px; height: 56px; border: 1px solid #ffb87859; border-radius: 14px;
    background: #ffb8781a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffb878' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 005.7 0l3-3a4 4 0 00-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 00-5.7 0l-3 3a4 4 0 005.7 5.7l1-1'/%3E%3C/svg%3E") center / 28px no-repeat; }
.frame-teaser > ul > li:hover { background: #26344a; }
.frame-teaser > ul > li > a { grid-column: 2; display: block; color: var(--ks-white); font-size: 1.3rem; font-weight: 700; text-decoration: none; }
.frame-teaser > ul > li > a::before { content: ""; position: absolute; inset: 0; border-radius: var(--ks-radius); }   /* ganzes Band klickbar */
.frame-teaser > ul > li > a::after { content: "→"; position: absolute; right: 1.6rem; top: 50%; transform: translateY(-50%); color: var(--ks-gold); font-size: 1.4rem; }
.frame-teaser > ul > li > :not(a) { grid-column: 2; margin: .25rem 2.5rem 0 0; font-size: .98rem; }
.frame-teaser a:focus-visible { outline: none; }
.frame-teaser > ul > li:focus-within { outline: 3px solid #ffb87880; outline-offset: 3px; }
@media (max-width: 560px) {
    .frame-teaser > ul > li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 1rem; padding: 1.2rem 1.25rem; }
    .frame-teaser > ul > li::before { width: 44px; height: 44px; background-size: 22px; border-radius: 12px; }
    .frame-teaser > ul > li > a { padding-right: 1.75rem; font-size: 1.15rem; }
    .frame-teaser > ul > li > a::after { right: 1.25rem; }
    .frame-teaser > ul > li > :not(a) { margin-right: 0; }
}