/* Seitenrahmen aus den veröffentlichten BWJ-Unterseiten; ausschliesslich lokale Referenzseite. */
html{scroll-padding-top:100px;scroll-behavior:auto}.ref-page{overflow-x:clip}.ref-page .site-header{top:0}.ref-preview-bar{position:fixed;z-index:1400;inset:0 0 auto;height:32px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:5px 24px;background:#071D32;color:#EFE9DC;font-size:11px;line-height:1.5}.ref-preview-bar a{color:inherit;text-decoration:underline;text-underline-offset:3px}.ref-page .ref-intro{padding-inline:40px;padding-top:126px;padding-bottom:62px}.ref-breadcrumb{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:36px;color:var(--text-dim);font-size:12px;line-height:1.6}.ref-breadcrumb a{text-decoration:underline;text-underline-offset:4px}.ref-page .ref-intro h1{font-size:clamp(36px,3.3vw,46px);line-height:1.14;font-weight:600;letter-spacing:-.035em;max-width:24ch;margin-bottom:24px}.ref-page .ref-lead{font-size:17px;line-height:1.7;max-width:65ch}.ref-page .ref-copy{min-width:0}.ref-page .ref-copy h2{text-wrap:balance}.ref-page .ref-copy .ref-proof{margin-top:18px}.ref-page .ref-photo-status{font-size:13px;line-height:1.65;margin:8px 0 12px}.ref-page .ref-proof summary{font-size:13px;color:var(--text-dim)}.ref-page .ref-entry-media{padding-block:50px 56px}.ref-page .ref-review-panel{padding-block:12px 52px}.ref-review-details{border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.ref-review-details>summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:56px;list-style:none;padding:15px 0;font-size:13px;color:var(--text-dim)}.ref-review-details>summary::-webkit-details-marker{display:none}.ref-review-details>summary::after{content:'+';font-size:22px;line-height:1;font-weight:400}.ref-review-details[open]>summary::after{content:'−'}.ref-review-panel .ref-checks{background:transparent;color:var(--text);padding:24px 0}.ref-review-panel .ref-checks>.ref-shell{padding:0}.ref-review-panel .ref-checks .ref-label{color:var(--text-dim);opacity:1}.ref-review-panel .ref-checks h2{font-size:26px}.ref-review-links{display:flex;flex-wrap:wrap;gap:12px 24px;padding-bottom:24px}.ref-review-links a{font-size:13px;line-height:1.6;text-decoration:underline;text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center}.ref-review-panel .ref-checks :focus-visible{outline-color:#071D32}.ref-contact{padding:70px 0 18px}.ref-contact h2{font-size:clamp(31px,3.25vw,44px);line-height:1.14;margin:0 0 22px;letter-spacing:-.035em}.ref-contact>.ref-shell>p:not(.section-label){font-size:17px;line-height:1.7;max-width:58ch;color:var(--text-muted);margin:0}.ref-contact-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}.ref-page .offer-footer{padding-top:52px}.ref-page .footer-bottom p{margin:0}.ref-page .footer-nav ul{list-style:none}.ref-page :is(.ref-entry,.ref-contact,.ref-review-panel){scroll-margin-top:14px}
@media(max-width:999px){.ref-page .site-header .nav-menu{padding-top:113px}.ref-page .ref-intro{padding-top:120px}.ref-page .ref-copy h2{font-size:29px}.ref-page .ref-entry-media{padding-block:42px 48px}.ref-page .ref-check-list{grid-template-columns:1fr}}
@media(max-width:760px){html{scroll-padding-top:80px}.ref-preview-bar{padding-inline:20px;font-size:10px}.ref-page .ref-shell{padding-inline:var(--px,22px)}.ref-page .ref-intro{padding-top:130px;padding-bottom:42px}.ref-breadcrumb{margin-bottom:28px}.ref-page .ref-intro h1{font-size:31px;max-width:20ch}.ref-page .ref-lead{font-size:16px;line-height:1.65}.ref-page .ref-copy h2{font-size:26px;line-height:1.2}.ref-page .ref-entry-media{padding-block:32px 38px}.ref-page .ref-review-panel{padding-block:4px 36px}.ref-contact{padding:46px 0 10px}.ref-contact h2{font-size:31px}.ref-contact>.ref-shell>p:not(.section-label){font-size:16px}.ref-page .offer-footer{padding-top:44px}.ref-page .footer-brand-copy{margin:0}.ref-page .footer-inner{margin-bottom:30px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{.ref-preview-bar,.ref-page .site-header,.ref-contact,.ref-review-panel{display:none}.ref-page .ref-intro{padding-top:0}.ref-page .ref-shell{padding-inline:0}.ref-page .offer-footer{break-inside:avoid}}
@media(max-width:760px){.ref-page .ref-entry-media{display:flex;flex-direction:column;gap:24px}.ref-page .ref-entry-media .ref-visual{width:100%}.ref-page .ref-figure-video{max-width:260px}.ref-page .ref-entry-media .ref-visual:has(img[src*="Seleger"]){max-width:360px}}
/* Auftrittsgeschichten: musikalische Rolle und tatsächliche Stationen klarer erzählen. */
.ref-story{max-width:65ch}.ref-page .ref-story-lead{font-size:20px;line-height:1.45;letter-spacing:-.015em;color:var(--text);margin:0 0 22px}.ref-story-paragraph{font-size:16px;line-height:1.75;color:var(--text-muted);margin:0 0 18px}.ref-moments{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:22px}.ref-page .ref-moments h3{font-size:15px;line-height:1.5;font-weight:600;letter-spacing:0;margin:0 0 7px}.ref-moments p{font-size:15px;line-height:1.7;color:var(--text-muted);margin:0}.ref-page .ref-story-note{font-size:13px;line-height:1.65;color:var(--text-dim);margin:24px 0 0}.ref-page .ref-copy>.ref-location{margin-bottom:20px}.ref-page .ref-copy>.ref-proof{margin-top:22px}
@media(min-width:1000px){.ref-page .ref-entry-media{padding-block:60px 64px}}
@media(max-width:999px){.ref-page .ref-story-lead{font-size:18px}.ref-story-paragraph{font-size:15px;line-height:1.7}.ref-moments{gap:20px}}
@media(max-width:760px){.ref-page .ref-story-lead{font-size:18px;line-height:1.45;margin-bottom:20px}.ref-story-paragraph{font-size:15px;line-height:1.75}.ref-page .ref-moments h3{font-size:15px}.ref-moments p{font-size:15px;line-height:1.7}.ref-moments{margin-top:22px;gap:22px}}
@media(min-width:1000px) and (min-height:850px){.ref-page .ref-entry-media>.ref-visual{position:sticky;top:116px}}

/* Zwei Bildperspektiven auf denselben Abend, in gleicher Breite bündig gesetzt. */
.ref-page .ref-visual-stack{display:flex;flex-direction:column;gap:28px;position:static!important}
.ref-page .ref-figure-atmosphere{width:100%;align-self:stretch}
.ref-page .ref-figure-atmosphere figcaption{max-width:42ch}
@media(max-width:760px){.ref-page .ref-visual-stack{gap:22px}.ref-page .ref-figure-atmosphere{width:100%}}

/* Mobil folgt die Atmosphärenaufnahme auf den Text, damit der Einstieg kurz bleibt. */
@media(max-width:760px){.ref-page #guido-fluri .ref-visual-stack{display:contents}.ref-page #guido-fluri>.ref-copy{order:1}.ref-page #guido-fluri .ref-figure-atmosphere{order:2;align-self:stretch}}

/* Freigegeben am 28.10.2026: Bildformat und musikalische Situation bestimmen die Komposition. */
.ref-page .ref-intro{display:grid;grid-template-columns:1.2fr 1fr;column-gap:100px;align-items:end;padding-top:128px;padding-bottom:60px}.ref-intro .ref-breadcrumb{grid-column:1/-1;margin-bottom:28px}.ref-intro>.ref-label{grid-column:1/-1;margin-bottom:22px}.ref-page .ref-intro h1{font-size:clamp(48px,4.3vw,62px);font-weight:500;line-height:1.07;letter-spacing:-.045em;max-width:15ch;margin:0}.ref-page .ref-intro .ref-lead{font-size:18px;line-height:1.65;max-width:36ch;padding-bottom:3px}
.ref-page .ref-entry-media{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:28px;row-gap:36px;padding-block:86px 92px;align-items:center}.ref-page .ref-entry-media>.ref-visual{position:static;top:auto;grid-column:1/7;max-width:none}.ref-page .ref-entry-media>.ref-copy{grid-column:8/13;padding-top:0}.ref-page .ref-copy h2{font-size:clamp(30px,2.6vw,38px);line-height:1.14;font-weight:500;text-wrap:initial;margin-bottom:14px;max-width:23ch}.ref-page .ref-entry-label{margin-bottom:20px}.ref-page .ref-copy>.ref-location{font-size:13px;margin-bottom:30px}.ref-page .ref-story-lead{font-size:21px;line-height:1.45;margin-bottom:24px;max-width:35ch}.ref-page .ref-story-paragraph{font-size:16px;line-height:1.75}.ref-page .ref-moments{gap:25px;margin-top:28px}.ref-page .ref-moments h3{font-size:15px}.ref-page .ref-moments p{font-size:15px;line-height:1.75}.ref-page .ref-figure img{width:100%;height:auto;object-fit:contain}.ref-page .ref-figure figcaption{font-size:12px;margin-top:12px}
/* Grosses Bühnenbild eröffnet die Folge. Unter dem Bild: Titel links, Geschichte rechts. */
.ref-page #diplomfeier{display:block;padding-top:0;padding-bottom:86px;border-top:0}.ref-page #diplomfeier>.ref-visual{width:100%;position:static}.ref-page #diplomfeier>.ref-copy{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;column-gap:90px;align-items:start}.ref-page #diplomfeier .ref-entry-label{grid-column:1;grid-row:1}.ref-page #diplomfeier h2{grid-column:1;grid-row:2;max-width:17ch;font-size:38px}.ref-page #diplomfeier .ref-location{grid-column:1;grid-row:3}.ref-page #diplomfeier .ref-story{grid-column:2;grid-row:1/5}.ref-page #diplomfeier .ref-story-lead{max-width:30ch}
/* Kompakteres Duo-Bild gegenüber der breiten Bühne. */
.ref-page #kkl-verwaltungsrat>.ref-copy{grid-column:1/6;grid-row:1}.ref-page #kkl-verwaltungsrat>.ref-visual{grid-column:7/13;grid-row:1}
/* Hochformat: ruhige Bildspalte und Platz für die musikalischen Stationen. */
.ref-page #hochzeit>.ref-visual{grid-column:1/6;max-width:none}.ref-page #hochzeit>.ref-copy{grid-column:7/13;max-width:57ch}
/* Zwei Ansichten eines Abends bleiben gleich breit und bündig. */
.ref-page #guido-fluri{align-items:start}.ref-page #guido-fluri>.ref-copy{grid-column:1/6;grid-row:1;padding-top:16px}.ref-page #guido-fluri>.ref-visual{grid-column:7/13;grid-row:1;gap:30px}.ref-page #guido-fluri .ref-figure-atmosphere{width:100%}
.ref-page #haus-der-farbe>.ref-visual{grid-column:2/7}.ref-page #haus-der-farbe>.ref-copy{grid-column:8/13}
/* Intimer Schluss mit einem Hochformatfilm in seiner natürlichen Proportion. */
.ref-page #eroeffnung>.ref-copy{grid-column:1/7;grid-row:1;max-width:57ch}.ref-page #eroeffnung>.ref-visual{grid-column:9/12;grid-row:1}.ref-page #eroeffnung .ref-figure-video{width:100%;max-width:none}.ref-page #eroeffnung{padding-bottom:100px}
.ref-page .ref-contact{padding-top:76px}.ref-page .ref-contact h2{font-size:44px;font-weight:500}
@media(max-width:1199px){.ref-page .ref-intro{column-gap:48px}.ref-page .ref-entry-media{column-gap:24px;padding-block:66px 72px}.ref-page .ref-copy h2{font-size:30px}.ref-page #diplomfeier>.ref-copy{column-gap:48px}.ref-page #diplomfeier h2{font-size:32px}.ref-page #haus-der-farbe>.ref-visual{grid-column:1/7}.ref-page #eroeffnung>.ref-visual{grid-column:9/13}}

/* Tablet: breites Auftaktbild, anschliessend zwei ausgewogene Spalten. */
@media(min-width:761px) and (max-width:999px){
 .ref-page .ref-shell{padding-inline:28px}
 .ref-page .ref-intro{display:block;padding-top:116px;padding-bottom:44px}
 .ref-page .ref-intro h1{font-size:46px;max-width:18ch;margin-bottom:24px}
 .ref-page .ref-intro .ref-lead{font-size:17px;max-width:52ch;padding:0}
 .ref-page .ref-entry-media{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px;padding-block:56px 60px;align-items:start}
 .ref-page :is(#kkl-verwaltungsrat,#guido-fluri)>.ref-copy{grid-column:1;grid-row:1}
 .ref-page :is(#kkl-verwaltungsrat,#guido-fluri)>.ref-visual{grid-column:2;grid-row:1}
 .ref-page :is(#hochzeit,#haus-der-farbe)>.ref-visual{grid-column:1;grid-row:1}
 .ref-page :is(#hochzeit,#haus-der-farbe)>.ref-copy{grid-column:2;grid-row:1}
 .ref-page #eroeffnung>.ref-copy{grid-column:1;grid-row:1}
 .ref-page #eroeffnung>.ref-visual{grid-column:2;grid-row:1;max-width:280px;width:100%;justify-self:end}
 .ref-page .ref-copy h2{font-size:28px;line-height:1.18}
 .ref-page .ref-story-lead{font-size:19px}.ref-page .ref-story-paragraph{font-size:15px;line-height:1.75}
 .ref-page .ref-copy>.ref-location{margin-bottom:24px}
 .ref-page #diplomfeier{padding-bottom:56px}
 .ref-page #diplomfeier>.ref-copy{grid-template-columns:.8fr 1.2fr;column-gap:36px;margin-top:28px}
 .ref-page #diplomfeier h2{font-size:28px}
 .ref-page #guido-fluri>.ref-copy{padding-top:0}
 .ref-page #eroeffnung{padding-bottom:64px}
 .ref-page .ref-contact{padding-top:56px}.ref-page .ref-contact h2{font-size:36px}
}
/* Smartphone: Bild, Einordnung und Geschichte in einer klaren Leserichtung. */
@media(max-width:760px){
 html{scroll-padding-top:80px}
 .ref-page .ref-shell{padding-inline:22px}
 .ref-page .ref-intro{display:block;padding-top:104px;padding-bottom:34px}
 .ref-intro .ref-breadcrumb{margin-bottom:26px;font-size:11px}
 .ref-intro>.ref-label{margin-bottom:16px;font-size:10px}
 .ref-page .ref-intro h1{font-size:36px;line-height:1.1;max-width:15ch;margin-bottom:20px}
 .ref-page .ref-intro .ref-lead{font-size:16px;line-height:1.65;max-width:38ch;padding:0}
 .ref-page .ref-entry-media{display:flex;flex-direction:column;align-items:stretch;gap:26px;padding-block:40px 44px}
 .ref-page .ref-entry-media>.ref-copy{width:100%;max-width:none;padding:0}
 .ref-page .ref-entry-media>.ref-visual{width:100%;max-width:none;position:static}
 .ref-page .ref-copy h2{font-size:28px;line-height:1.16;max-width:24ch;margin-bottom:12px}
 .ref-page .ref-entry-label{font-size:10px;margin-bottom:14px}
 .ref-page .ref-copy>.ref-location{font-size:13px;line-height:1.6;margin-bottom:22px}
 .ref-page .ref-story-lead{font-size:19px;line-height:1.45;max-width:none;margin-bottom:20px}
 .ref-page .ref-story-paragraph{font-size:16px;line-height:1.7;margin-bottom:18px}
 .ref-page .ref-moments{margin-top:24px;gap:24px}
 .ref-page .ref-moments h3{font-size:15px;line-height:1.5;margin-bottom:7px}
 .ref-page .ref-moments p{font-size:16px;line-height:1.7}
 .ref-page .ref-figure figcaption{font-size:12px;line-height:1.6;margin-top:10px}
 .ref-page #diplomfeier{display:block;padding-top:0;padding-bottom:44px}
 .ref-page #diplomfeier>.ref-copy{display:block;margin-top:26px}
 .ref-page #diplomfeier h2{font-size:28px;max-width:20ch}
 .ref-page #diplomfeier .ref-story-lead{max-width:none}
 .ref-page #guido-fluri>.ref-visual{display:contents}
 .ref-page #guido-fluri .ref-figure{width:100%;align-self:stretch}
 .ref-page #guido-fluri>.ref-copy{order:1;padding:0}
 .ref-page #guido-fluri .ref-figure-atmosphere{order:2;width:100%}
 .ref-page #guido-fluri .ref-figure-atmosphere figcaption{max-width:none}
 .ref-page #eroeffnung>.ref-visual{width:100%;max-width:300px;align-self:center}
 .ref-page #eroeffnung{padding-bottom:48px}
 .ref-page .ref-contact{padding-top:48px}
 .ref-page .ref-contact h2{font-size:32px;line-height:1.15}
 .ref-page .ref-contact>.ref-shell>p:not(.section-label){font-size:16px;line-height:1.7}
 .ref-page .ref-story-note{font-size:13px;line-height:1.65}
 .ref-page .footer-contact-links a{overflow-wrap:anywhere}
 .ref-page .footer-inner{gap:28px}
}
@media(max-width:360px){
 .ref-page .ref-shell{padding-inline:18px}
 .ref-page .ref-intro h1{font-size:32px}
 .ref-page .ref-copy h2,.ref-page #diplomfeier h2{font-size:26px}
 .ref-page .ref-story-lead{font-size:18px}
 .ref-page .ref-contact h2{font-size:30px}
}
/* Die Unterseite zeigt ihre Wortmarke sofort; die Startseiten-Introverwandlung entfällt hier. */
@media(max-width:760px){
 .ref-page .site-header{height:64px;--header-progress:1!important;--header-cream-opacity:1!important;--header-ink:#071D32!important}
 .ref-page .site-header.header-on-light{--header-cream-opacity:0!important;--header-ink:#EFE9DC!important}
 .ref-page .site-header::before,.ref-page .site-header::after{transform:none}
 .ref-page .site-header .nav{height:64px}
 .ref-page .site-header .nav-home .nav-mobile-mark{display:none!important}
 .ref-page .site-header .nav-home .nav-wordmark{top:32px;transform:translateY(-50%);opacity:1!important;pointer-events:auto}
 .ref-page .site-header .nav-home .nav-wordmark-light{opacity:0!important;pointer-events:none}
 .ref-page .site-header.header-on-light .nav-home .nav-wordmark{opacity:0!important;pointer-events:none}
 .ref-page .site-header.header-on-light .nav-home .nav-wordmark-light{opacity:1!important;pointer-events:auto}
 .ref-page .site-header .nav-toggle{transform:none}
 .ref-page .site-header .nav-menu{top:64px;height:calc(100dvh - 64px);padding:24px 22px max(28px,env(safe-area-inset-bottom))}
}

/* Menühöhe ohne die ausschliesslich lokale Vergleichsleiste. */
@media(min-width:761px) and (max-width:999px){
 .ref-page .site-header .nav-menu{top:70px;height:calc(100dvh - 70px);padding:26px 28px max(28px,env(safe-area-inset-bottom))}
}