/* =====================================================================
   Klickdummy Vorschlag C «Wegweiser» · bellevue-stadelhofen.ch
   Verzeichnis und Auskunft in Schweizer Rastertypografie.
   Grundlage: projektplan/04-gestaltungsvorschlaege.md, Kap. 3.0 und 3.3
   Bei jeder Komponente steht das Avada-Element, das sie auf der Website umsetzt.
   ===================================================================== */

/* --- Bauvorgabe Klickdummy C (unverändert aus 3.3) ------------------- */
:root{
  --c-bg:#ffffff; --c-surface:#e6f0fa; --c-band:#c9e1f5; --c-dark:#1c1c1c;
  --c-text:#1c1c1c; --c-text-muted:#4f4e4d; --c-text-on-dark:#ffffff;
  --c-graphite:#4f4e4d; --c-sky-light:#c9e1f5; --c-sky:#abd0f0;
  --c-link:#1c1c1c; --c-link-hover:#4f4e4d; --c-row-hover:#abd0f0;
  --c-line:#1c1c1c; --c-line-soft:#e2e2e2; --c-border-ui:#8c8c8c; --c-placeholder:#767676;
  --c-focus:#1c1c1c; --c-error:#b3261e; --c-success:#2e7d32;
  --font-head:"Inter",system-ui,sans-serif; --font-body:"Inter",system-ui,sans-serif; --font-ui:"Inter",system-ui,sans-serif;
  --fs-h1:56px; --fs-h2:34px; --fs-h3:22px; --fs-h4:18px; --fs-label:13px; --fs-lead:22px; --fs-body:17px; --fs-list:15px; --fs-nav:15px; --fs-btn:16px;
  --fs-h1-m:36px; --fs-h2-m:26px; --fs-h3-m:20px; --fs-h4-m:17px; --fs-lead-m:19px; --fs-body-m:16px; --fs-nav-m:18px;
  --fw-head:700; --fw-sub:600; --fw-body:400; --fw-ui:500; --lh-head:1.05; --lh-body:1.6; --ls-head:-.02em; --ls-label:.06em;
  --num:"tnum" 1;
  --radius-btn:0; --radius-card:0; --radius-img:0; --radius-input:0;
  --space:8px; --section-y:80px; --section-y-t:56px; --section-y-m:40px;
  --container:1200px; --container-text:680px; --gutter:24px; --cols:12; --page-pad:32px; --page-pad-m:16px;
  --line-w:1px; --line-strong:2px; --active-bar:3px;
  --utility-h:40px; --header-h:80px; --header-h-m:64px; --logo-h:44px; --logo-h-m:36px;
  --titleband-pad:56px 0 48px; --titleband-pad-m:32px 0 28px; --row-h-m:56px;
  --btn-h:48px; --btn-pad:14px 24px; --input-h:50px; --focus-ring:3px solid var(--c-focus); --focus-offset:2px;
  /* Breakpoints: Menü ≤1100 · Tablet ≤1024 · Mobile ≤640 */
}

/* --- Ergänzende Dummy-Variablen (abgeleitet, keine neuen Farben) ----- */
:root{
  --pad:var(--page-pad);
  --sec:var(--section-y);
  --t-fast:120ms ease;            /* keine Animation über 200 ms */
  --label-h:44px;                 /* Etikett «Klickdummy» */
}
@media (max-width:1024px){ :root{ --sec:var(--section-y-t); } }
@media (max-width:640px){ :root{ --pad:var(--page-pad-m); --sec:var(--section-y-m); } }

/* =====================================================================
   Basis · Avada Global Options (Typografie, Farben, Links)
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0; background:var(--c-bg); color:var(--c-text);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:var(--lh-body); font-weight:var(--fw-body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{max-width:100%; height:auto; display:block}
a{color:var(--c-link); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em}
a:hover{color:var(--c-link-hover); text-decoration-thickness:2px}
button{font:inherit; color:inherit}
:focus-visible{outline:var(--focus-ring); outline-offset:var(--focus-offset)}
[tabindex="-1"]:focus{outline:none}
[hidden]{display:none !important}
h1,h2,h3,h4{font-family:var(--font-head); color:var(--c-text); margin:0}
h1,.h1{font-size:clamp(var(--fs-h1-m), 26.9px + 2.42vw, var(--fs-h1)); font-weight:var(--fw-head); line-height:var(--lh-head); letter-spacing:var(--ls-head); hyphens:auto; overflow-wrap:break-word}
h2,.h2{font-size:clamp(var(--fs-h2-m), 22.4px + .97vw, var(--fs-h2)); font-weight:var(--fw-head); line-height:1.15; letter-spacing:-.01em}
h3,.h3{font-size:clamp(var(--fs-h3-m), 19.1px + .24vw, var(--fs-h3)); font-weight:var(--fw-sub); line-height:1.3}
h4,.h4{font-size:var(--fs-h4); font-weight:var(--fw-sub); line-height:1.35}
p{margin:0 0 1em}
.lead{font-size:clamp(var(--fs-lead-m), 17.6px + .36vw, var(--fs-lead)); line-height:1.45; max-width:var(--container-text)}
.label{font-size:var(--fs-label); font-weight:var(--fw-ui); text-transform:uppercase; letter-spacing:var(--ls-label); line-height:1.4; margin:0 0 8px}
.muted{color:var(--c-text-muted)}
.num,time,.tel{font-variant-numeric:tabular-nums; font-feature-settings:var(--num)}
.sr-only{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.ext{white-space:nowrap}
.ico{width:20px; height:20px; flex:none; display:inline-block; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:square; stroke-linejoin:miter}
@media (max-width:640px){ body{font-size:var(--fs-body-m)} h4,.h4{font-size:var(--fs-h4-m)} }

/* Raster · Avada Container (Inhaltsbreite 1200 px, 12 Spalten, Abstand 24 px) */
.container{width:100%; max-width:calc(var(--container) + 2 * var(--pad)); margin:0 auto; padding:0 var(--pad)}
.grid{display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); column-gap:var(--gutter)}
.section{padding:var(--sec) 0}
.section + .section{padding-top:0}
.section--tight{padding:calc(var(--sec) * .6) 0}

/* Skip-Link */
.skip-link{position:absolute; left:8px; top:-100px; z-index:200; background:var(--c-dark); color:#fff; padding:12px 16px; font-weight:600; text-decoration:none}
.skip-link:focus{top:8px; color:#fff; outline:3px solid var(--c-sky); outline-offset:0}

/* =====================================================================
   Buttons · Avada Button-Element (Global Options: Radius 0, 48 px)
   ===================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:var(--btn-h); padding:var(--btn-pad); border:1px solid var(--c-dark); border-radius:var(--radius-btn);
  background:var(--c-dark); color:#fff; font-size:var(--fs-btn); font-weight:var(--fw-sub); line-height:1.2;
  text-decoration:none; cursor:pointer; transition:background var(--t-fast), color var(--t-fast);
}
.btn:hover{background:var(--c-graphite); border-color:var(--c-graphite); color:#fff; text-decoration:none}
.btn--line{background:transparent; color:var(--c-text)}
.btn--line:hover{background:var(--c-band); color:var(--c-text); border-color:var(--c-dark)}
.btn--block{display:flex; width:100%}
.btn .ico{width:20px; height:20px}
.textlink{display:inline-flex; align-items:center; gap:6px; min-height:44px; font-weight:var(--fw-ui)}
.textlink .ico{width:18px; height:18px}

/* Badge für Optionen (Kap. 3.0: nur mit sichtbarem Badge) */
.badge{display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border:1px solid var(--c-dark); background:#fff; color:var(--c-text); font-size:12px; font-weight:var(--fw-ui); letter-spacing:.02em; line-height:1.5; white-space:nowrap; vertical-align:middle; text-decoration:none}
.is-option{border:1px dashed var(--c-graphite); padding:24px; position:relative}
@media (max-width:640px){ .is-option{padding:16px} }

/* =====================================================================
   Header · Avada Layout Builder Header: Zeile 1 Servicezeile (Text + Menu-Element),
   Zeile 2 Logo-Element + Menu-Element mit Mega-Menü ohne Bilder + Button-Element
   ===================================================================== */
.site-header{background:var(--c-bg); position:relative; z-index:50}
.header-fallback{height:120px; display:flex; align-items:center}
.utility{height:var(--utility-h); border-bottom:1px solid var(--c-line-soft); font-size:14px}
.utility .container{height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px}
.utility a{color:var(--c-text); text-decoration:none; display:inline-flex; align-items:center; min-height:40px}
.utility a:hover{text-decoration:underline}
.utility-right{display:flex; align-items:center; gap:8px}
.utility-sep{color:var(--c-text-muted)}
.lang{display:inline-flex; align-items:center; gap:2px; font-weight:var(--fw-ui)}
.lang [aria-current]{font-weight:700}
.lang-btn{background:none; border:0; padding:0 6px; min-height:40px; min-width:32px; cursor:pointer; font-weight:var(--fw-ui); text-decoration:underline; text-underline-offset:.18em}
.lang-btn:hover{text-decoration-thickness:2px}
.lang-cur{padding:0 6px; font-weight:700}

.mainbar{border-bottom:1px solid var(--c-line)}
.mainbar .container{height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:24px}
.logo{display:flex; align-items:center; min-height:44px; flex:none}
.logo img{height:var(--logo-h); width:auto}
.nav{height:100%}
.nav-list{list-style:none; margin:0; padding:0; display:flex; align-items:stretch; height:100%; gap:4px}
.nav-list > li{display:flex; align-items:stretch}
.nav-link{
  display:flex; align-items:center; gap:6px; height:100%; padding:0 12px; border:0; background:none; cursor:pointer;
  font-size:var(--fs-nav); font-weight:var(--fw-ui); color:var(--c-text); text-decoration:none; position:relative;
}
.nav-link::after{content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:var(--active-bar); background:transparent; transition:background var(--t-fast)}
.nav-link:hover{color:var(--c-text)}
.nav-link:hover::after{background:var(--c-sky)}
.nav-link[aria-expanded="true"]::after,.nav-link.is-active::after{background:var(--c-dark)}
.nav-link:focus-visible{outline-offset:-3px}
.nav-link .ico{width:14px; height:14px; transition:transform var(--t-fast)}
.nav-link[aria-expanded="true"] .ico{transform:rotate(180deg)}
.nav-list > li.nav-cta{display:flex; align-items:center; margin-left:12px}
.nav-cta .btn{min-height:44px; padding:10px 20px}
.nav-cta .btn.is-active{box-shadow:0 0 0 2px #fff, 0 0 0 5px var(--c-sky)}
.menu-btn{display:none}

/* Text-Mega-Menü · Avada Mega-Menü ohne Bilder (Spalten + Beschreibung), per Klick */
.mega{position:absolute; left:0; right:0; top:100%; background:#fff; border-top:var(--line-strong) solid var(--c-line); border-bottom:1px solid var(--c-line); padding:32px 0 40px}
.mega .grid{row-gap:24px}
.mega-main{grid-column:span 8}
.mega-side{grid-column:span 4; border-left:1px solid var(--c-line); padding-left:var(--gutter)}
.mega .label{margin-bottom:12px}
.mega-rows{list-style:none; margin:0; padding:0; border-bottom:1px solid var(--c-line)}
.mega-rows a{display:grid; grid-template-columns:220px 1fr auto 20px; align-items:center; gap:16px; min-height:56px; padding:8px 12px; margin:0 -12px; border-top:1px solid var(--c-line); text-decoration:none; color:var(--c-text); transition:background var(--t-fast)}
.mega-rows a:hover,.mega-rows a:focus-visible{background:var(--c-row-hover)}
.mega-rows a:focus-visible{outline-offset:-3px}
.mega-rows strong{font-weight:var(--fw-sub); font-size:17px}
.mega-rows .ua{color:var(--c-text-muted); font-size:var(--fs-list); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mega-rows a:hover .ua{color:var(--c-text)}
.mega-rows .count{font-size:var(--fs-list); font-variant-numeric:tabular-nums}
.mega-links{list-style:none; margin:0; padding:0}
.mega-links li + li{margin-top:2px}
.mega-links a{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; text-decoration:none; font-weight:var(--fw-ui)}
.mega-links a:hover{text-decoration:underline}
.mega-links .badge{margin-left:auto}
.mega-cols{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; column-gap:var(--gutter); border-bottom:1px solid var(--c-line)}
.mega-cols a{display:flex; align-items:center; justify-content:space-between; min-height:56px; padding:8px 12px; margin:0 -12px; border-top:1px solid var(--c-line); text-decoration:none; font-weight:var(--fw-ui); font-size:17px; transition:background var(--t-fast)}
.mega-cols a:hover,.mega-cols a:focus-visible{background:var(--c-row-hover)}
.mega-cols a:focus-visible{outline-offset:-3px}
.mega-doc{display:block; border:1px solid var(--c-line); padding:16px; text-decoration:none; background:var(--c-surface)}
.mega-doc:hover{background:var(--c-row-hover)}
.mega-doc strong{display:block; font-size:17px; font-weight:var(--fw-sub)}
.mega-doc span{font-size:var(--fs-list); color:var(--c-text-muted)}

/* Mobile-Panel · Avada Menu-Element (Mobile Menu, Off-Canvas unter dem Header) */
.panel{display:none}
@media (max-width:1100px){
  .site-header{position:sticky; top:0}
  .utility,.nav,.mega{display:none !important}
  .mainbar .container{height:var(--header-h-m)}
  .logo img{height:var(--logo-h-m)}
  .menu-btn{display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 14px; margin-right:-6px; background:#fff; border:1px solid var(--c-dark); font-size:16px; font-weight:var(--fw-sub); cursor:pointer}
  .menu-btn[aria-expanded="true"]{background:var(--c-dark); color:#fff}
  .menu-btn .ico{width:22px; height:22px}
  .panel{display:block; position:fixed; left:0; right:0; top:var(--header-h-m); bottom:0; overflow-y:auto; overscroll-behavior:contain; background:#fff; border-top:1px solid var(--c-line); padding:0 0 calc(var(--label-h) + 24px)}
  .panel[hidden]{display:none !important}
  [id]{scroll-margin-top:calc(var(--header-h-m) + 16px)}
}
.panel-list{list-style:none; margin:0; padding:0}
.panel-list > li{border-bottom:1px solid var(--c-line)}
.panel-row{display:flex; align-items:stretch}
.panel-link{flex:1; display:flex; align-items:center; min-height:var(--row-h-m); padding:8px 0; font-size:var(--fs-nav-m); font-weight:var(--fw-ui); color:var(--c-text); text-decoration:none}
.panel-link.is-active{font-weight:700; box-shadow:inset var(--active-bar) 0 0 var(--c-dark); padding-left:14px}
.panel-link:focus-visible,.panel-sub a:focus-visible,.panel-plus:focus-visible{outline-offset:-3px}
.panel-plus{flex:none; width:56px; border:0; border-left:1px solid var(--c-line); background:none; cursor:pointer; display:flex; align-items:center; justify-content:center}
.panel-plus .ico{width:22px; height:22px}
.panel-plus[aria-expanded="true"]{background:var(--c-surface)}
.panel-sub{list-style:none; margin:0; padding:0 0 8px; background:var(--c-surface)}
.panel-sub a{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:6px 16px; border-top:1px solid var(--c-line-soft); color:var(--c-text); text-decoration:none; font-size:17px}
.panel-sub a:first-child{border-top:0}
.panel-sub li:first-child a{border-top:0}
.panel-sub .count{color:var(--c-text-muted); font-size:15px; font-variant-numeric:tabular-nums}
.panel-cta{padding:24px 0 0}
.panel-actions{display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:16px 0 0}
.panel-actions .btn{min-height:56px; font-size:17px}
.panel-meta{padding:20px 0 0; font-size:15px; color:var(--c-text-muted); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; align-items:center}
.panel-meta .lang-btn{min-height:44px}

/* =====================================================================
   Titelband · Avada Layout Builder «Page Title Bar» (Farbfläche Hellblau) + Breadcrumbs-Element
   ===================================================================== */
.titleband{background:var(--c-band); padding:var(--titleband-pad)}
.titleband h1{max-width:24ch}
.titleband h1.is-long{max-width:none; font-size:clamp(30px, 20px + 2.2vw, 48px)}
.titleband .lead{margin:16px 0 0}
.titleband .label{margin:0 0 12px}
.crumbs{font-size:14px; margin:-10px 0 10px}
.crumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:0}
.crumbs li{display:flex; align-items:center}
.crumbs li + li::before{content:"/"; color:var(--c-text-muted); padding:0 10px}
.crumbs a{display:inline-flex; align-items:center; min-height:44px}
.crumbs [aria-current]{color:var(--c-text-muted)}
@media (max-width:640px){ .titleband{padding:var(--titleband-pad-m)} .crumbs{margin-bottom:12px} }

/* Sektionskopf: Linie + H2 + Textlink rechts */
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:var(--line-strong) solid var(--c-line); padding-top:20px; margin-bottom:24px}
.sec-head h2{margin:0}
.sec-head .textlink{margin-bottom:-8px}

/* =====================================================================
   Startseite
   ===================================================================== */
/* Einstieg 7/5 · Avada Container 2 Spalten: Title-Element, Text-Element, Button-Elemente (volle Breite, Icon rechts), Image-Element */
.intro{padding:56px 0 0}
.intro .grid{align-items:start}
.intro-text{grid-column:1 / span 7}
.intro-media{grid-column:8 / span 5; margin:0}
.intro-media img{width:100%; aspect-ratio:4/3; object-fit:cover}
.intro-media figcaption{font-size:14px; color:var(--c-text-muted); margin-top:8px}
.intro h1{margin:0 0 16px}
.intro .lead{margin:0 0 12px; font-weight:var(--fw-ui)}
.intro .sentence{max-width:58ch; margin:0 0 32px; color:var(--c-text-muted)}
.entry-rows{list-style:none; margin:0; padding:0; border-bottom:1px solid var(--c-line)}
.entry-rows a{display:grid; grid-template-columns:1fr auto 28px; align-items:center; gap:16px; min-height:72px; padding:12px 12px; margin:0 -12px; border-top:1px solid var(--c-line); text-decoration:none; color:var(--c-text); transition:background var(--t-fast)}
.entry-rows a:hover,.entry-rows a:focus-visible{background:var(--c-row-hover)}
.entry-rows a:focus-visible{outline-offset:-3px}
.entry-rows .t{font-size:clamp(20px, 18px + .5vw, 26px); font-weight:var(--fw-head); letter-spacing:-.01em}
.entry-rows .m{font-size:var(--fs-list); color:var(--c-text-muted); text-align:right}
.entry-rows a:hover .m{color:var(--c-text)}
.entry-rows .ico{width:28px; height:28px}
@media (max-width:1024px){
  .intro-text{grid-column:1 / -1}
  .intro-media{grid-column:1 / -1; margin-top:32px}
  .intro-media img{aspect-ratio:3/2}
}
@media (max-width:640px){
  .intro{padding-top:32px}
  .entry-rows a{grid-template-columns:1fr 24px; min-height:64px; row-gap:2px}
  .entry-rows .m{grid-column:1; grid-row:2; text-align:left}
  .entry-rows .ico{grid-column:2; grid-row:1 / span 2; width:24px; height:24px}
}

/* Aktuell · Avada Post Cards (Layout «Liste», 3 neueste) */
.aktuell .grid{row-gap:24px}
.aktuell-head{grid-column:span 3; background:var(--c-band); padding:20px; display:flex; flex-direction:column; justify-content:space-between; gap:16px; min-height:100%}
.aktuell-head h2{font-size:var(--fs-label); font-weight:var(--fw-ui); text-transform:uppercase; letter-spacing:var(--ls-label); line-height:1.4}
.aktuell-head p{margin:0; font-size:var(--fs-list)}
.aktuell-list{grid-column:span 9}
@media (max-width:1024px){ .aktuell-head{grid-column:1 / -1; min-height:0; flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px 24px} .aktuell-head p{flex:1 1 220px} .aktuell-list{grid-column:1 / -1} }

/* Listenzeilen (Datum · Titel · Pfeil) */
.list-rows{list-style:none; margin:0; padding:0; border-bottom:1px solid var(--c-line)}
.list-rows a{display:grid; grid-template-columns:120px 1fr 24px; align-items:center; gap:16px; min-height:64px; padding:12px; margin:0 -12px; border-top:1px solid var(--c-line); color:var(--c-text); text-decoration:none; transition:background var(--t-fast)}
.list-rows a:hover,.list-rows a:focus-visible{background:var(--c-row-hover)}
.list-rows a:focus-visible{outline-offset:-3px}
.list-rows time,.list-rows .d{font-size:var(--fs-list); font-variant-numeric:tabular-nums; color:var(--c-text-muted)}
.list-rows .t{font-size:18px; font-weight:var(--fw-sub); line-height:1.35}
@media (max-width:640px){
  .list-rows a{grid-template-columns:1fr 24px; row-gap:2px}
  .list-rows time,.list-rows .d{grid-column:1; grid-row:1}
  .list-rows .t{grid-column:1; grid-row:2}
  .list-rows .ico{grid-column:2; grid-row:1 / span 2}
}

/* Branchenzeilen · Avada Content Boxes (Layout «Zeile»), ganze Zeile klickbar, Hover Logo-Blau */
.branch-rows{list-style:none; margin:0; padding:0; border-bottom:1px solid var(--c-line)}
.branch-rows a{display:grid; grid-template-columns:minmax(200px,3fr) 6fr minmax(120px,2fr) 28px; align-items:center; gap:24px; min-height:80px; padding:16px 12px; margin:0 -12px; border-top:1px solid var(--c-line); color:var(--c-text); text-decoration:none; transition:background var(--t-fast)}
.branch-rows a:hover,.branch-rows a:focus-visible{background:var(--c-row-hover)}
.branch-rows a:focus-visible{outline-offset:-3px}
.branch-rows h3{margin:0}
.branch-rows .ua{color:var(--c-text-muted); font-size:var(--fs-list)}
.branch-rows a:hover .ua,.branch-rows a:focus-visible .ua{color:var(--c-text)}
.branch-rows .count{font-size:var(--fs-list); text-align:right; font-variant-numeric:tabular-nums; font-weight:var(--fw-ui)}
.branch-rows .ico{width:28px; height:28px}
@media (max-width:1024px){ .branch-rows a{grid-template-columns:1fr auto 28px; row-gap:4px} .branch-rows .ua{grid-column:1 / span 2; grid-row:2} .branch-rows .ico{grid-row:1 / span 2; grid-column:3} }
@media (max-width:640px){ .branch-rows a{gap:4px 12px; min-height:72px} .branch-rows .ico{width:24px; height:24px} }

/* Terminzeilen · Global Element mit Columns */
.term-rows{list-style:none; margin:0; padding:0; border-bottom:1px solid var(--c-line)}
.term-rows a,.term-rows .row{display:grid; grid-template-columns:150px 1fr minmax(160px,auto) 24px; align-items:center; gap:24px; min-height:72px; padding:14px 12px; margin:0 -12px; border-top:1px solid var(--c-line); color:var(--c-text); text-decoration:none; transition:background var(--t-fast)}
.term-rows a:hover,.term-rows a:focus-visible{background:var(--c-row-hover)}
.term-rows a:focus-visible{outline-offset:-3px}
.term-rows .d{font-weight:700; font-variant-numeric:tabular-nums; font-size:17px}
.term-rows .t{font-size:clamp(18px, 17px + .3vw, 22px); font-weight:var(--fw-sub)}
.term-rows .z{font-size:var(--fs-list); color:var(--c-text-muted); font-variant-numeric:tabular-nums; text-align:right}
.term-rows a:hover .z{color:var(--c-text)}
.term-rows .row{grid-template-columns:150px 1fr}
@media (max-width:640px){
  .term-rows a,.term-rows .row{grid-template-columns:1fr 24px; gap:2px 12px}
  .term-rows .d{grid-column:1; grid-row:1}
  .term-rows .t{grid-column:1; grid-row:2}
  .term-rows .z{grid-column:1; grid-row:3; text-align:left}
  .term-rows .ico{grid-column:2; grid-row:1 / span 3}
}

/* Der Verein · Avada Columns 3 Spalten */
.cols3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gutter)}
.col-box{border-top:1px solid var(--c-line); padding-top:20px; display:flex; flex-direction:column}
.col-box h3{margin:0 0 12px}
.col-box p{font-size:var(--fs-list); line-height:1.6}
.col-box .people{list-style:none; margin:0 0 16px; padding:0}
.col-box .people li{padding:10px 0; border-bottom:1px solid var(--c-line-soft); font-size:var(--fs-list)}
.col-box .people li:first-child{padding-top:0}
.col-box .people strong{display:block; font-weight:var(--fw-sub); font-size:16px}
.col-box .textlink{margin-top:auto}
.doc-link{display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--c-line); background:var(--c-surface); text-decoration:none; color:var(--c-text); margin:0 0 12px; transition:background var(--t-fast)}
.doc-link:hover{background:var(--c-row-hover); color:var(--c-text)}
.doc-link strong{display:block; font-weight:var(--fw-sub)}
.doc-link span{font-size:14px; color:var(--c-text-muted); font-variant-numeric:tabular-nums}
.doc-link .ico{width:24px; height:24px}
@media (max-width:1024px){ .cols3{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .cols3{grid-template-columns:1fr; row-gap:32px} }

/* Band «Mitglied werden» · Global Element (Container Hellblau) */
.band{background:var(--c-band); padding:var(--sec) 0}
.band .grid{row-gap:24px; align-items:start}
.band-text{grid-column:1 / span 6}
.band-text h2{margin:0 0 16px}
.band-text p{max-width:56ch}
.band-fees{grid-column:8 / span 5}
.fees{list-style:none; margin:0 0 24px; padding:0; border-bottom:1px solid var(--c-line)}
.fees li{display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:baseline; padding:14px 0; border-top:1px solid var(--c-line)}
.fees .amount{font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em; white-space:nowrap}
.fees span:last-child{font-size:var(--fs-list)}
@media (max-width:1024px){ .band-text,.band-fees{grid-column:1 / -1} }
@media (max-width:640px){ .fees li{grid-template-columns:96px 1fr} .fees .amount{font-size:20px} .band .btn{width:100%} }

/* =====================================================================
   Mitglieder
   ===================================================================== */
/* Branchen-Umschalter · Avada Menu-Element horizontal */
.switcher{padding:24px 0 0}
.switcher ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-left:1px solid var(--c-line)}
.switcher li{border:1px solid var(--c-line); border-left:0}
.switcher a{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:56px; height:100%; padding:8px 14px; text-decoration:none; color:var(--c-text); font-weight:var(--fw-ui); font-size:var(--fs-list); line-height:1.3; transition:background var(--t-fast)}
.switcher a:hover{background:var(--c-surface)}
.switcher a:focus-visible{outline-offset:-3px}
.switcher a[aria-current="page"]{background:var(--c-row-hover); font-weight:700; box-shadow:inset 0 calc(-1 * var(--active-bar)) 0 var(--c-dark)}
.switcher .count{font-variant-numeric:tabular-nums; color:var(--c-text-muted); font-weight:var(--fw-body)}
.switcher a[aria-current="page"] .count{color:var(--c-text)}
@media (max-width:1024px){ .switcher a{padding:8px 10px} }
@media (max-width:640px){
  .switcher ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .switcher li{border-top:0}
  .switcher li:nth-child(-n+2){border-top:1px solid var(--c-line)}
  .switcher li:last-child:nth-child(odd){grid-column:1 / -1}
  .switcher a{min-height:52px; padding:8px 12px}
}

/* Verzeichniszeilen · Library-Container (mit O1: Post-Card-Layout «Liste») */
.dir-meta{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px 24px; margin:0 0 16px; font-size:var(--fs-list); color:var(--c-text-muted)}
.dir{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; column-gap:var(--gutter); border-bottom:1px solid var(--c-line)}
@media (min-width:768px){ .dir{grid-template-columns:1fr 1fr} }
.dir-entry{display:grid; grid-template-columns:120px minmax(0,1fr); gap:20px; padding:24px 0; border-top:1px solid var(--c-line)}

.logo-frame{width:120px; height:80px; border:1px solid var(--c-line-soft); background:#fff; padding:8px; display:flex; align-items:center; justify-content:center}
.logo-frame img{width:100%; height:100%; object-fit:contain}
.logo-frame--empty{font-size:26px; font-weight:700; color:var(--c-text-muted); letter-spacing:-.02em}
.dir-body h3{font-size:20px; line-height:1.3; margin:0}
.dir-body .sub{font-size:var(--fs-list); color:var(--c-text-muted); margin:2px 0 0}
.dir-body address{font-style:normal; font-size:var(--fs-list); line-height:1.5; color:var(--c-text-muted); margin:6px 0 0}
.dir-contact{list-style:none; margin:8px 0 0; padding:0; font-size:var(--fs-list)}
.dir-contact a{display:inline-flex; align-items:center; gap:8px; min-height:44px; font-weight:var(--fw-ui)}
.dir-contact .ico{width:18px; height:18px}
.dir-links{display:flex; flex-wrap:wrap; gap:0 20px; font-size:var(--fs-list)}
.to-top{display:flex; justify-content:flex-end; margin-top:16px}
@media (max-width:640px){
  .dir-entry{grid-template-columns:88px minmax(0,1fr); gap:14px; padding:20px 0}
  .logo-frame{width:88px; height:59px; padding:6px}
  .dir-body h3{font-size:18px}
  .to-top{justify-content:stretch} .to-top .btn{width:100%}
}

/* Option O2 · Alle Mitglieder A–Z mit Branchen-Filter · Post Cards mit Option «Filters» */
.az-head{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0 0 8px}
.az-head h2{margin:0}
.filter{display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 8px; padding:0; list-style:none}
.filter button{min-height:44px; padding:8px 14px; border:1px solid var(--c-dark); background:#fff; cursor:pointer; font-size:var(--fs-list); font-weight:var(--fw-ui); display:inline-flex; gap:8px; align-items:center; transition:background var(--t-fast)}
.filter button:hover{background:var(--c-surface)}
.filter button[aria-pressed="true"]{background:var(--c-dark); color:#fff}
.filter .count{font-variant-numeric:tabular-nums; opacity:.85}
.az-status{font-size:var(--fs-list); color:var(--c-text-muted); margin:8px 0 16px}
.az-letter{display:grid; grid-template-columns:64px minmax(0,1fr); border-top:1px solid var(--c-line)}
.az-letter > h3{font-size:22px; font-weight:700; padding:12px 0}
.az-list{list-style:none; margin:0; padding:0}
.az-list li{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(140px,2fr); gap:16px; align-items:center; min-height:52px; padding:6px 0; border-top:1px solid var(--c-line-soft); font-size:var(--fs-list)}
.az-list li:first-child{border-top:0}
.az-list .n{font-weight:var(--fw-ui)}
.az-list .b{color:var(--c-text-muted)}
.az-list .tel{text-align:right}
.az-list a{min-height:44px; display:inline-flex; align-items:center}
@media (max-width:640px){
  .az-letter{grid-template-columns:40px minmax(0,1fr)}
  .az-list li{grid-template-columns:1fr; gap:0; padding:8px 0}
  .az-list .tel{text-align:left}
  .az-list a{min-height:44px}
}

/* =====================================================================
   Über uns, Vorstand, Jahresberichte
   ===================================================================== */
/* Index-Zeilen · Content Boxes «Zeile» */
.index-rows{list-style:none; margin:0; padding:0; border-bottom:1px solid var(--c-line)}
.index-rows a{display:grid; grid-template-columns:minmax(200px,4fr) 7fr 28px; gap:24px; align-items:center; min-height:80px; padding:16px 12px; margin:0 -12px; border-top:1px solid var(--c-line); color:var(--c-text); text-decoration:none; transition:background var(--t-fast)}
.index-rows a:hover,.index-rows a:focus-visible{background:var(--c-row-hover)}
.index-rows a:focus-visible{outline-offset:-3px}
.index-rows h2{font-size:clamp(var(--fs-h3-m), 19.1px + .24vw, var(--fs-h3)); font-weight:var(--fw-sub); line-height:1.3}
.index-rows .d{font-size:var(--fs-list); color:var(--c-text-muted)}
.index-rows a:hover .d{color:var(--c-text)}
.index-rows .ico{width:28px; height:28px}
@media (max-width:640px){ .index-rows a{grid-template-columns:1fr 24px; gap:4px 12px} .index-rows .d{grid-column:1; grid-row:2} .index-rows .ico{grid-column:2; grid-row:1 / span 2; width:24px; height:24px} }

/* Info-Kasten Hellblau-50 · Avada Container mit Hintergrundfarbe */
.infobox{background:var(--c-surface); padding:24px; border-top:var(--line-strong) solid var(--c-line)}
.infobox h2,.infobox h3{font-size:var(--fs-h4); font-weight:var(--fw-sub); margin:0 0 12px}
.infobox address{font-style:normal}
.infobox p:last-child,.infobox ul:last-child{margin-bottom:0}
.contact-lines{list-style:none; margin:0; padding:0}
.contact-lines li{display:flex; align-items:center; gap:10px; min-height:44px}
.contact-lines a{display:inline-flex; align-items:center; min-height:44px; font-variant-numeric:tabular-nums}
.contact-lines .ico{width:18px; height:18px; color:var(--c-text-muted)}
.two-col{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gutter)}
@media (max-width:768px){ .two-col{grid-template-columns:1fr} }

/* Vorstand · Person-Element */
.board-contacts{margin-bottom:var(--sec)}
.board-contacts .infobox .role{font-size:var(--fs-label); font-weight:var(--fw-ui); text-transform:uppercase; letter-spacing:var(--ls-label); margin:0 0 6px}
.board-contacts .infobox .name{font-size:var(--fs-h3); font-weight:var(--fw-sub); line-height:1.3; margin:0 0 4px}
.people-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px var(--gutter)}
.person{border-top:1px solid var(--c-line); padding-top:24px}
.person img{width:160px; height:160px; object-fit:cover; object-position:50% 25%; background:var(--c-surface); margin:0 0 16px}
.person h3{font-size:20px; margin:0}
.person .fn{font-size:var(--fs-label); font-weight:var(--fw-ui); text-transform:uppercase; letter-spacing:var(--ls-label); margin:6px 0 2px}
.person .firm{font-size:var(--fs-list); color:var(--c-text-muted); margin:0}
@media (max-width:1024px){ .people-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .people-grid{grid-template-columns:1fr; gap:0} .person{display:grid; grid-template-columns:104px 1fr; gap:16px; align-items:center; padding:16px 0} .person img{width:104px; height:104px; margin:0} }

/* Tabelle Jahresberichte · Avada Table-Element, Zebra Hellblau-50 */
.table{width:100%; border-collapse:collapse; font-size:var(--fs-list); font-variant-numeric:tabular-nums; border-bottom:1px solid var(--c-line)}
.table caption{text-align:left}
.table th{text-align:left; font-size:var(--fs-label); font-weight:var(--fw-ui); text-transform:uppercase; letter-spacing:var(--ls-label); padding:10px 16px; border-bottom:var(--line-strong) solid var(--c-line)}
.table td{padding:8px 16px; border-top:1px solid var(--c-line-soft); vertical-align:middle}
.table tbody tr:nth-child(even) td{background:var(--c-surface)}
.table .yr{font-weight:700; width:90px}
.table .act{text-align:right; width:1%; white-space:nowrap}
.table .act a{display:inline-flex; align-items:center; gap:8px; min-height:44px; font-weight:var(--fw-ui)}
.table .size{white-space:nowrap; color:var(--c-text-muted)}
.table tbody.is-older td{border-top-color:var(--c-line-soft)}
.toggle-btn{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:56px; padding:12px 0; margin-top:0; background:none; border:0; border-bottom:1px solid var(--c-line); cursor:pointer; font-size:17px; font-weight:var(--fw-sub); text-align:left}
.toggle-btn:hover{background:var(--c-surface)}
.toggle-btn .ico{width:22px; height:22px}
.toggle-btn .count{font-weight:var(--fw-body); color:var(--c-text-muted); font-variant-numeric:tabular-nums; margin-left:8px}
.toggle-btn:focus-visible{outline-offset:-3px}
@media (max-width:640px){ .table .col-title{display:none} .table th,.table td{padding:8px 10px} .table .yr{width:auto} }

/* =====================================================================
   Impressionen (News)
   ===================================================================== */
/* Liste · Post Cards Layout «Liste», 12 pro Seite, Pagination mit Nummern */
.news-list{list-style:none; margin:0; padding:0; border-bottom:1px solid var(--c-line)}
.news-item{display:grid; grid-template-columns:120px minmax(0,1fr) 200px; gap:24px; padding:24px 12px; margin:0 -12px; border-top:1px solid var(--c-line); align-items:start; transition:background var(--t-fast)}
.news-item time{font-size:var(--fs-list); color:var(--c-text-muted); padding-top:3px}
.news-item h2{font-size:clamp(19px, 18px + .3vw, 22px); font-weight:var(--fw-sub); line-height:1.3; margin:0 0 8px}
.news-item h2 a{text-decoration:none}
.news-item h2 a:hover{text-decoration:underline}
.news-item h2 a::after{content:""; position:absolute; inset:0}
.news-item{position:relative}
.news-item:hover,.news-item:focus-within{background:var(--c-surface)}
.news-item h2 a:focus-visible{outline:none}
.news-item:focus-within{box-shadow:inset 0 0 0 3px var(--c-focus)}
.news-item p{margin:0; font-size:var(--fs-list); color:var(--c-text-muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.news-item .thumb{width:200px; aspect-ratio:3/2; object-fit:cover; border:1px solid var(--c-line-soft); background:#fff}
.news-item .thumb.is-contain{object-fit:contain}
@media (max-width:640px){
  .news-item{grid-template-columns:minmax(0,1fr) 96px; gap:4px 14px; padding:18px 12px}
  .news-item time{grid-column:1; grid-row:1; padding:0}
  .news-item .txt{grid-column:1; grid-row:2}
  .news-item .thumb{grid-column:2; grid-row:1 / span 2; width:96px}
  .news-item h2{font-size:18px}
}
.pager{margin:32px 0 0}
.pager ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.pager a,.pager span{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:44px; min-height:44px; padding:0 12px; border:1px solid var(--c-line); text-decoration:none; font-variant-numeric:tabular-nums; font-weight:var(--fw-ui)}
.pager a:hover{background:var(--c-row-hover)}
.pager [aria-current="page"]{background:var(--c-dark); color:#fff}
.pager .is-disabled{border-color:var(--c-line-soft); color:var(--c-text-muted)}
.pager .ico{width:16px; height:16px}

/* Detail · Layout Builder Content (Bild 3:2, Text 680 px, Gallery-Element 4 Spalten mit Lightbox) */
.article{max-width:var(--container-text)}
.article-figure{margin:0 0 32px}
.article-figure img{width:100%; aspect-ratio:3/2; object-fit:cover; border:1px solid var(--c-line-soft); background:#fff}
.article-figure img.is-contain{object-fit:contain}
.gallery{margin:48px 0 0}
.gallery h2{font-size:var(--fs-h4); margin:0 0 4px}
.gallery-grid{list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.gallery-grid button{display:block; width:100%; padding:0; border:0; background:var(--c-surface); cursor:zoom-in; aspect-ratio:1; position:relative}
.gallery-grid img{width:100%; height:100%; object-fit:cover}
.gallery-grid button:hover{outline:2px solid var(--c-dark); outline-offset:2px}
.gallery-grid button:focus-visible{outline:var(--focus-ring); outline-offset:2px}
@media (max-width:640px){ .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.back-row{margin:48px 0 0; padding-top:20px; border-top:1px solid var(--c-line); display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between}
.ext-links{list-style:none; margin:24px 0 0; padding:0}
.ext-links li + li{margin-top:8px}

/* Lightbox · Avada Lightbox (Gallery-Element) */
.lightbox{position:fixed; inset:0; z-index:150; background:rgba(28,28,28,.96); color:#fff; display:grid; grid-template-rows:auto 1fr auto; touch-action:pan-y}
.lb-top,.lb-bottom{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px var(--pad)}
.lb-title{font-size:15px; margin:0; font-weight:var(--fw-ui); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lb-stage{display:flex; align-items:center; justify-content:center; min-height:0; padding:0 var(--pad)}
.lb-stage img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain}
.lb-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:48px; min-height:48px; padding:0 14px; background:#fff; color:var(--c-text); border:0; cursor:pointer; font-weight:var(--fw-sub)}
.lb-btn:hover{background:var(--c-band)}
.lb-btn .ico{width:22px; height:22px}
.lightbox :focus-visible{outline:3px solid #fff; outline-offset:3px}
.lb-count{font-variant-numeric:tabular-nums; font-size:15px}

/* =====================================================================
   Veranstaltungen · Terminliste (Global Element) + Toggles-Element
   ===================================================================== */
.events{list-style:none; margin:0; padding:0; border-bottom:1px solid var(--c-line)}
.event{display:grid; grid-template-columns:220px minmax(0,1fr) 160px; gap:24px; padding:24px 0; border-top:1px solid var(--c-line); align-items:start}
.event .when{font-weight:700; font-size:17px; font-variant-numeric:tabular-nums; line-height:1.4}
.event .when small{display:block; font-weight:var(--fw-body); font-size:var(--fs-list); color:var(--c-text-muted)}
.event h3{margin:0 0 6px}
.event p{margin:0; font-size:var(--fs-list); color:var(--c-text-muted)}
.event img{width:160px; aspect-ratio:3/2; object-fit:cover; background:var(--c-surface)}
.event.is-past .when,.event.is-past h3{color:var(--c-text-muted)}

.state{display:inline-block; font-size:12px; font-weight:var(--fw-ui); text-transform:uppercase; letter-spacing:var(--ls-label); padding:1px 8px; margin:0 0 8px; background:var(--c-band)}
.event.is-past .state{background:var(--c-line-soft)}
@media (max-width:1024px){ .event{grid-template-columns:180px minmax(0,1fr) 120px} .event img{width:120px} }
@media (max-width:640px){
  .event{grid-template-columns:minmax(0,1fr) 96px; gap:6px 14px; padding:18px 0}
  .event .when{grid-column:1; grid-row:1}
  .event .what{grid-column:1; grid-row:2}
  .event img{grid-column:2; grid-row:1 / span 2; width:96px}
}

/* =====================================================================
   Kontakt, Mitglied werden · Avada Forms
   ===================================================================== */
/* Kacheln · Content Boxes «Link-Bereich: ganze Box» */
.tiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gutter); margin:0 0 var(--sec)}
.tile{display:grid; grid-template-columns:minmax(0,1fr) 24px; align-items:center; gap:4px 12px; min-height:88px; padding:14px 18px; border:1px solid var(--c-line); text-decoration:none; color:var(--c-text); transition:background var(--t-fast)}
.tile:hover,.tile:focus-visible{background:var(--c-row-hover); color:var(--c-text)}
.tile .label{margin:0}
.tile strong{font-size:17px; font-weight:var(--fw-sub); font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.tile .ico{grid-column:2; grid-row:1 / span 2; width:24px; height:24px}
@media (max-width:1024px){ .tiles{grid-template-columns:1fr} }

.form-wrap{max-width:var(--container-text)}
.form-intro{margin:0 0 24px; font-size:var(--fs-list); color:var(--c-text-muted)}
.field{margin:0 0 20px}
.field label,.field .lbl{display:block; font-size:var(--fs-list); font-weight:var(--fw-ui); margin:0 0 6px}
.field .req{color:var(--c-text)}
.field .hint{display:block; font-size:14px; color:var(--c-text-muted); margin:-2px 0 6px; font-weight:var(--fw-body)}
.input,.textarea{
  display:block; width:100%; min-height:var(--input-h); padding:12px 14px; border:1px solid var(--c-border-ui); border-radius:var(--radius-input);
  background:#fff; color:var(--c-text); font:inherit; font-size:16px; line-height:1.4; transition:border-color var(--t-fast);
}
.textarea{min-height:160px; resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--c-placeholder)}
.input:hover,.textarea:hover{border-color:var(--c-dark)}
.input:focus-visible,.textarea:focus-visible{outline:var(--focus-ring); outline-offset:0; border-color:var(--c-dark)}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{border:2px solid var(--c-error); padding:11px 13px}
.err{display:flex; gap:6px; align-items:flex-start; color:var(--c-error); font-size:14px; font-weight:var(--fw-ui); margin:6px 0 0}
.err .ico{width:16px; height:16px; margin-top:2px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:0 var(--gutter)}
@media (max-width:640px){ .field-row{grid-template-columns:1fr} }
.fieldset{border:0; border-top:1px solid var(--c-line); margin:0 0 28px; padding:20px 0 0; min-width:0}
.fieldset legend{float:left; width:100%; padding:0; margin:0 0 16px; font-size:var(--fs-h4); font-weight:var(--fw-sub)}
.fieldset legend + *{clear:both}
.fieldset .legend-note{font-size:14px; color:var(--c-text-muted); font-weight:var(--fw-body); margin-left:6px}
.choice{display:grid; grid-template-columns:24px 1fr; gap:12px; align-items:start; padding:10px 0; cursor:pointer; min-height:44px}
.choice input{width:22px; height:22px; margin:1px 0 0; accent-color:var(--c-dark)}
.choice input:focus-visible{outline:var(--focus-ring); outline-offset:2px}
.choice-group[aria-invalid="true"]{border-left:3px solid var(--c-error); padding-left:12px}
.choice-group .choice + .choice{border-top:1px solid var(--c-line-soft)}
.declaration{font-size:var(--fs-list); background:var(--c-surface); padding:16px 18px; margin:0 0 16px}
.privacy-note{font-size:14px; color:var(--c-text-muted); margin:8px 0 24px}
.err-summary{border:2px solid var(--c-error); padding:16px 20px; margin:0 0 28px; background:#fff}
.err-summary h2,.err-summary h3{font-size:var(--fs-h4); color:var(--c-error); margin:0 0 8px}
.err-summary ul{margin:0; padding-left:20px}
.err-summary a{color:var(--c-error); font-weight:var(--fw-ui)}
.success{border-top:4px solid var(--c-success); background:var(--c-surface); padding:24px}
.success h2,.success h3{font-size:var(--fs-h3); margin:0 0 8px; display:flex; gap:10px; align-items:center}
.success .ico{color:var(--c-success); width:26px; height:26px; stroke-width:2}

/* Mitglied werden · Container 2 Spalten, rechts Sticky-Kasten (Container-Option «sticky») */
.join{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:56px; align-items:start}
.join-form{grid-column:1; grid-row:1}
.join-aside{grid-column:2; grid-row:1}
@media (min-width:1024px){ .join-aside{position:sticky; top:24px} }
@media (max-width:1023px){ .join{grid-template-columns:1fr; gap:40px} .join-form,.join-aside{grid-column:1; grid-row:auto} }
.steps{list-style:none; margin:0 0 20px; padding:0; counter-reset:s}
.steps li{display:grid; grid-template-columns:36px 1fr; gap:12px; padding:12px 0; border-top:1px solid var(--c-line); font-size:var(--fs-list)}
.steps li::before{counter-increment:s; content:counter(s); width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:var(--c-dark); color:#fff; font-weight:700; font-variant-numeric:tabular-nums}
.steps strong{display:block; font-size:16px}
.join-aside .fees{margin-bottom:16px}
.join-aside .fees li{grid-template-columns:100px 1fr}
.join-aside .fees .amount{font-size:20px}

/* =====================================================================
   Textseiten · Text-Element, Table-of-Contents-Element (sticky)
   ===================================================================== */
.text-layout{display:grid; grid-template-columns:minmax(0,1fr); gap:48px}
.text-layout.has-toc{grid-template-columns:280px minmax(0,var(--container-text)); gap:64px}
.toc{position:sticky; top:24px; align-self:start; font-size:var(--fs-list)}
.toc .label{margin-bottom:8px}
.toc ol{list-style:none; margin:0; padding:0; border-top:var(--line-strong) solid var(--c-line)}
.toc li{border-bottom:1px solid var(--c-line-soft)}
.toc a{display:flex; align-items:center; min-height:44px; padding:6px 0; text-decoration:none; line-height:1.35}
.toc a:hover{text-decoration:underline}
.toc a.is-current{font-weight:700}
@media (max-width:1024px){ .text-layout.has-toc{grid-template-columns:minmax(0,1fr); gap:32px} .toc{position:static} }

.prose{max-width:var(--container-text)}
.prose > :first-child{margin-top:0}
.prose h2{margin:48px 0 16px}
.prose h3{margin:32px 0 10px}
.prose h4{margin:24px 0 8px}
.prose h2 + h3{margin-top:16px}
.prose p,.prose ul,.prose ol{margin:0 0 1em}
.prose ul{list-style:none; padding:0}
.prose ul > li{position:relative; padding-left:24px; margin:0 0 .5em}
.prose ul > li::before{content:"–"; position:absolute; left:0; color:var(--c-text-muted)}
.prose .kicker{font-size:var(--fs-label); font-weight:var(--fw-ui); text-transform:uppercase; letter-spacing:var(--ls-label); margin:48px 0 4px; color:var(--c-text-muted)}
.prose .kicker + h2{margin-top:0}
.prose figure{margin:0 0 32px}
.prose figure img{width:100%; aspect-ratio:3/2; object-fit:cover}
.prose figure.is-contain img{object-fit:contain; background:#fff; border:1px solid var(--c-line-soft)}
.prose figcaption{font-size:14px; color:var(--c-text-muted); margin-top:8px}
.prose a{overflow-wrap:anywhere}
.goals{list-style:none; counter-reset:g; padding:0; margin:0 0 1em; border-bottom:1px solid var(--c-line)}
.goals li{display:grid; grid-template-columns:44px 1fr; gap:12px; padding:14px 0; border-top:1px solid var(--c-line); margin:0}
.goals li::before{counter-increment:g; content:counter(g, decimal-leading-zero); font-weight:700; font-variant-numeric:tabular-nums}
.timeline{margin:0 0 1em; border-bottom:1px solid var(--c-line)}
.timeline div{display:grid; grid-template-columns:72px 1fr; gap:16px; padding:12px 0; border-top:1px solid var(--c-line-soft)}
.timeline dt{font-weight:700; font-variant-numeric:tabular-nums}
.timeline dd{margin:0}
.timeline dd p{margin:0}
.timeline dd p + p{margin-top:.4em}
.figure-pair{display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter); margin:32px 0}
@media (max-width:640px){ .figure-pair{grid-template-columns:1fr} }

/* Webcam · 2-Klick-Platzhalter auf Hellblau-50 */
.webcam{aspect-ratio:16/9; background:var(--c-surface); border:1px solid var(--c-line); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:16px; padding:24px; max-width:960px}
.webcam p{max-width:52ch; margin:0; font-size:var(--fs-list)}
.webcam .ico{width:40px; height:40px}
.webcam-actions{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.webcam-note{font-weight:var(--fw-sub); background:#fff; border:1px solid var(--c-line); padding:10px 14px}
@media (max-width:640px){ .webcam{aspect-ratio:auto; min-height:320px} .webcam-actions .btn{width:100%} }

/* Hinweis «nicht ausgearbeitet» */
.notice{background:var(--c-surface); border-left:4px solid var(--c-dark); padding:20px 24px; max-width:var(--container-text)}

/* =====================================================================
   Footer · Layout Builder Footer (4 Spalten) + Fussleiste Hellblau
   ===================================================================== */
.site-footer{border-top:var(--line-strong) solid var(--c-line); margin-top:0}
.foot-main{padding:48px 0 40px}
.foot-logo{display:inline-flex; margin:0 0 32px}
.foot-logo img{height:40px; width:auto}
.foot-cols{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px var(--gutter)}
.foot-cols h2{font-size:var(--fs-label); font-weight:var(--fw-ui); text-transform:uppercase; letter-spacing:var(--ls-label); line-height:1.4; padding-bottom:10px; border-bottom:1px solid var(--c-line); margin:0 0 8px}
.foot-cols ul{list-style:none; margin:0; padding:0; font-size:var(--fs-list)}
.foot-cols li a,.foot-cols li button{display:inline-flex; align-items:center; gap:6px; min-height:44px; text-decoration:none}
.foot-cols li a:hover{text-decoration:underline}
.foot-cols address{font-style:normal; font-size:var(--fs-list); line-height:1.6}
.foot-bar{background:var(--c-band); font-size:14px}
.foot-bar .container{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 24px; min-height:56px; padding-top:8px; padding-bottom:8px; padding-right:max(var(--pad), 230px)}
.foot-bar ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:0 20px}
.foot-bar a,.foot-bar button{display:inline-flex; align-items:center; min-height:44px}
.linkbtn{background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:.18em; font:inherit; color:var(--c-link)}
.linkbtn:hover{text-decoration-thickness:2px}
@media (max-width:1024px){ .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .foot-cols{grid-template-columns:1fr} .foot-bar .container{padding-right:var(--pad); padding-bottom:calc(var(--label-h) + 20px); flex-direction:column; align-items:flex-start} }

/* =====================================================================
   Consent-Banner · Complianz (gestaltet mit den Tokens), drei gleichwertige Buttons
   ===================================================================== */
.consent{position:fixed; left:16px; bottom:16px; z-index:120; width:min(560px, calc(100% - 32px)); max-height:calc(100vh - 32px); overflow:auto; background:#fff; border:var(--line-strong) solid var(--c-line); padding:24px}
.consent h2{font-size:var(--fs-h4); margin:0 0 8px}
.consent p{font-size:var(--fs-list); margin:0 0 16px}
.consent-actions{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.consent-actions .btn{padding:10px 12px; font-size:15px}
.consent-opts{border-top:1px solid var(--c-line); margin:0 0 16px; padding:8px 0 0}
.consent-opts .choice{font-size:var(--fs-list)}
.consent-opts .choice small{display:block; color:var(--c-text-muted)}
@media (max-width:640px){ .consent{left:0; bottom:0; width:100%; border-width:2px 0 0; padding:20px var(--pad)} .consent-actions{grid-template-columns:1fr} }
body.has-consent .dummy-label{display:none}
@media (min-width:641px){ body.has-consent .dummy-label{display:flex} }

/* Toast (EN-Hinweis, Webcam) */
.toast{position:fixed; left:50%; transform:translateX(-50%); top:16px; z-index:160; width:min(520px, calc(100% - 32px)); pointer-events:none}
.toast-box{pointer-events:auto; display:flex; align-items:flex-start; gap:12px; background:var(--c-dark); color:#fff; padding:14px 14px 14px 18px; font-size:var(--fs-list); font-weight:var(--fw-ui)}
.toast-box p{margin:0; flex:1; padding-top:4px}
.toast-box button{flex:none; min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; background:#fff; color:var(--c-text); border:0; cursor:pointer}
.toast-box button:focus-visible{outline:3px solid var(--c-sky); outline-offset:2px}

/* Etikett «Klickdummy · Vorschlag C» */
.dummy-label{position:fixed; right:12px; bottom:12px; z-index:110; display:flex; align-items:center; min-height:var(--label-h); padding:0 14px; background:var(--c-dark); color:#fff; font-size:13px; font-weight:var(--fw-ui); text-decoration:none; letter-spacing:.01em}
.dummy-label:hover{background:var(--c-graphite); color:#fff}
.dummy-label:focus-visible{outline:3px solid var(--c-sky); outline-offset:2px}

.noscript{padding:48px var(--pad)}

/* Ergänzungen: Zustände der Toggles, Über-uns-Raster, Sprungziel */
.panel-plus .i-minus{display:none}
.panel-plus[aria-expanded="true"] .i-plus{display:none}
.panel-plus[aria-expanded="true"] .i-minus{display:inline-block}
.toggle-btn .ico{transition:transform var(--t-fast)}
.toggle-btn[aria-expanded="true"] .ico{transform:rotate(180deg)}
.about{row-gap:40px}
.about-main{grid-column:1 / span 8}
.about-side{grid-column:10 / span 3}
@media (max-width:1024px){ .about-main,.about-side{grid-column:1 / -1} .about-side{max-width:480px} }
.dir-entry.is-target,.event.is-target{background:var(--c-surface); box-shadow:-12px 0 0 var(--c-surface), 12px 0 0 var(--c-surface)}
.dir-entry:focus,.event:focus,section:focus{outline:none}
.dir-meta .badge{margin-left:6px}
@media (max-width:1280px) and (min-width:1101px){
  .nav-link{padding:0 9px}
  .nav-link::after{left:9px; right:9px}
  .logo img{height:40px}
  .nav-list > li.nav-cta{margin-left:8px}
  .nav-cta .btn{padding:10px 16px}
}
@media (max-width:400px){ .table .act .ico{display:none} .table .act a{gap:4px} }
@media (max-width:360px){ .logo img{height:30px} .menu-btn{padding:0 10px} }
.lb-title{min-width:0}

/* Bewegung reduzieren */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important; animation:none !important; scroll-behavior:auto !important}
}