@charset "UTF-8";

/*
Theme Name: SITW
Theme URI: https://github.com/vids-mipe-media/sitw-repo
Author: Mipe Media
Author URI: https://mipe.media/
Description: Theme for SITW e.V. Forked from Twenty Twenty-One 2.9 (WordPress team) and developed independently from that point — it does not receive upstream updates. Design follows the SITW relaunch prototype: CI blue #3C5AA3, 1500px content width, clamp(20px, 5vw, 72px) page gutters.
Requires at least: 5.3
Tested up to: 7.1
Requires PHP: 5.6
Version: 0.21.118
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sitw
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog, portfolio

Based on Twenty Twenty-One, (C) 2020 WordPress.org, distributed under the GNU GPL.
SITW is distributed under the same terms.
*/

/* ============================================================================
 * Merged from the SITW production prototype (production/production/css/).
 * Concatenated in the load order the prototype's HTML pages use:
 * base -> nav -> footer -> content/home -> page specifics -> responsive.
 *
 * responsive.css MUST stay last — it is an override layer.
 *
 * Deliberately excluded: bildliste.css and mobil-vorschau.css. Both restyle
 * bare body/a/a:hover unscoped; mobil-vorschau sets a dark background and
 * light text, which would apply site-wide if merged here.
 * ========================================================================= */


/* ===== base.css ===== */
/* ==========================================================================
   SITW e.V. — Base styles: reset, design tokens, typography, buttons,
   shared keyframes. Loaded on every page before the page-specific sheet.
   ========================================================================== */

/* ===== Lato, self-hosted =====
   Local files only — no fonts.googleapis.com request. Two @font-face rules
   per weight (latin / latin-ext) so a browser only fetches the latin-ext
   file when the page actually contains latin-ext characters; unicode-range
   values match Google's own Lato subsetting. */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/lato-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/lato-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/lato-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/lato-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/lato-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/lato-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('assets/fonts/lato-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('assets/fonts/lato-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===== Roboto, self-hosted =====
   Google Maps' own info-window/control text is styled by Google as Roboto.
   Maps otherwise fetches this from fonts.googleapis.com at runtime — the
   interceptor in google-map.js strips that request, and this local variable
   font (weight range 300-700, same as Maps requests) stands in for it so
   Maps' native UI still renders close to its intended look. Google Sans /
   Google Sans Text (Maps' other requested families) have no public font
   files and cannot be self-hosted — elements wanting those fall back to
   this Roboto, then the browser's default sans-serif. */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --primary: #3C5AA3;      /* CI-Blau — always this, see CLAUDE.md */
  --secondary: #223768;
  --accent: #3C5AA3;
  --background: #0A0F1E;
  --background-darker: #070B16;
  --surface: #F2F2F3;
  --text: #14161C;
  --muted: #61646E;

  --color-white: #FFFFFF;
  --color-text-light: #E8E9EE;
  --color-text-muted-light: #BFC6D6;
  --color-text-muted-light-2: #9AA0B4;
  --color-text-on-dark: #C3C2C2;
  --color-accent-hover-light: #97AAD8;
  --color-text-muted-dark: #4A4D57;

  --border-light: rgba(232, 233, 238, .14);
  --border-light-strong: rgba(232, 233, 238, .22);
  --border-dark: rgba(20, 22, 28, .12);
  --border-dark-strong: rgba(20, 22, 28, .22);

  --font-sans: 'Lato', system-ui, sans-serif;

  --content-max: 1500px;
  --content-pad: clamp(20px, 5vw, 72px);
  --content-max-bleed: calc(var(--content-max) + 2 * var(--content-pad));

  --nav-height-offset: 96px;
}

/* -------------------------------------------------------------------------
   Reset
   ------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
}

[id] { scroll-margin-top: var(--nav-height-offset); }

/* Default body theme is light (most content pages are white-on-dark-text).
   The homepage overrides this to the dark theme in css/home.css, matching
   each original page's own <style> body rule. */
body {
  margin: 0;
  background: var(--color-white);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 400;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, ol, ul, address {
  margin: 0;
  padding: 0;
}

ol, ul { list-style: none; }

img { max-width: 100%; display: block; }

a {
  color: inherit;
  text-decoration: none;
}

a:hover { color: var(--primary); }

button {
  font-family: inherit;
  cursor: pointer;
}

::selection {
  background: var(--primary);
  color: var(--background);
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

/* -------------------------------------------------------------------------
   Layout helpers
   ------------------------------------------------------------------------- */

/* [hidden] must actually hide.
   The browser's default stylesheet gives it display:none, but that loses to any
   class in this file that sets display — .content-section is display:grid and
   .gallery-meta is display:flex, so hiding a members-area view or an inactive
   gallery did nothing at all and every one of them rendered at once. Ten
   components in this sheet each carry their own .x[hidden] rule to work around
   the same thing; this states it once. !important is deliberate: an element
   marked hidden is hidden, whatever else claims otherwise. */
[hidden] { display: none !important; }

.container {
  max-width: var(--content-max);
  margin: 0 auto;
}

.container-bleed {
  max-width: var(--content-max-bleed);
  margin: 0 auto;
  padding-left: var(--content-pad);
  padding-right: var(--content-pad);
}

/*
 * A "flush" section (no side padding of its own, so a full-bleed image
 * below can reach the viewport edge) pairs .container-bleed with
 * .section__inner on the same element to still get the ordinary 1500px
 * text column. Both are single-class selectors of equal specificity, and
 * .section__inner (below, later in this file) sets its own max-width —
 * so it silently won that property from .container-bleed's wider one,
 * while .container-bleed's padding still applied on top of the now too-
 * narrow box. Net effect: the text sat var(--content-pad) to the right
 * of where every other section's text starts. This compound selector
 * outranks both on specificity, so the combination gets the width
 * .container-bleed actually intended regardless of source order.
 */
.section__inner.container-bleed { max-width: var(--content-max-bleed); }

.eyebrow {
  margin: 0 0 clamp(16px, 2.4vh, 26px);
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--primary);
}

.eyebrow--light { color: var(--color-text-muted-light); }

.section__title {
  margin: 0;
  max-width: min(100%, 26ch);
  font-weight: 900;
  font-size: clamp(1.9rem, 4.4vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.section__title--light { color: var(--color-white); }
.section__title--dark { color: var(--text); }
.section__title mark { background: none; color: var(--primary); }

.section__lead {
  margin: 0;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.7;
}

.section__lead--muted-dark { color: var(--color-text-muted-dark); }
.section__lead--muted-light { color: var(--color-text-muted-light); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 12px 18px;
  background: var(--primary);
  color: var(--color-white);
  z-index: 200;
}

.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* -------------------------------------------------------------------------
   Buttons — pill CTAs, shared lift/shadow interaction
   ------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 15px 26px;
  border-radius: 999px;
  border: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .32s ease, color .32s ease, border-color .32s ease,
    transform .32s cubic-bezier(.16, 1, .3, 1), box-shadow .32s ease;
}

.btn--arrow::after,
.btn--arrow-down::after,
.btn--arrow-external::after {
  content: '';
  width: 14px;
  height: 14px;
  flex: none;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.btn--arrow::after { -webkit-mask-image: url('assets/images/arrow-right.svg'); mask-image: url('assets/images/arrow-right.svg'); }
.btn--arrow-down::after { -webkit-mask-image: url('assets/images/arrow-down.svg'); mask-image: url('assets/images/arrow-down.svg'); }
.btn--arrow-external::after { -webkit-mask-image: url('assets/images/arrow-external.svg'); mask-image: url('assets/images/arrow-external.svg'); }

/* Large bold link labels — icon scales with the text's own clamp()
   font-size via em units instead of a fixed px size, so it stays
   proportional at every viewport width. */
.related-links__label::after {
  content: '';
  display: block;
  flex: none;
  width: 0.65em;
  height: 0.65em;
  margin-left: 10px;
  margin-top: 0.12em;
  background-color: currentColor;
  -webkit-mask-image: url('assets/images/arrow-right.svg');
  mask-image: url('assets/images/arrow-right.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Small uppercase text labels that end in an arrow (card CTAs,
   jump-list rows, area rows) — icon appended via ::after instead of a
   literal arrow character in the content. */
.recap-list__cta::after,
.area-row__action::after,
.network-links a span::after,
.jump-list a span::after {
  content: '';
  display: block;
  flex: none;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  background-color: currentColor;
  -webkit-mask-image: url('assets/images/arrow-right.svg');
  mask-image: url('assets/images/arrow-right.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Pill-style action labels (Publikationen entry list, event downloads) —
   modifier selects download vs. external-link icon. */
.entry-list__action--download::after,
.download-list__art::after {
  content: '';
  display: block;
  flex: none;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  background-color: currentColor;
  -webkit-mask-image: url('assets/images/arrow-down.svg');
  mask-image: url('assets/images/arrow-down.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.entry-list__action--external::after {
  content: '';
  display: block;
  flex: none;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  background-color: currentColor;
  -webkit-mask-image: url('assets/images/arrow-external.svg');
  mask-image: url('assets/images/arrow-external.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Gallery / lightbox prev-next icon buttons — arrow is the entire
   (aria-labelled) button content; prev reuses the same icon, mirrored.
   .lightbox__close is also a .lightbox__btn but keeps its own literal
   "×" character instead — it must not get this arrow icon too. */
.gallery__nav,
.lightbox__btn {
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery__nav::after,
.lightbox__prev::after,
.lightbox__next::after {
  content: '';
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-image: url('assets/images/arrow-right.svg');
  mask-image: url('assets/images/arrow-right.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.gallery__nav--prev::after,
.lightbox__prev::after {
  transform: scaleX(-1);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(10, 15, 30, .18);
}

.btn:active {
  transform: translateY(0) scale(.985);
  box-shadow: 0 4px 10px rgba(10, 15, 30, .14);
}

.btn--lg { padding: 18px 32px; }

.btn--white { background: var(--color-white); color: var(--background); }
.btn--white:hover {
  background: var(--secondary);
  color: var(--color-white);
}

.btn--primary { background: var(--primary); color: var(--color-white); }
.btn--primary:hover { background: var(--secondary); color: var(--color-white); }

.btn--ghost-light { background: rgba(232, 233, 238, .06); color: var(--color-text-light); }
.btn--ghost-light:hover { background: rgba(232, 233, 238, .14); color: var(--color-text-light); }

.btn--outline-light { background: transparent; border: 1px solid var(--border-light-strong); color: var(--color-text-light); }
.btn--outline-light:hover {
  border-color: #ffffff;
  color: var(--secondary);
  background: #ffffff;
}

.btn--outline-dark { background: transparent; border: 1px solid var(--border-dark-strong); color: var(--text); }
.btn--outline-dark:hover {
  border-color: var(--primary);
  color: #fff;
  background: var(--secondary);
}

.btn--outline-inverse { background: transparent; border: 1px solid var(--border-dark-strong); color: var(--text); }
.btn--outline-inverse:hover { border-color: var(--primary); color: var(--primary); }

.link-arrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text-on-dark);
  white-space: nowrap;
  transition: color .3s ease;
}

.link-arrow:hover { color: var(--color-white); }

.link-arrow__arrow {
  display: block;
  color: var(--color-text-muted-light);
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}

.link-arrow:hover .link-arrow__arrow { transform: translateX(6px); }

/* -------------------------------------------------------------------------
   Reveal-on-scroll targets (animated via js/animations.js + GSAP)
   ------------------------------------------------------------------------- */

[data-reveal],
[data-stagger] > * {
  will-change: transform, opacity;
}

.no-js [data-reveal],
.no-js [data-stagger] > * {
  opacity: 1 !important;
  transform: none !important;
}

/* -------------------------------------------------------------------------
   Shared keyframes
   ------------------------------------------------------------------------- */

@keyframes sitwDrift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(3vw, -4vh, 0) scale(1.14); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes sitwFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sitwHeroZoom {
  from { transform: scale(1); }
  to { transform: scale(1.58); }
}

@keyframes sitwRise {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes sitwScroll {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

@keyframes navFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes navRise {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ===== nav.css ===== */
/* ==========================================================================
   SITW e.V. — Site navigation: fixed header + full-screen mobile menu.
   Behaviour (scroll style switch, logo light/dark swap, menu open/close)
   lives in js/nav.js.
   ========================================================================== */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(10px, 1.3vw, 16px) var(--content-pad);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: backdrop-filter .5s ease, background-color .55s cubic-bezier(.4, 0, .2, 1);
}

.site-header__brand {
  display: flex;
  align-items: center;
  flex: none;
}

.site-header__logo {
  height: clamp(72px, 7.4vw, 104px);
  margin-left: calc(-.149 * clamp(72px, 7.4vw, 104px));
  width: auto;
  display: block;
  transition: height .4s ease, margin-left .4s ease, opacity .2s ease;
}

.site-header .custom-logo-link { display: block; }
.site-header .custom-logo {
  height: clamp(72px, 7.4vw, 104px) !important;
  width: auto !important;
  margin-left: calc(-.149 * clamp(72px, 7.4vw, 104px));
  display: block;
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 32px);
}

.site-header__link {
  position: relative;
  display: inline-block;
  font-size: 13px;
  letter-spacing: .02em;
  padding: 4px 0;
  color: var(--color-text-light);
  transition: color .45s ease;
}

.site-header__link:hover { color: var(--nav-hover, #ffffff); }

.site-header__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .38s cubic-bezier(.16, 1, .3, 1);
}

.site-header__link:hover::after,
.site-header__link[aria-current="page"]::after { transform: scaleX(1); }

.site-header .btn { padding: 10px 18px; }

.burger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  padding: 0;
  transition: opacity .3s ease;
}

.burger:hover { opacity: .7; }
.burger:active { opacity: .5; }

.burger__bar {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-text-light);
  transition: background-color .45s ease;
}

/* ---- Full-screen menu overlay ------------------------------------------ */

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--background-darker);
  animation: navFade .38s ease both;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto 1fr;
  overflow-y: auto;
}

.nav-overlay[hidden] { display: none; }

.nav-overlay__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(10px, 1.3vw, 16px) var(--content-pad);
}

.nav-overlay__label {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-text-muted-light-2);
}

/*
 * Im Menue-Ueberlager steht jetzt das Logo, wo „Alle Bereiche“ stand. Wie
 * im Kopf und in der Fusszeile braucht das SVG eine Hoehe (es bringt keine
 * eigene mit) und den negativen Rand, der die Luft im Bild ausgleicht —
 * dieselbe Rechnung wie dort: -.149 der Hoehe.
 */
.nav-overlay .custom-logo-link { display: block; }
.nav-overlay__logo {
  height: clamp(64px, 5vw, 76px);
  margin-left: calc(-.149 * clamp(64px, 5vw, 76px));
  width: auto;
  display: block;
}

.nav-overlay__close {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: none;
  border: 0;
  color: var(--color-text-light);
  padding: 12px 0;
  transition: color .3s ease;
}

.nav-overlay__close:hover { color: var(--color-accent-hover-light); }

.nav-overlay__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  min-width: 0;
  gap: clamp(40px, 6vh, 64px) clamp(32px, 5vw, 80px);
  padding: clamp(24px, 5vh, 64px) var(--content-pad) clamp(48px, 8vh, 96px);
  align-content: start;
  max-width: var(--content-max-bleed);
  margin: 0 auto;
  width: 100%;
  animation: navRise .6s cubic-bezier(.16, 1, .3, 1) both;
}

.nav-overlay__col {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vh, 64px);
}

.nav-overlay__group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nav-overlay__heading {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-accent-hover-light);
}

.nav-overlay__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  letter-spacing: -.015em;
  line-height: 1.15;
  color: var(--color-white);
  transition: color .3s ease;
}

.nav-overlay__title:hover { color: var(--color-accent-hover-light); }
.nav-overlay__title[aria-current="page"] { color: var(--primary); }

.nav-overlay__text {
  margin: 0;
  max-width: 34ch;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-muted-light-2);
}

.nav-overlay__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: clamp(12px, 1.8vh, 16px);
  border-top: 1px solid var(--border-light);
}

.nav-overlay__links a {
  display: block;
  font-size: 16px;
  line-height: 1.3;
  color: var(--color-text-on-dark);
  transition: color .3s ease;
}

.nav-overlay__links a:hover { color: var(--color-accent-hover-light); }
.nav-overlay__links a[aria-current="page"] { color: var(--primary); }

.nav-overlay__address {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: clamp(12px, 1.8vh, 16px);
  border-top: 1px solid var(--border-light);
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-muted-light-2);
}

.nav-overlay__address a {
  color: var(--color-text-on-dark);
  transition: color .3s ease;
}

.nav-overlay__address a:hover { color: var(--color-accent-hover-light); }

.nav-overlay__address span:first-child {
  line-height: 1.5;
}

.nav-overlay__anschrift {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.5;
}

.nav-overlay__kontakt {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.5;
}

.nav-overlay .btn { align-self: flex-start; margin-top: clamp(8px, 1.4vh, 14px); }
.nav-overlay .btn--primary:hover { background: var(--color-white); color: var(--background); }

body.menu-open { overflow: hidden; }

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 1119px) {
  .site-header__nav > .site-header__link { display: none; }
  .site-header .btn { padding: 13px 18px; }
}

@media (max-width: 640px) {
  .site-header__logo { margin-left: -10.4px !important; }
  .site-header { padding-top: 8px; padding-bottom: 8px; }
  .site-header .btn--primary { display: none; }
}

@media (max-width: 560px) {
  .nav-overlay__grid { grid-template-columns: 1fr; }
}


/* ===== footer.css ===== */
/* ==========================================================================
   SITW e.V. — Site footer.
   ========================================================================== */

.site-footer {
  background: var(--background-darker);
  padding: clamp(56px, 9vh, 110px) var(--content-pad) clamp(28px, 4vh, 44px);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: clamp(24px, 3vw, 48px);
  max-width: var(--content-max);
  margin: 0 auto;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.site-footer__logo {
  height: 74px;
  width: auto;
  display: block;
  align-self: flex-start;
  margin-left: -11px;
}

.site-footer__claim {
  margin: 0;
  max-width: 30ch;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-muted-light-2);
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  color: #B3B6C0;
}

.site-footer__heading {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-text-muted-light-2);
  margin-bottom: 6px;
}

.site-footer__col a { transition: color .3s ease; }
.site-footer__col a:hover { color: var(--color-white); }
.site-footer__col a[aria-current="page"] { color: var(--primary); }

.site-footer__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  max-width: var(--content-max);
  margin: clamp(40px, 6vh, 72px) auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(232, 233, 238, .1);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text-muted-light-2);
}

.site-footer__copy { margin: 0; justify-self: start; }

.site-footer__legal {
  margin: 0;
  text-align: center;
}

.site-footer__legal a { transition: color .3s ease; }
.site-footer__legal a:hover { color: var(--color-white); }
.site-footer__legal a[aria-current="page"] { color: var(--primary); }

.site-footer__privacy {
  justify-self: end;
  white-space: nowrap;
  transition: color .3s ease;
}

.site-footer__privacy:hover { color: var(--color-white); }

@media (max-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 44px clamp(24px, 4vw, 56px);
  }
}

@media (min-width: 561px) and (max-width: 1024px) {
  /* Netzwerk sits beside the brand block; start it level with the claim
     under the logo (logo height 74px + the brand column's 18px gap). */
  .site-footer__brand + .site-footer__col { margin-top: 92px; }
  /* Netzwerk's shift would otherwise stretch the first row and push
     Veranstaltungen down with it; the same amount back keeps it where it was. */
  .site-footer__brand + .site-footer__col + .site-footer__col { margin-top: -92px; }
}

@media (max-width: 759px) {
  .site-footer__bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 10px;
  }
  .site-footer__bar p { text-align: left; justify-self: start; }
}

@media (max-width: 560px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: 36px; }
}


/* ===== content.css ===== */
/* ==========================================================================
   SITW e.V. — shared "content page" pattern: dark hero band, breadcrumb,
   intro head, card grids, related-links strip, dark CTA band. Used by the
   network pages (Netzwerk, Beirat, Vorstand, Partner, Mitglieder, Mitglied)
   and reused by other content pages (Publikationen, Veranstaltungen, ...).
   ========================================================================== */

/* ---- Hero band (dark image band with title + quick nav) ------------------ */

.hero-band {
  position: relative;
  overflow: hidden;
  background: var(--background);
  padding: clamp(120px, 20vh, 220px) var(--content-pad) clamp(56px, 9vh, 110px);
}

.hero-band__media { position: absolute; inset: 0; }
.hero-band__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  animation: sitwHeroZoom 20s ease-in-out infinite alternate;
  will-change: transform;
  max-width: 100% !important;
}
@media (prefers-reduced-motion: reduce) { .hero-band__media img { animation: none; } }
.hero-band__media video { width: 100% !important; height: 100% !important; object-fit: cover; max-width: 100% !important; display: block; }

.hero-band__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 15, 30, .72), rgba(10, 15, 30, .6) 45%, rgba(10, 15, 30, .96));
}

.hero-band__inner {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
}

.hero-band__kicker {
  margin: 0 0 clamp(16px, 2.4vh, 26px);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-text-muted-light-2);
}

.hero-band__title {
  margin: 0;
  max-width: min(100%, 26ch);
  font-weight: 900;
  font-size: clamp(2rem, 4.6vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  color: var(--color-white);
  text-wrap: balance;
}

.hero-band__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(28px, 5vh, 52px);
}

.hero-band__nav--bright .btn--outline-light { border-color: rgba(255, 255, 255, .32); }
.hero-band__nav--bright .btn--outline-light:hover {
  border-color: var(--color-white);
  background: var(--color-white);
  color: var(--secondary);
}

@media (max-width: 640px) {
  .hero-band { padding-top: 96px; padding-bottom: 44px; }
}

/* ---- Breadcrumb ------------------------------------------------------------ */

.breadcrumb[hidden] { display: none; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  /* Pulls up to sit just under the hero band above it (negative top margin
     matches the band's own bottom padding), large bottom margin separates
     it from the heading that follows. */
  margin: calc(-1 * clamp(34px, 7vh, 96px)) 0 clamp(84px, 13vh, 170px);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-text-muted-dark);
}

.breadcrumb a { color: var(--color-text-muted-dark); transition: color .3s ease; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb__sep { color: #6B6E78; }
.breadcrumb__current { color: var(--text); }

@media (max-width: 640px) {
  .breadcrumb { margin-bottom: 44px; }
}

/* ---- Section intro head (eyebrow + title + lead, two-column) -------------- */

.content-section { padding: clamp(64px, 11vh, 140px) var(--content-pad); }
.content-section--surface { background: var(--surface); }

/* Mitglieder page only — its own DC mockup adds a divider above the
   shared "Weitere Seiten im Netzwerk" module that the other 5 pages
   using the same template-part (Beirat, Partner, Vorstand, Mitglied
   werden, single Mitglied) don't have, so this stays page-scoped
   rather than changing the shared component. */
body.page-id-165 section[aria-label="Weitere Seiten im Netzwerk"] {
  border-top: 1px solid var(--border-dark);
}

.intro-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(340px, 45%), 1fr));
  gap: clamp(28px, 5vw, 90px);
  align-items: end;
  margin-bottom: clamp(36px, 6vh, 72px);
}

.intro-head__lead {
  margin: 0;
  margin-left: auto;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.7;
  color: var(--color-text-muted-dark);
}

/* ---- Card grid (Beirat / Vorstand-style institution cards) ---------------- */

.card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(260px, 22%), 1fr));
  gap: clamp(24px, 3vw, 48px);
}

.card-grid--wide { grid-template-columns: repeat(auto-fit, minmax(max(300px, 30%), 1fr)); }

.org-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--border-dark);
}

.org-card__logo-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(120px, 16vh, 170px);
  padding: clamp(20px, 2.6vw, 32px);
  border-bottom: 1px solid var(--border-dark);
}

.org-card__logo {
  display: block;
  width: 100%;
  max-width: min(240px, 100%);
  height: clamp(52px, 7vh, 76px);
  object-fit: contain;
  object-position: center;
}

.org-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(24px, 3.4vh, 38px) clamp(20px, 2.6vw, 32px);
}

.org-card__tag {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--primary);
}

.org-card__name {
  align-self: stretch;
  font-weight: 700;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--text);
  text-wrap: pretty;
}

.org-card__meta {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.65;
  color: var(--color-text-muted-dark);
}

.org-card__meta a { color: var(--primary); }
.org-card__meta strong { color: var(--text); font-weight: 400; }

.org-card__body .btn { margin-top: clamp(8px, 1.4vh, 14px); }

/* The card's own action button (Partner's "Website", Beirat's "Details") is
   blue-toned, not the neutral dark outline .btn--outline-dark uses
   elsewhere on the site — scoped to this card so other buttons sharing
   that class keep their own colour. */
.org-card__body .btn--outline-dark {
  border-color: rgba(60, 90, 163, .45);
  color: var(--primary);
}
.org-card__body .btn--outline-dark:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* ---- Row list (Vorstand-style rows / event rows) --------------------------- */

.row-list { list-style: none; margin: 0; padding: 0; }

.row-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px clamp(20px, 3vw, 48px);
  padding: clamp(24px, 3.4vh, 38px) 0;
  border-top: 1px solid var(--border-dark);
}

.row-list__name-block { flex: 0 0 auto; width: min(100%, 300px); display: flex; flex-direction: column; gap: 10px; }
.row-list__name { font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em; text-wrap: pretty; }
.row-list__role { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); }

.row-list__meta {
  flex: 1 1 300px;
  min-width: min(100%, 260px);
  display: flex;
  flex-direction: column;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.65;
  color: var(--color-text-muted-dark);
}

.row-list__meta a { color: var(--primary); margin-top: 4px; }

/*
 * Member "Weitere Mitglieder" rows (single-mitglied.php) — unlike
 * .row-list (Vorstand), these rows have no nested links in the meta
 * area, so the whole row can safely be one <a>: fully clickable, text
 * color transitions on hover, matching the Design Canvas reference.
 */
.member-row-list { list-style: none; margin: 0; padding: 0; }
.member-row-list__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px clamp(20px, 3vw, 48px);
  padding: clamp(24px, 3.4vh, 38px) 0;
  border-top: 1px solid var(--border-dark);
  color: var(--text);
  transition: color .3s ease;
}
.member-row-list__link:hover { color: var(--primary); }
.member-row-list__name-block { flex: 1 1 300px; min-width: min(100%, 260px); display: flex; flex-direction: column; gap: 10px; }
.member-row-list__name { font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.25; letter-spacing: -.02em; text-wrap: pretty; }
.member-row-list__ort { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); }
.member-row-list__action { flex: 0 0 auto; margin-left: auto; }
.member-row-list__action.btn--outline-dark {
  border-color: rgba(60, 90, 163, .45);
  color: var(--primary);
}
.member-row-list__action.btn--outline-dark:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.member-route-btn.btn--outline-dark:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Vorstand's "Firmenprofil" row action — blue-toned like the org-card
   buttons elsewhere, not the neutral dark outline .btn--outline-dark
   uses by default. */
.row-list__action.btn--outline-dark {
  border-color: rgba(60, 90, 163, .45);
  color: var(--primary);
}
.row-list__action.btn--outline-dark:hover {
  background: var(--secondary);
  color: #fff;
  border-color: var(--secondary);
}

/*
 * single-mitglied.php's logo+Kontakt sidebar: sticky on desktop so it
 * stays in view against the longer right-hand column, but below 800px
 * the two-column grid stacks into one column and there's nothing longer
 * beside it to stay in view against — sticky there just pins it awkwardly
 * over whatever scrolls beneath, so it reverts to normal static flow.
 */
.member-detail-sidebar { position: sticky; top: clamp(96px, 12vh, 132px); align-self: start; }
@media (max-width: 799px) {
  .member-detail-sidebar { position: static; top: auto; }
}

/* ---- Related-links strip ---------------------------------------------------- */

.related-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 90px);
  max-width: var(--content-max);
  margin: 0 auto;
}

.related-links a { display: flex; flex-direction: column; gap: 10px; transition: color .3s ease; }
.related-links a:hover { color: var(--primary); }

.related-links__tag {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--primary);
}

.related-links__label {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -.02em;
}

/* ---- Dark CTA band (image + heading + single action) ------------------------ */

.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--background);
  padding: clamp(80px, 14vh, 180px) var(--content-pad);
}

.cta-band__media { position: absolute; inset: 0; }
.cta-band__media img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover;
  animation: sitwHeroZoom 20s ease-in-out infinite alternate;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .cta-band__media img { animation: none; } }
.cta-band__media video { width: 100% !important; height: 100% !important; object-fit: cover; max-width: 100% !important; display: block; }

.cta-band__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(10, 15, 30, .94), rgba(10, 15, 30, .62));
}

.cta-band__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(28px, 5vw, 90px);
  max-width: var(--content-max);
  margin: 0 auto;
}

.cta-band__title {
  margin: 0;
  max-width: min(100%, 26ch);
  font-weight: 900;
  font-size: clamp(1.9rem, 4.4vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  color: var(--color-white);
  text-wrap: balance;
}

.cta-band__text {
  margin: 12px 0 0;
  max-width: 52ch;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.7;
  color: var(--color-text-on-dark);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.8vh, 20px);
}

/* CTA-Bildbanner: "Button rechts" checkbox unchecked -> button stacks
   below the title/kicker/text block instead of sitting beside it. */
.cta-band__inner--bottom {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(20px, 3vh, 32px);
}

/* ---- Stat row (Netzwerk key figures) ----------------------------------------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: clamp(24px, 3vw, 48px);
  margin: 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 3.4vh, 38px) 0 0;
  border-top: 1px solid var(--border-dark);
}

.stat-item__value {
  order: 1;
  margin: 0;
  font-weight: 900;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--text);
}

.stat-item__label {
  order: 2;
  margin: 0;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--primary);
}

/* ---- Split media/text band --------------------------------------------------- */

.split-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(340px, 45%), 1fr));
  background: #14161C;
}

.split-band__media { position: relative; min-height: clamp(280px, 50vh, 560px); overflow: hidden; }
.split-band__media img { display: block; width: 100% !important; height: 100% !important; max-width: 100% !important; aspect-ratio: 3 / 2; object-fit: cover; }

.split-band__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(18px, 2.6vh, 28px);
  padding: clamp(48px, 8vh, 110px) var(--content-pad);
}

.split-band__copy p:not([class]) { margin: 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; color: var(--color-text-on-dark); }

.split-band .hero-band__kicker { margin-bottom: 0; }

/* ---- Area rows (Netzwerk hub links, wide with description) ------------------- */

.area-row a {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px clamp(20px, 3vw, 48px);
  padding: clamp(24px, 3.4vh, 38px) 0;
  border-top: 1px solid var(--border-dark);
  color: var(--text);
  transition: color .3s ease;
}

.area-row a:hover { color: var(--primary); }

.area-row__title-block { flex: 0 0 auto; width: min(100%, 300px); display: flex; flex-direction: column; gap: 8px; }
.area-row__title { font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em; }
.area-row__meta { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); }
.area-row__text { flex: 1 1 300px; min-width: min(100%, 260px); font-size: clamp(14px, 1.05vw, 16px); line-height: 1.65; color: var(--color-text-muted-dark); }
.area-row__action {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 15px 26px;
  border-radius: 999px;
  border: 1px solid rgba(60, 90, 163, .45);
  color: var(--primary);
  white-space: nowrap;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.area-row a:hover .area-row__action {
  background: var(--secondary);
  color: var(--color-white);
  border-color: var(--secondary);
}

/* ---- Search footnote (Mitglieder, Publikationen, ...) --------------------------- */

.search-footnote { margin: clamp(36px, 5.5vh, 72px) 0 0; padding-top: clamp(24px, 3.4vh, 38px); border-top: 1px solid var(--border-dark); font-size: clamp(14px, 1.05vw, 16px); line-height: 1.65; color: var(--color-text-muted-dark); }


/* ===== home.css ===== */
/* ==========================================================================
   SITW e.V. — Homepage.
   ========================================================================== */

/* Homepage uses the dark theme (base.css defaults body to the light theme
   used by the content pages). */
body.page-template-template-homepage {
  background: var(--background);
  color: var(--color-text-light);
}

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

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background: var(--background);
  isolation: isolate;
}

.hero__glow {
  position: absolute;
  filter: blur(10px);
  animation: sitwDrift 26s ease-in-out infinite;
  z-index: 0;
}

.hero__glow--a {
  top: -25vh; left: -10vw; width: 70vw; height: 90vh;
  background: radial-gradient(closest-side, rgba(60, 90, 163, .55), rgba(60, 90, 163, 0));
}

.hero__glow--b {
  bottom: -30vh; right: 8vw; width: 55vw; height: 80vh;
  filter: blur(20px);
  background: radial-gradient(closest-side, rgba(60, 90, 163, .3), rgba(60, 90, 163, 0));
  animation-duration: 34s;
  animation-direction: reverse;
}

.hero__media { position: absolute; inset: 0; z-index: 1; }

.hero__media-inner {
  position: absolute;
  top: -6%; left: 0; right: 0; height: 112%;
}

.hero__img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover;
  animation: sitwHeroZoom 20s ease-in-out infinite alternate;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) { .hero__img { animation: none; } }

.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(95deg, rgba(4, 7, 16, .95) 0%, rgba(6, 10, 22, .9) 46%,
    rgba(8, 12, 26, .72) 72%, rgba(10, 15, 30, .3) 88%, rgba(10, 15, 30, .42) 100%);
}

.hero__scrim-bottom {
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 38%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 15, 30, 0), rgba(10, 15, 30, .92));
}

.hero__content {
  position: relative;
  z-index: 3;
  padding: clamp(124px, 17vh, 210px) var(--content-pad) clamp(16px, 4vh, 60px);
  max-width: var(--content-max-bleed);
  margin: 0 auto;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__kicker {
  margin: 0 0 clamp(10px, 2.2vh, 26px);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-text-muted-light);
}

.hero__title {
  margin: 0;
  font-weight: 900;
  font-size: clamp(1.7rem, 4.8vw, 4.9rem);
  line-height: .96;
  letter-spacing: -.025em;
  color: var(--color-white);
  text-wrap: balance;
}

.hero__title-line {
  display: block;
  overflow: hidden;
  padding-bottom: .16em;
  margin-bottom: -.14em;
}

.hero__title-line span { display: block; }
.hero__title-accent { color: var(--primary); }

.hero__lead {
  margin: clamp(16px, 2.6vh, 28px) 0 0;
  max-width: min(100%, max(34ch, 60%));
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.55;
  color: var(--color-text-on-dark);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(32px, 5.5vh, 60px);
}

.hero__footer {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px 28px;
  padding: 0 var(--content-pad) clamp(34px, 6vh, 76px);
  flex: none;
}

.hero__next {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 20px);
  color: var(--color-text-light);
  flex: 1 1 auto;
  min-width: 0;
  border-top: 1px solid var(--border-light);
  padding-top: clamp(14px, 2vh, 22px);
}

.hero__next-label {
  font-size: clamp(9px, .8vw, 11px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-text-muted-light);
}

.hero__event {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px clamp(20px, 2.6vw, 40px);
}

.hero__event-date {
  display: flex;
  align-items: baseline;
  gap: 10px;
  line-height: 1;
}

.hero__event-day {
  font-weight: 900;
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  letter-spacing: -.025em;
  color: var(--color-text-muted-light);
}

.hero__event-place {
  font-size: clamp(9px, .8vw, 11px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-text-muted-light);
}

.hero__event-title {
  font-weight: 700;
  font-size: clamp(.95rem, 1.3vw, 1.2rem);
  letter-spacing: -.02em;
  line-height: 1.2;
  padding-left: clamp(20px, 2.6vw, 40px);
  box-shadow: inset 1px 0 0 var(--border-light);
}

.hero__event-cta {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 20px);
  align-self: center;
  margin-left: auto;
}

.hero__scroll-hint {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-left: clamp(48px, 7vw, 120px);
  align-self: flex-end;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-text-muted-light);
}

.hero__scroll-hint span:first-child { writing-mode: vertical-rl; }

.hero__scroll-track {
  display: block;
  width: 1px;
  height: 52px;
  overflow: hidden;
  position: relative;
  background: var(--border-light);
}

.hero__scroll-thumb {
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 100%;
  background: var(--primary);
  animation: sitwScroll 2.2s ease-in-out infinite;
}

@media (min-width: 1228px) { .hero__scroll-hint { display: flex; } }

@media (max-width: 1227px) {
  .hero__scroll-hint {
    display: flex;
    position: absolute;
  }
}

@media (max-width: 640px) {
  .hero__content { padding-top: 96px; padding-bottom: 44px; }
  .hero__event { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero__event-title { padding-left: 0; box-shadow: none; font-size: 1.05rem; }
  .hero__event-cta { margin-left: 0; align-self: stretch; flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 30px; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .hero__event { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hero__event-title { padding-left: 0; box-shadow: none; }
  .hero__event-cta { margin-left: 0; align-self: flex-start; align-items: center; gap: 22px; margin-top: 26px; }
}

/* ---- Generic section rhythm ---------------------------------------------- */

.section {
  padding: clamp(64px, 11vh, 140px) var(--content-pad);
}

.section--light { background: var(--color-white); color: var(--text); }
.section--surface { background: var(--surface); color: var(--text); }
.section--dark { background: var(--background); color: var(--color-text-light); }

.section__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(44px, 7vh, 96px);
}

.section__head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(340px, 45%), 1fr));
  gap: clamp(28px, 5vw, 90px);
  align-items: end;
}

/* ---- Ueber (about) intro block -------------------------------------------- */

.intro-block {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.4vh, 26px);
}

.intro-block__lede {
  margin: 0;
  font-weight: 700;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  letter-spacing: -.015em;
  color: var(--text);
}

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(300px, 30%), 1fr));
  gap: 0;
  border-top: 1px solid var(--border-dark);
}

.pillar {
  padding: clamp(24px, 3.4vh, 38px) clamp(20px, 2.4vw, 40px) clamp(24px, 3.4vh, 38px) 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pillar + .pillar { border-left: 1px solid var(--border-dark); padding-left: clamp(20px, 2.4vw, 40px); }

.pillar__tag {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--primary);
}

.pillar__title {
  font-weight: 700;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--text);
  text-wrap: balance;
}

.pillar__text {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.65;
  color: var(--color-text-muted-dark);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(18px, 2.6vw, 36px);
  border-top: 1px solid var(--border-dark);
  padding-top: clamp(24px, 3.4vh, 38px);
}

.cta-row__nav { display: flex; flex-wrap: wrap; gap: 10px; }
.cta-row__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px; margin-left: auto; }

@media (max-width: 1199px) {
  #ueber nav.cta-row__nav { max-width: 55%; }
}

@media (max-width: 991px) {
  #ueber .cta-row__actions { max-width: 48%; }
  #ueber nav.cta-row__nav { max-width: 48%; }
}

/* ---- Mission (full-bleed figure) ------------------------------------------ */

.section--flush { padding: clamp(64px, 11vh, 140px) 0 0; }

.mission__copy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(340px, 45%), 1fr));
  gap: clamp(28px, 5vw, 90px);
}

.img-frame {
  position: relative;
  overflow: hidden;
}

.img-frame img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}

.img-frame:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .img-frame:hover img { transform: none; } }

.mission__figure {
  margin: clamp(56px, 9vh, 120px) 0 0;
  position: relative;
  height: clamp(320px, 62vh, 720px);
}

.mission__parallax {
  position: absolute;
  top: -10%; left: 0; right: 0; height: 120%;
}

.mission__caption {
  position: absolute;
  left: 0; right: 0; bottom: clamp(20px, 4vh, 40px);
  padding: 0 var(--content-pad);
  max-width: var(--content-max-bleed);
  margin: 0 auto;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-white);
  text-shadow: 0 1px 24px rgba(10, 15, 30, .9);
  pointer-events: none;
}

/* ---- Image strip ----------------------------------------------------------- */

.image-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  background: var(--background);
}

.image-strip__frame {
  position: relative;
  min-height: clamp(300px, 66vh, 700px);
}

.image-strip__parallax {
  position: absolute;
  top: -9%; left: 0; right: 0; height: 118%;
}

.image-strip__caption {
  position: absolute;
  left: var(--content-pad);
  top: clamp(20px, 4vh, 44px);
  margin: 0;
  max-width: 22ch;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-white);
  text-shadow: 0 1px 20px rgba(10, 15, 30, .9);
  pointer-events: none;
}

/* ---- Expertise list --------------------------------------------------------- */

.expertise-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(260px, 22%), 1fr));
  gap: clamp(24px, 3vw, 48px);
}

.expertise-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 3.4vh, 38px) 0 0;
  border-top: 1px solid var(--border-light);
}

.expertise-item__num {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-text-muted-light);
}

.expertise-item__title {
  font-weight: 700;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--color-white);
}

.expertise-item__text {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.65;
  color: var(--color-text-muted-light);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---- Member CTA -------------------------------------------------------------- */

.cta-member {
  position: relative;
  overflow: hidden;
  background: var(--color-white);
  padding: clamp(90px, 17vh, 210px) var(--content-pad);
}

.cta-member__glow {
  position: absolute;
  top: -40vh; right: -10vw; width: 70vw; height: 110vh;
  background: radial-gradient(closest-side, rgba(60, 90, 163, .16), rgba(60, 90, 163, 0));
  animation: sitwDrift 30s ease-in-out infinite;
}

.cta-member__grid {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(28px, 5vw, 90px);
  align-items: end;
}

.feature-list {
  display: flex;
  flex-direction: column;
  margin: 0 0 clamp(28px, 4.5vh, 44px);
}

.feature-list li {
  padding: clamp(12px, 1.8vh, 18px) 0;
  border-top: 1px solid var(--border-dark-strong);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.45;
  color: var(--text);
}

.feature-list li:last-child { border-bottom: 1px solid var(--border-dark-strong); }

/* ---- DVGW quote --------------------------------------------------------------- */

.quote-section {
  position: relative;
  overflow: hidden;
  background: var(--secondary);
  padding: clamp(90px, 17vh, 210px) var(--content-pad);
}

.quote-section__media { position: absolute; inset: 0; }
.quote-section__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  max-width: 100% !important;
  animation: sitwHeroZoom 20s ease-in-out infinite alternate;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .quote-section__media img { animation: none; } }

.quote-section__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(34, 55, 104, .72), rgba(10, 15, 30, .9));
}

.quote-section__grid {
  position: relative;
  margin: 0 auto;
  max-width: var(--content-max);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(340px, 45%), 1fr));
  gap: clamp(28px, 5vw, 90px);
  align-items: end;
}

.quote-section__text {
  margin: 0;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 3rem);
  line-height: 1.14;
  letter-spacing: -.018em;
  color: var(--color-white);
  text-wrap: pretty;
}

.quote-section__footer {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.6vh, 28px);
}

.quote-section__footer p {
  margin: 0;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.7;
  color: var(--color-text-on-dark);
}

.quote-section__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(8px, 1.6vh, 14px); }

/* ---- Netzwerk split ------------------------------------------------------------ */

.network-split {
  background: var(--surface);
  color: var(--text);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: stretch;
}

.network-split__copy {
  padding: clamp(72px, 13vh, 160px) clamp(28px, 4vw, 64px) clamp(72px, 13vh, 160px)
    max(var(--content-pad), calc((100vw - 1500px) / 2));
}

.network-split__title {
  margin: 0 0 clamp(28px, 5vh, 56px);
  max-width: min(100%, 26ch);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--text);
  text-wrap: balance;
}

.network-links { display: flex; flex-direction: column; }

.network-links a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(16px, 2.6vh, 26px) 0;
  border-top: 1px solid var(--border-dark-strong);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.5rem);
  letter-spacing: -.015em;
  line-height: 1.2;
  transition: color .3s ease;
}

.network-links a:last-child { border-bottom: 1px solid var(--border-dark-strong); }
.network-links a:hover { color: var(--primary); }

.network-links span {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.network-split__frame {
  position: relative;
  min-height: clamp(340px, 70vh, 820px);
}

.network-split__parallax {
  position: absolute;
  top: -8%; left: 0; right: 0; height: 116%;
}

/* ---- Events (recap list) --------------------------------------------------------- */

.recap-list a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px clamp(20px, 4vw, 64px);
  padding: clamp(24px, 3.4vh, 38px) 0;
  border-top: 1px solid rgba(232, 233, 238, .12);
  color: var(--color-text-light);
  transition: color .3s ease;
}

.recap-list a:hover { color: var(--color-accent-hover-light); }

.recap-list__date {
  flex: 0 0 auto;
  width: clamp(76px, 7vw, 110px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
}

.recap-list__day {
  font-weight: 900;
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--color-accent-hover-light);
}

.recap-list__month {
  font-size: clamp(9px, .85vw, 11px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-text-muted-light);
}

.recap-list__body {
  flex: 1 1 300px;
  min-width: min(100%, 260px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recap-list__title {
  font-weight: 700;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.25;
  letter-spacing: -.015em;
}

.recap-list__place {
  font-size: clamp(9px, .85vw, 11px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-text-muted-light);
}

.recap-list__cta {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text-muted-light);
  white-space: nowrap;
  margin-left: auto;
}

/* ---- Featured event row ------------------------------------------------------------ */

.event-featured {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px clamp(20px, 4vw, 64px);
  padding: clamp(24px, 3.4vh, 38px) 0;
  border-top: 1px solid rgba(60, 90, 163, .55);
  border-bottom: 1px solid rgba(232, 233, 238, .12);
}

.event-featured__link {
  font-weight: 700;
  font-size: clamp(1.05rem, 1.7vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--color-white);
  text-wrap: pretty;
  transition: color .3s ease;
}

.event-featured__link:hover { color: var(--color-accent-hover-light); }

.event-featured__cta { margin-left: auto; }

/* ---- Gallery ------------------------------------------------------------------------- */

/* Swiper (via the .swiper/.swiper-wrapper/.swiper-slide classes alongside
   these) now drives the slider mechanics — drag, swipe, the prev/next
   arrows. Sizing, the hover reveal and everything else visual stays exactly
   as designed; only what used to be hand-rolled scroll/drag code moved to
   the library. */
.gallery { position: relative; margin-top: clamp(56px, 8vh, 96px); }

.gallery__track {
  display: flex;
}

/* Compound selector, not just .gallery__item: Swiper's own stylesheet sets
   .swiper-slide { width:100%; height:100% }, and every slide here also
   carries that class, so the sizing needs to out-specificity it rather
   than rely on which stylesheet happens to load last. */
.gallery__item.swiper-slide {
  position: relative;
  flex: none;
  width: clamp(240px, 25vw, 420px);
  height: clamp(210px, 36vh, 380px);
  overflow: hidden;
  padding: 0;
  border: 0;
  background: #141B2E;
  cursor: pointer;
}

.gallery__item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}

.gallery__item:hover img { transform: scale(1.05); }

.gallery__item::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 74px; height: 74px;
  translate: -50% -50%;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(10, 15, 30, .32);
  backdrop-filter: blur(3px) saturate(130%);
  opacity: 0;
  scale: .82;
  transition: opacity .3s ease, scale .45s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}

.gallery__item::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 26px; height: 26px;
  translate: -50% -50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4H20v5.5'/%3E%3Cpath d='M9.5 20H4v-5.5'/%3E%3Cpath d='M20 4l-7.2 7.2'/%3E%3Cpath d='M4 20l7.2-7.2'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0;
  scale: .82;
  transition: opacity .3s ease, scale .45s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
  z-index: 1;
}

.gallery__item:hover::after, .gallery__item:focus-visible::after,
.gallery__item:hover::before, .gallery__item:focus-visible::before { opacity: 1; scale: 1; }

.gallery__item:active::after, .gallery__item:active::before { scale: .94; }

@media (hover: none) {
  .gallery__item::after, .gallery__item::before { display: none; }
}

.gallery__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  /* Swiper's own stylesheet puts .swiper-wrapper (.gallery__track) at
     z-index:1, which otherwise paints the slides over these buttons —
     they were never in their own stacking context before Swiper. */
  z-index: 2;
  width: 52px; height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(232, 233, 238, .28);
  background: rgba(10, 15, 30, .55);
  backdrop-filter: blur(8px);
  color: var(--color-text-light);
  font-size: 18px;
  line-height: 1;
  transition: border-color .3s ease, color .3s ease;
}

.gallery__nav:hover { border-color: var(--color-accent-hover-light); color: var(--color-white); }
.gallery__nav--prev { left: clamp(10px, 2vw, 24px); }
.gallery__nav--next { right: clamp(10px, 2vw, 24px); }

/* Swiper marks the arrow disabled at either end of the track (its own
   opacity rule for this doesn't match our custom classes — see
   .gallery__nav's z-index comment) — hide it outright instead. */
.gallery__nav.swiper-button-disabled { display: none; }

/* ---- Lightbox ------------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--content-pad);
  background: rgba(7, 11, 22, .94);
  backdrop-filter: blur(6px);
  animation: sitwFade .3s ease;
}

.lightbox[hidden] { display: none; }

.lightbox__img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5);
}

.lightbox__meta {
  position: absolute;
  left: var(--content-pad);
  bottom: clamp(20px, 4vh, 40px);
  margin: 0;
  max-width: 60ch;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-text-muted-light);
}

.lightbox__btn {
  position: absolute;
  width: 48px; height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(232, 233, 238, .28);
  background: transparent;
  color: var(--color-text-light);
  font-size: 18px;
  line-height: 1;
  transition: border-color .3s ease, color .3s ease;
}

.lightbox__btn:hover { border-color: var(--color-accent-hover-light); color: var(--color-white); }
.lightbox__close { top: clamp(20px, 4vh, 40px); right: var(--content-pad); }
.lightbox__prev { left: clamp(12px, 2vw, 28px); top: 50%; translate: 0 -50%; width: 52px; height: 52px; }
.lightbox__next { right: clamp(12px, 2vw, 28px); top: 50%; translate: 0 -50%; width: 52px; height: 52px; }

/* ---- Kontakt (footer CTA on homepage) --------------------------------------------------- */

.contact-band {
  position: relative;
  min-height: clamp(560px, 92vh, 900px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--background-darker);
  padding: clamp(90px, 16vh, 180px) var(--content-pad) clamp(40px, 7vh, 80px);
}

.contact-band__media { position: absolute; inset: 0; }
.contact-band__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  max-width: 100% !important;
  animation: sitwHeroZoom 20s ease-in-out infinite alternate;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .contact-band__media img { animation: none; } }

.contact-band__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 11, 22, .78), rgba(7, 11, 22, .7) 30%, rgba(7, 11, 22, .97));
}

.contact-band__grid {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(28px, 5vw, 90px);
  align-items: end;
  max-width: var(--content-max);
  margin: 0 auto;
}

.contact-card {
  justify-self: end;
  width: min(440px, 100%);
  padding: clamp(26px, 3.4vw, 40px);
  border-radius: 20px;
  background: rgba(14, 20, 38, .6);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(232, 233, 238, .12);
  font-style: normal;
}

.contact-card__label {
  margin: 0 0 18px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #868A99;
}

.contact-card__address {
  margin: 0 0 22px;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
  color: var(--color-white);
}

.contact-card__address span { color: var(--color-text-on-dark); }

.contact-card__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: clamp(14px, 1.05vw, 16px);
  letter-spacing: .02em;
}

.contact-card__list a { color: var(--color-white); transition: color .3s ease; }
.contact-card__list a:hover { color: var(--color-text-muted-light); }


/* ===== forms.css ===== */
/* ==========================================================================
   SITW e.V. — shared form styles (Mitglied werden, Kontakt).
   ========================================================================== */

/* Scoped to the Mitglied-werden page (page-id-167) only — the .form-*
   classes below are shared with Kontakt's form, so this rule must stay
   scoped by page ID rather than touching .wpcf7-form globally. */
body.page-id-167 .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vh, 64px);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-text-muted-dark);
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--border-dark-strong);
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
}

.form-field textarea { line-height: 1.6; resize: vertical; }
.form-field input:focus, .form-field textarea:focus { outline: 0; border-bottom-color: var(--primary); }

.form-row { display: flex; flex-wrap: wrap; gap: clamp(20px, 2.8vw, 40px); }
.form-row + .form-row { margin-top: clamp(20px, 2.8vh, 32px); }

label.form-checkbox + .form-row {
  margin-top: clamp(20px, 2.8vh, 32px);
  margin-bottom: clamp(20px, 2.8vh, 32px);
}

.form-fieldset { border: 0; padding: clamp(32px, 4.6vh, 52px) 0 0; margin: 0; display: block; border-top: 1px solid var(--border-dark); }

.form-legend { display: block; padding: 0; margin: 0 0 clamp(18px, 2.6vh, 28px); }
.form-legend__step { display: block; margin: 0 0 10px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); }
.form-legend__title { display: block; font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em; color: var(--text); }
.form-legend__hint { display: block; margin: 10px 0 0; font-size: clamp(14px, 1.05vw, 16px); letter-spacing: 0; text-transform: none; line-height: 1.65; color: var(--color-text-muted-dark); }

/* "Art der Mitgliedschaft" per-option hint (assets/js/mitglied-werden.js
   swaps the text on change) — starts empty until JS runs, so hide it
   until populated to avoid a flash of empty space. */
.art-hinweis:empty { display: none; }
.art-hinweis { margin: clamp(16px, 2.4vh, 22px) 0 0; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.65; color: var(--text); }

.form-checkbox {
  display: block;
  position: relative;
  padding-left: 30px;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.65;
  color: var(--color-text-muted-dark);
  cursor: pointer;
}

/*
 * The checkbox is pulled out of flow instead of being a flex item — CF7's
 * acceptance markup gets flattened via display:contents below, which left
 * every remaining text run and the <a> as separate flex items that each
 * shrank to their longest word's width (one word per line) once the row
 * ran out of space. A block label with the input positioned into a
 * reserved left gutter lets the text flow as one normal wrapping
 * paragraph instead.
 */
.form-checkbox input {
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--primary);
}
.form-checkbox a { color: var(--primary); }
/* CF7 acceptance-tag flattening for .form-checkbox layout */
.form-checkbox .wpcf7-form-control-wrap,
.form-checkbox .wpcf7-form-control.wpcf7-acceptance,
.form-checkbox .wpcf7-list-item,
.form-checkbox .wpcf7-list-item label {
  display: contents;
}


.form-submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding-top: clamp(24px, 3.4vh, 38px);
  border-top: 1px solid var(--border-dark);
}

/* CF7's own hidden spinner (width:24px, margin:0 24px) still occupies
   flex space between the button and the note — take it out of flow so
   the visible gap actually matches the row's 16px gap. Same issue on
   the Kontakt form's own submit row (.kontakt-submit-row). */
.form-submit-row .wpcf7-spinner,
.kontakt-submit-row .wpcf7-spinner { position: absolute; margin: 0; }

.form-submit-row__note { font-size: clamp(14px, 1.05vw, 16px); line-height: 1.65; color: var(--color-text-muted-dark); }

.form-success { padding-top: clamp(20px, 3vh, 30px); border-top: 1px solid rgba(60, 90, 163, .4); }
.form-success__tag { margin: 0 0 clamp(12px, 1.8vh, 18px); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); }
.form-success__title { margin: 0 0 clamp(14px, 2vh, 20px); font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.form-success__text { margin: 0 0 clamp(18px, 2.6vh, 26px); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; color: var(--color-text-muted-dark); }

/*
 * Aufnahmeantrag form (Mitglied werden): the "Art der Mitgliedschaft"
 * [radio] tag renders as plain browser radio buttons by default — the
 * Design Canvas reference shows these as pill toggle buttons instead,
 * matching the .chip style used for the Kontakt page's Anliegen picker.
 * CF7's own "class:" option isn't honored on the radio tag type, so this
 * is scoped via the data-name CF7 always adds to the field's wrapper.
 */
.wpcf7-form-control-wrap[data-name="art"] .wpcf7-form-control.wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.wpcf7-form-control-wrap[data-name="art"] .wpcf7-list-item { margin: 0; }
.wpcf7-form-control-wrap[data-name="art"] .wpcf7-list-item label {
  display: flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 15px 26px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  background: transparent;
  color: var(--color-text-muted-dark);
  border: 1px solid rgba(20, 22, 28, .2);
  transition: background-color .28s ease, color .28s ease, border-color .28s ease;
}
.wpcf7-form-control-wrap[data-name="art"] input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.wpcf7-form-control-wrap[data-name="art"] label:has(input:checked) {
  background: var(--secondary);
  color: #fff;
  border-color: var(--secondary);
}
.wpcf7-form-control-wrap[data-name="art"] label:not(:has(input:checked)):hover {
  border-color: var(--primary);
  color: var(--primary);
}
.wpcf7-form-control-wrap[data-name="art"] label:has(input:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* Repeater for Contact Form 7's own "add row" link — plain unstyled
   text link by default, restyled to match the site's secondary button. */
.repeater-field-button-add {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 15px 26px;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-dark-strong);
  cursor: pointer;
  transition: border-color .3s ease, color .3s ease;
}
.repeater-field-button-add:hover { border-color: var(--primary); color: var(--primary); }

/* Repeater for Contact Form 7's own wrapper adds a default 5px 15px
   padding — the plugin's own stylesheet loads after this one, so
   !important is needed to actually win the override. */
.cf7-repeater { padding: 0 !important; }

/* The plugin toggles the divider by adding/removing ".repeater-content-show"
   the instant you click — while the fields themselves take 600ms to slide
   (jQuery slideToggle("slow")). Keeping the border always structurally
   present and only transitioning its color (transparent <-> visible) makes
   it fade in/out over the same timeframe instead of snapping. */
.repeater-field-item .repeater-field-header .repeater-field-header {
  padding-bottom: 10px;
  border-bottom: 1px solid transparent !important;
  transition: border-bottom-color .6s ease;
}
.repeater-field-item .repeater-field-header .repeater-field-header.repeater-content-show {
  border-bottom-color: var(--border-dark) !important;
}

/* The plugin renders the header wrapper twice (nested); only the inner
   one above needs the divider, the outer one just doubles it. */
.repeater-field-item > .repeater-field-header {
  border-bottom: 0;
}

.cf7-repeater .repeater-field-footer {
  margin: 30px 0 0;
}


/* ===== legal.css ===== */
/* ==========================================================================
   SITW e.V. — Impressum / Datenschutz (legal pages).
   ========================================================================== */

.legal-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0 clamp(24px, 3vw, 56px); margin: 0; }
.legal-dl > div { padding: clamp(20px, 2.8vh, 26px) 0; border-top: 1px solid var(--border-dark); }
.legal-dl dt { margin: 0 0 10px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); }
.legal-dl dd { margin: 0; display: flex; flex-direction: column; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.65; color: var(--color-text-muted-dark); }
.legal-dl dd .legal-dl__name { font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em; color: var(--text); margin-bottom: 8px; }
.legal-dl dd a { color: var(--primary); }

.legal-rows { display: flex; flex-direction: column; }
.legal-row { padding: clamp(24px, 3.4vh, 38px) 0; border-top: 1px solid var(--border-dark); display: grid; grid-template-columns: repeat(auto-fit, minmax(max(300px, 40%), 1fr)); gap: 14px clamp(20px, 3vw, 48px); }
.legal-row__title { font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em; text-wrap: pretty; }
.legal-row__body { display: flex; flex-direction: column; gap: clamp(14px, 2vh, 20px); }
.legal-row__body p { margin: 0; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.7; color: var(--color-text-muted-dark); }
.legal-row__body a { color: var(--primary); }

.legal-responsible { margin-left: auto; display: flex; flex-direction: column; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.65; color: var(--color-text-muted-dark); }
.legal-responsible__name { font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em; color: var(--text); margin-bottom: 10px; }


/* ===== publikationen.css ===== */
/* ==========================================================================
   SITW e.V. — Publikationen (hub + Pressemitteilungen/Fachartikel/Literatur).
   ========================================================================== */

.entry-group { margin: 0 0 clamp(40px, 6vh, 72px); }

.entry-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px clamp(16px, 2vw, 26px);
  margin: 0 0 clamp(16px, 2.4vh, 24px);
}

.entry-group__title { margin: 0; font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.entry-group__count { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); }

.entry-list { list-style: none; margin: 0; padding: 0; }

.entry-list a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px clamp(16px, 3vw, 44px);
  padding: clamp(24px, 3.4vh, 38px) 0;
  border-top: 1px solid var(--border-dark);
  color: var(--text);
  transition: color .3s ease;
}

.entry-list a:hover { color: var(--primary); }
.entry-list__main { flex: 1 1 300px; min-width: min(100%, 260px); display: flex; flex-direction: column; gap: 10px; }
.entry-list__title { font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.25; letter-spacing: -.012em; text-wrap: pretty; }
.entry-list__meta { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--color-text-muted-dark); }
.entry-list__action {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 15px 26px;
  border-radius: 999px;
  border: 1px solid rgba(60, 90, 163, .45);
  color: var(--primary);
  white-space: nowrap;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.entry-list a:hover .entry-list__action { background: var(--primary); color: #fff; border-color: var(--primary); }

.entry-empty { margin: 0; padding-top: clamp(24px, 3.4vh, 38px); border-top: 1px solid var(--border-dark); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; color: var(--color-text-muted-dark); }
.entry-empty a { color: var(--primary); }

.filter-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(28px, 4vh, 48px); }
.filter-chips[hidden] { display: none; }

.filter-chip {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 15px 26px;
  border-radius: 999px;
  white-space: nowrap;
  background: transparent;
  color: var(--color-text-muted-dark);
  border: 1px solid rgba(20, 22, 28, .2);
  transition: background-color .28s ease, color .28s ease, border-color .28s ease;
}

.filter-chip[aria-current="page"] {
  background: var(--secondary);
  color: #fff;
  border-color: var(--secondary);
}
.filter-chip:not([aria-current="page"]):hover {
  border-color: var(--secondary);
  color: var(--secondary);
}

.jump-list { display: flex; flex-direction: column; }
.jump-list a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: clamp(20px, 3vh, 30px) 0; border-top: 1px solid var(--border-dark); font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.25; letter-spacing: -.02em; color: var(--text); transition: color .3s ease; }
.jump-list a:hover { color: var(--primary); }
.jump-list a span { display: inline-flex; align-items: center; font-weight: 400; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); white-space: nowrap; }


/* ===== veranstaltungen.css ===== */
/* ==========================================================================
   SITW e.V. — Veranstaltungen (hub + SITW-/TAE-Kolloquien/Messen).
   ========================================================================== */

.event-rows { list-style: none; margin: 0; padding: 0; }
.event-rows > li { border-top: 1px solid var(--border-dark); }

.event-rows a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px clamp(20px, 4vw, 64px);
  padding: clamp(24px, 3.4vh, 38px) 0;
  border-top: 1px solid var(--border-dark);
  color: var(--text);
  transition: color .3s ease;
}

.event-rows a:hover { color: var(--primary); }

.event-rows__date { flex: 0 0 auto; width: clamp(76px, 7vw, 110px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; }
.event-rows__day { font-weight: 900; font-size: clamp(1.9rem, 3vw, 2.8rem); line-height: .9; letter-spacing: -.02em; color: var(--primary); }
.event-rows__month { font-size: clamp(9px, .85vw, 11px); letter-spacing: .18em; text-transform: uppercase; color: var(--color-text-muted-dark); }

.event-rows__body { flex: 1 1 300px; min-width: min(100%, 260px); display: flex; flex-direction: column; gap: 8px; }
.event-rows__meta { display: block; font-size: clamp(9px, .85vw, 11px); letter-spacing: .18em; text-transform: uppercase; line-height: 1.6; color: var(--color-text-muted-dark); }
.event-rows__meta span:first-child { color: var(--primary); }
.event-rows__title { font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em; color: var(--text); text-wrap: pretty; }
.event-rows__ortzeit { font-size: clamp(9px, .85vw, 11px); letter-spacing: .16em; text-transform: uppercase; color: var(--color-text-muted-dark); }

.event-rows__action {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 15px 26px;
  border-radius: 999px;
  border: 1px solid rgba(60, 90, 163, .45);
  color: var(--primary);
  white-space: nowrap;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

.event-rows a:hover .event-rows__action {
  background: var(--secondary);
  color: #fff;
  border-color: var(--secondary);
}

/* ---- Archive rows (compact variant) ------------------------------------------ */

.archive-rows a { padding: clamp(20px, 2.8vh, 30px) 0; }
.archive-rows .event-rows__day { font-weight: 700; font-size: clamp(1.1rem, 1.6vw, 1.5rem); color: var(--color-text-muted-dark); }
.archive-rows .event-rows__title { font-size: clamp(1rem, 1.5vw, 1.3rem); }
.archive-rows a:hover .event-rows__action {
  background: var(--secondary);
  color: #fff;
  border-color: var(--secondary);
}

.empty-note { margin: clamp(32px, 5vh, 56px) 0 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; color: var(--color-text-muted-dark); }
.empty-note--tight { margin: 0; }

/* ---- Series filter chips ------------------------------------------------------ */

.filter-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(28px, 4vh, 48px); }

.filter-chip {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 12px 20px;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  color: var(--color-text-muted-dark);
  border: 1px solid rgba(20, 22, 28, .2);
  transition: background-color .28s ease, color .28s ease, border-color .28s ease;
}

.filter-chip[aria-current="page"] {
  background: var(--secondary);
  color: #fff;
  border-color: var(--secondary);
}
.filter-chip:not([aria-current="page"]):hover {
  border-color: var(--secondary);
  color: var(--secondary);
}

.jump-list { display: flex; flex-direction: column; }
.jump-list a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: clamp(20px, 3vh, 30px) 0; border-top: 1px solid var(--border-dark); font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.25; letter-spacing: -.02em; color: var(--text); transition: color .3s ease; }
.jump-list a:hover { color: var(--primary); }
.jump-list a span { display: inline-flex; align-items: center; font-weight: 400; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); white-space: nowrap; }

/* ---- Centered dark CTA band ----------------------------------------------------- */

.member-cta {
  position: relative;
  overflow: hidden;
  background: var(--secondary);
  min-height: clamp(320px, 52vh, 520px);
  display: flex;
  align-items: center;
  padding: clamp(64px, 11vh, 140px) var(--content-pad);
}

.member-cta__media { position: absolute; inset: 0; }
.member-cta__media img { width: 100% !important; height: 100% !important; object-fit: cover; max-width: 100% !important; animation: sitwHeroZoom 20s ease-in-out infinite alternate; will-change: transform; }
.member-cta__media video { width: 100% !important; height: 100% !important; object-fit: cover; max-width: 100% !important; display: block; }
@media (prefers-reduced-motion: reduce) { .member-cta__media img { animation: none; } }
.member-cta__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(34, 55, 104, .82), rgba(10, 15, 30, .86)); }

.member-cta__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(18px, 2.6vh, 28px);
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}
.member-cta__inner .hero-band__kicker { margin-bottom: 0; }

.member-cta__title { margin: 0; max-width: min(100%, 26ch); font-weight: 900; font-size: clamp(1.7rem, 3.4vw, 3rem); line-height: 1.04; letter-spacing: -.03em; color: var(--color-white); text-wrap: balance; }


/* ===== veranstaltung.css ===== */
/* ==========================================================================
   SITW e.V. — Veranstaltung (event detail page, driven by ?event=slug).
   ========================================================================== */

.event-hero__facts { margin: clamp(20px, 3vh, 30px) 0 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; color: #C7CBD8; }
.event-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: clamp(32px, 5vh, 52px); }

.theme-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(340px, 45%), 1fr)); gap: clamp(28px, 5vw, 90px); align-items: end; margin-bottom: clamp(36px, 6vh, 72px); }
.theme-columns__para { margin: 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; color: var(--color-text-muted-dark); }
.theme-columns__body { display: flex; flex-direction: column; gap: clamp(14px, 2vh, 20px); margin-top: clamp(24px, 3.4vh, 36px); }
/* .theme-columns-intro and the Columns-block styling below are single-veranstaltung only — .theme-columns__body itself is scoped the same way elsewhere in this file (see the mobile override further down). */
.single-veranstaltung .theme-columns-intro { margin-bottom: clamp(24px, 3.4vh, 36px); }
/* The two-column split here comes from an editor's own Columns block, not a template grid — matching gap to the rest of the page's two-column sections. */
.single-veranstaltung .theme-columns__body .wp-block-columns { gap: clamp(28px, 5vw, 90px); margin-bottom: 0; }
.single-veranstaltung .theme-columns__body .wp-block-column { margin: 0; }
.single-veranstaltung .theme-columns__body { margin-bottom: clamp(30px, 8vh, 60px); }
.single-veranstaltung .theme-columns__body .theme-columns__para + .theme-columns__para { margin-top: clamp(20px, 2vh, 30px); }
@media (max-width: 781px) {
  .single-veranstaltung .theme-columns__body .wp-block-columns { gap: 20px; }
}

.fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(220px, calc((100% - 3 * clamp(24px, 3vw, 56px)) / 4))), 1fr)); gap: 0 clamp(24px, 3vw, 56px); margin: 0; }
.fact-grid > div { padding: clamp(16px, 2.4vh, 22px) 0; border-top: 1px solid var(--border-dark); }
.fact-grid dt { margin: 0 0 8px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); }
.fact-grid dd { margin: 0; font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em; color: var(--text); }

.jump-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(28px, 4vh, 44px); }

.theme-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(max(340px, 45%), 1fr)); gap: 0 clamp(28px, 5vw, 90px); }
.theme-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: baseline; gap: clamp(12px, 1.6vw, 20px); padding: clamp(24px, 3.4vh, 38px) 0; border-top: 1px solid var(--border-dark); }
.theme-list__nr { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); }
.theme-list__name { font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em; text-wrap: pretty; }

.schedule { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--border-dark); }
.schedule li { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px clamp(20px, 3vw, 48px); padding: clamp(20px, 2.8vh, 30px) 0; border-top: 1px solid var(--border-dark); }
.schedule__time { flex: 0 0 96px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); padding-top: 5px; }
.schedule__body { display: flex; flex-direction: column; gap: 8px; max-width: calc(100% - 130px); }
.schedule__pause { font-weight: 700; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.4; letter-spacing: .02em; color: var(--primary); }
.schedule__title { font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em; text-wrap: pretty; }
.schedule__detail { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.65; color: var(--color-text-muted-dark); }
.schedule__speakers { font-size: clamp(14px, 1.05vw, 16px); line-height: 1.6; color: var(--color-text-muted-dark); }

.speaker-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(max(340px, 45%), 1fr)); gap: 0 clamp(28px, 5vw, 90px); border-bottom: 1px solid var(--border-dark); }
.speaker-grid li { display: flex; flex-direction: column; gap: 8px; padding: clamp(20px, 2.8vh, 30px) 0; border-top: 1px solid var(--border-dark); }
.speaker-grid__name { font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em; text-wrap: pretty; }
.speaker-grid__org { font-size: clamp(14px, 1.05vw, 16px); line-height: 1.6; color: var(--color-text-muted-dark); }

.audience-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(340px, 45%), 1fr)); gap: clamp(28px, 5vw, 90px); }
.audience-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--border-dark); }
.audience-list li { padding: clamp(14px, 2vh, 20px) 0; border-top: 1px solid var(--border-dark); font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em; }

.download-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--border-dark); }
.download-list a { display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(20px, 3vw, 48px); padding: clamp(20px, 2.8vh, 30px) 0; border-top: 1px solid var(--border-dark); color: var(--text); transition: color .3s ease; }
.download-list a:hover { color: var(--primary); }
.download-list__label { flex: 1 1 300px; min-width: min(100%, 260px); font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em; text-wrap: pretty; }
.download-list__art { display: inline-flex; align-items: center; flex: 0 0 auto; margin-left: auto; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 15px 26px; border-radius: 999px; border: 1px solid rgba(60, 90, 163, .45); color: var(--primary); white-space: nowrap; }

/* ---- Registration --------------------------------------------------------------- */

.fee-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin: 0; }
.fee-grid > div { padding: clamp(14px, 2vh, 20px) 0; border-top: 1px solid var(--border-dark); }
.fee-grid dt { margin: 0 0 8px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--color-text-muted-dark); }
.fee-grid dd { margin: 0; font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em; }
.fee-grid dd.is-member { color: var(--primary); }

.office-block { display: flex; flex-direction: column; gap: 6px; margin-top: clamp(26px, 4vh, 40px); padding-top: clamp(20px, 3vh, 28px); border-top: 1px solid var(--border-dark); font-size: clamp(14px, 1.05vw, 16px); line-height: 1.65; color: var(--color-text-muted-dark); }
.office-block span:first-child { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); margin-bottom: 6px; }
.office-block a { color: var(--text); }

.event-form { flex: 1 1 520px; min-width: min(100%, 300px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: clamp(20px, 2.8vw, 40px); }
.event-form .form-field { grid-column: span 1; }
.event-form .form-field--full { grid-column: 1 / -1; }
.event-form select { padding: 12px 0; border: 0; border-bottom: 1px solid var(--border-dark-strong); background: transparent; color: var(--text); font-family: var(--font-sans); font-size: clamp(15px, 1.15vw, 17px); }

.event-success { flex: 1 1 520px; min-width: min(100%, 300px); padding-top: clamp(20px, 3vh, 28px); border-top: 1px solid var(--border-dark); }
.event-success__tag { margin: 0 0 clamp(16px, 2.4vh, 26px); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--primary); }
.event-success__title { margin: 0 0 14px; font-weight: 700; font-size: clamp(1.2rem, 2vw, 1.7rem); line-height: 1.2; color: var(--text); text-wrap: balance; }
.event-success__text { margin: 0 0 22px; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; color: var(--color-text-muted-dark); }

/* ---- Venue ------------------------------------------------------------------------ */

.venue-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(340px, 45%), 1fr)); gap: clamp(28px, 5vw, 90px); align-items: start; }
.venue-block { display: flex; flex-direction: column; gap: 6px; padding: clamp(20px, 3vh, 28px) 0; border-top: 1px solid var(--border-dark); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; color: var(--color-text-muted-dark); }
.venue-block:last-child { border-bottom: 1px solid var(--border-dark); }
.venue-block[hidden] { display: none; }
.venue-block__label { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); margin-bottom: 6px; }
.venue-block__name { font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em; color: var(--text); margin-bottom: 6px; }
.venue-block a { color: var(--text); }
.venue-block a.venue-link { color: var(--primary); }
.single-veranstaltung .event-kontakt {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.5;
}
.kontakt-paar { display: flex; flex-direction: column; gap: 0; }

.venue-map-frame { position: relative; min-height: clamp(320px, 52vh, 540px); border: 1px solid var(--border-dark); }
.venue-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


/* ===== mitglieder.css ===== */
/* ==========================================================================
   SITW e.V. — Mitgliedersuche: map (consent-gated) + filter/search + list.
   ========================================================================== */

.map-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 40px);
}

.map-legend { display: flex; flex-wrap: wrap; gap: clamp(16px, 2.4vw, 32px); align-items: center; }

.map-legend__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-text-muted-dark);
}

.legend-dot { display: block; width: 10px; height: 10px; border-radius: 50%; flex: none; }

.map-frame {
  position: relative;
  height: clamp(360px, 58vh, 620px);
  overflow: hidden;
  background: var(--surface);
}

.map-frame #sitw-map { position: absolute; inset: 0; }

.map-consent {
  position: absolute;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: clamp(24px, 4vw, 48px);
  background: var(--surface);
}

.map-consent[hidden] { display: none; }
.map-consent__label { margin: 0; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); }
.map-consent__text { margin: 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; color: var(--color-text-muted-dark); }

.leaflet-container { background: #F7F7F8; font-family: var(--font-sans); }
.leaflet-tile-pane { filter: grayscale(1) contrast(.96) brightness(1.02); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #fff; color: var(--text); border-radius: 8px; box-shadow: 0 14px 44px rgba(20, 22, 28, .18); }
.leaflet-popup-content { margin: 14px 16px; font-size: 14px; line-height: 1.5; }
.leaflet-popup-content a { color: var(--primary); }

/* Google Maps InfoWindow, matched to the Leaflet popup above.
   Google reserves a tall header row for its close button, which left a large
   empty gap above the member's name. The close button is taken out of the flow
   so the text starts at the top, as it does in the prototype's popup. */
.gm-style .gm-style-iw-c {
  padding: 14px 16px !important;
  border-radius: 8px;
  box-shadow: 0 14px 44px rgba(20, 22, 28, .18);
}
.gm-style .gm-style-iw-ch { padding-top: 0 !important; }
.gm-style .gm-style-iw-d {
  overflow: visible !important;
  padding: 0 !important;
  max-height: none !important;
}
.gm-style .gm-style-iw-chr {
  position: absolute;
  top: 0;
  right: 0;
  height: auto;
  width: auto;
}
.gm-style .gm-style-iw-chr .gm-ui-hover-effect { width: 32px !important; height: 32px !important; }
.gm-style .gm-style-iw-chr .gm-ui-hover-effect {
  width: 26px !important;
  height: 26px !important;
  opacity: .45;
}
.gm-style .gm-style-iw-chr .gm-ui-hover-effect > span {
  width: 13px !important;
  height: 13px !important;
  margin: 6px !important;
}
.gm-style .gm-style-iw-chr .gm-ui-hover-effect:hover { opacity: .8; }

/* Google styles the bubble as 13px Roboto. Everything below re-states the
   Leaflet popup's own values so the two read identically. */
.gm-style .sitw-iw,
.gm-style .sitw-iw * {
  font-family: var(--font-sans);
}
.sitw-iw {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  /* min-width, nicht nur max-width: Google bemisst die Blase am Inhalt, eine
     Obergrenze allein aenderte an der Breite nichts (gemessen: 247px bei
     max-width 300px). */
  min-width: 260px;
  max-width: 300px;
}
/* Der Schliessen-Knopf haengt absolut in der Ecke (siehe .gm-style-iw-chr
   oben) und nimmt keinen Platz weg. Ohne diese Reserve lief der Firmenname
   direkt unter das Kreuz. Nur die erste Zeile ruecken, damit Anschrift und
   Link am linken Rand bleiben. */
.sitw-iw strong {
  display: block;
  padding-right: 26px;
  font-weight: 700;
}
.sitw-iw a {
  display: block;
  margin-top: 2px;
  color: var(--primary);
}
/* Google puts focus inside the bubble the moment it opens, so the global
   :focus-visible ring showed up around the link without anyone tabbing. */
.gm-style .sitw-iw a:focus,
.gm-style .sitw-iw a:focus-visible,
.gm-style .gm-style-iw-c:focus,
.gm-style .gm-style-iw-c:focus-visible,
.gm-style .gm-style-iw-chr button:focus,
.gm-style .gm-style-iw-chr button:focus-visible {
  outline: 0;
}
.leaflet-control-zoom a { background: #fff; color: var(--text); border-color: var(--border-dark-strong); }
.leaflet-control-attribution { background: rgba(255, 255, 255, .86); color: #565A66; }
.leaflet-control-attribution a { color: var(--primary); }

/* ---- Search form -------------------------------------------------------------- */

.search-form { margin-bottom: clamp(28px, 4vh, 48px); }

.search-form__row {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 32px);
  padding: clamp(14px, 2.2vh, 22px) 0;
  border-bottom: 1px solid var(--border-dark-strong);
}

.search-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.75rem);
  letter-spacing: -.018em;
}

.search-input::placeholder { color: var(--color-text-muted-light-2); }
.search-input:focus { outline: none; }

.search-form__count {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--primary);
  white-space: nowrap;
}

.search-form__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 44px);
  padding: clamp(16px, 2.4vh, 24px) 0;
  border-bottom: 1px solid var(--border-dark-strong);
}

.chip-group { display: flex; flex-wrap: wrap; gap: 10px; }

.chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 15px 26px;
  border-radius: 999px;
  white-space: nowrap;
  background: transparent;
  color: #565A66;
  border: 1px solid rgba(20, 22, 28, .2);
  transition: background-color .28s ease, color .28s ease, border-color .28s ease;
}

.search-form__filters .chip {
  padding: 15px 20px;
}

.chip[aria-pressed="true"] {
  background: var(--secondary);
  color: #fff;
  border-color: var(--secondary);
}
.chip:not([aria-pressed="true"]):hover { border-color: var(--primary); color: var(--primary); }

.chip--small { padding: 12px 20px; }
.chip--small[aria-pressed="true"] { background: var(--secondary); border-color: var(--secondary); }

.radius-group { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 16px); flex-wrap: wrap; }

.ort-input {
  width: clamp(170px, 18vw, 220px);
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--border-dark-strong);
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
}
.ort-input:focus { outline: none; }

.reset-btn {
  padding: 8px 0;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #565A66;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color .3s ease;
}

.reset-btn:hover { color: var(--primary); }

.search-hint { margin: 0 0 clamp(24px, 3.4vh, 38px); font-size: clamp(14px, 1.05vw, 16px); line-height: 1.65; color: var(--primary); }
.search-empty { margin: clamp(28px, 4vh, 48px) 0 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; color: var(--color-text-muted-dark); }

/* ---- Member rows ---------------------------------------------------------------- */

.member-list { list-style: none; margin: 0; padding: 0; }

.member-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px clamp(14px, 2vw, 28px);
  border-bottom: 1px solid var(--border-dark);
}

.member-row__link {
  flex: 1 1 420px;
  min-width: min(100%, 260px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px clamp(20px, 4vw, 56px);
  padding: clamp(24px, 3.4vh, 38px) 0;
  color: var(--text);
  transition: color .3s ease;
}

.member-row__link:hover { color: var(--primary); }

.member-row__main { flex: 1 1 280px; min-width: min(100%, 240px); display: flex; flex-direction: column; gap: 10px; }

.member-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-text-muted-dark);
}

.member-row__meta span:first-child { color: var(--primary); }
.member-row__meta .member-row__km { color: #565A66; }

.member-row__name { font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em; color: var(--text); text-wrap: pretty; }
.member-row__line { font-size: clamp(14px, 1.05vw, 16px); line-height: 1.65; color: var(--color-text-muted-dark); }

.member-row__actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-left: auto; }

/* The row's own "Details" action is blue-toned, not the neutral dark
   outline .btn--outline-dark uses elsewhere on the site — scoped to this
   row so "Auf Karte" and other buttons sharing that class keep their own
   colour. Same pattern as .org-card__body / .row-list__action. */
.member-row__actions .btn--outline-dark {
  border-color: rgba(60, 90, 163, .45);
  color: var(--primary);
}
.member-row__actions .btn--outline-dark:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

@media (max-width: 640px) {
  .member-row__link { padding-bottom: 0; }
  .member-row__actions { margin-top: 0 !important; margin-bottom: 26px; }
}


/* ===== mitglied.css ===== */
/* ==========================================================================
   SITW e.V. — Mitglied (member detail page, driven by ?mitglied=slug).
   ========================================================================== */

.member-hero {
  position: relative;
  overflow: hidden;
  background: var(--background);
  padding: clamp(120px, 20vh, 220px) var(--content-pad) clamp(56px, 9vh, 110px);
}

.member-hero__media { position: absolute; inset: 0; }
.member-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.member-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(10, 15, 30, .95), rgba(10, 15, 30, .72) 55%, rgba(10, 15, 30, .9));
}

.member-hero__inner { position: relative; max-width: var(--content-max); margin: 0 auto; }
.member-hero__eyebrow { margin: 0 0 clamp(16px, 2.4vh, 26px); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--color-text-muted-light-2); }
.member-hero__title { margin: 0; max-width: min(100%, 26ch); font-weight: 900; font-size: clamp(2rem, 4.6vw, 4.2rem); line-height: 1.02; letter-spacing: -.03em; color: var(--color-white); text-wrap: balance; }
.member-hero__langname { margin: clamp(16px, 2.4vh, 26px) 0 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; color: var(--color-text-on-dark); }
.member-hero__zusatz { margin: clamp(10px, 1.6vh, 16px) 0 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; color: var(--color-accent-hover-light); }
.member-hero__schwerpunkt { margin: clamp(10px, 1.6vh, 16px) 0 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; color: var(--color-white); }
.member-hero__badge { display: inline-block; margin: clamp(24px, 3.6vh, 38px) 0 0; padding: 15px 26px; border-radius: 999px; border: 1px solid var(--border-light-strong); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-light); }
.member-hero__badge[hidden] { display: none; }

/* ---- Body: sticky sidebar + detail sections --------------------------------- */

.member-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(340px, 45%), 1fr));
  gap: clamp(28px, 5vw, 90px);
  align-items: start;
  max-width: var(--content-max);
  margin: 0 auto;
}

.member-sidebar { position: sticky; top: clamp(96px, 12vh, 132px); align-self: start; }

.member-sidebar__logo { display: block; width: auto !important; height: auto !important; max-width: min(320px, 100%) !important; max-height: clamp(70px, 9vh, 110px) !important; margin: 0 0 clamp(28px, 4vh, 48px); }

.contact-dl { margin: 0; display: flex; flex-direction: column; }

.contact-dl__row { display: flex; flex-direction: column; gap: 5px; padding: clamp(13px, 1.9vh, 18px) 0; border-top: 1px solid var(--border-dark); }
.contact-dl__row:last-child { border-bottom: 1px solid var(--border-dark); }
.contact-dl__row dt { margin: 0; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); }
.contact-dl__row dd { margin: 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; }
.contact-dl__row dd a { color: var(--primary); }

.member-detail { display: flex; flex-direction: column; gap: clamp(44px, 7vh, 80px); }
.member-detail__label { margin: 0 0 clamp(16px, 2.4vh, 26px); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--primary); }
/* .entry-group__title (the "big" Inhaltsblock heading) is a <p> too, and
   this rule's own specificity beat its identically-.member-detail-scoped
   0,1,0 selector for font-size/line-height — shrinking a heading meant
   to read at clamp(1.15rem,1.7vw,1.5rem)/1.2 down to body-text size and
   line-height. Excluded here the same way .member-detail__label is. */
.member-detail p:not(.member-detail__label):not(.entry-group__title) { margin: 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; }

.mitglied-profil { color: var(--color-text-muted-dark); }
/* Gewicht wie die Regel oben (0,3,1): .member-detail p:not()
   :not() schlug `.mitglied-profil > p` (0,1,1), der Absatzabstand kam nie an. */
.member-detail .mitglied-profil > p:not(.member-detail__label) { margin: 0 0 1em; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; }
.member-detail .mitglied-profil > p:last-child { margin-bottom: 0; }

.tag-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-pill { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 11px 20px; border-radius: 999px; border: 1px solid rgba(60, 90, 163, .32); background: var(--color-white); color: var(--primary); }
.tag-pill--plain { font-weight: 400; letter-spacing: .14em; border-color: var(--border-dark-strong); color: var(--text); }

.cert-logos { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(12px, 1.6vw, 20px); }
.cert-logos img { display: block; height: 56px !important; width: auto !important; max-width: 150px !important; object-fit: contain; }

.plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.plain-list li { padding: clamp(11px, 1.6vh, 15px) 0; border-top: 1px solid var(--border-dark); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; }
.plain-list--muted li { font-size: clamp(14px, 1.05vw, 16px); line-height: 1.65; color: var(--color-text-muted-dark); }
/* Verschachtelte Listen (Redaktion kann im Editor einrücken): Text eingerückt,
   Trennlinien weiter über die volle Spalte, damit die Spalte nicht ausfranst.
   Ohne das padding-bottom: 0 addiert sich der Innenabstand des Eltern-<li> zu
   dem der letzten Unterzeile — 11px Bruch in einer sonst lückenlosen Folge. */
.plain-list li:has(> .plain-list) { padding-bottom: 0; }
.plain-list .plain-list { margin-top: clamp(11px, 1.6vh, 15px); }
.plain-list .plain-list li { padding-left: clamp(16px, 2vw, 28px); }
/* Liste und Fliesstext im selben Editor-Feld: ohne das hier stiess der Absatz
   ohne jeden Abstand an die letzte Listenzeile (gemessen 0px). */
.mitglied-profil .plain-list + p,
.mitglied-profil p + .plain-list { margin-top: clamp(20px, 3vh, 30px); }

.besonderes { padding-top: clamp(20px, 3vh, 30px); border-top: 1px solid var(--border-dark); }
.besonderes h2 { margin: 0 0 12px; font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; }
.besonderes p { color: var(--color-text-muted-dark); }

.no-details { margin: 0; padding-top: clamp(16px, 2.4vh, 22px); border-top: 1px solid var(--border-dark); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; color: var(--color-text-muted-dark); }

/* ---- Standort map ------------------------------------------------------------- */

.member-map {
  position: relative;
  height: clamp(280px, 44vh, 480px);
  overflow: hidden;
  background: #F7F7F8;
}

.member-map #sitw-map { position: absolute; inset: 0; }

/* ---- Weitere Mitglieder rows --------------------------------------------------- */

.more-members a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px clamp(20px, 3vw, 48px);
  padding: clamp(24px, 3.4vh, 38px) 0;
  border-top: 1px solid var(--border-dark);
  color: var(--text);
  transition: color .3s ease;
}

.more-members a:hover { color: var(--primary); }
.more-members__main { flex: 1 1 300px; min-width: min(100%, 260px); display: flex; flex-direction: column; gap: 10px; }
.more-members__name { font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.25; letter-spacing: -.02em; text-wrap: pretty; }
.more-members__place { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); }
.more-members__action {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 15px 26px;
  border-radius: 999px;
  border: 1px solid rgba(60, 90, 163, .45);
  color: var(--primary);
  white-space: nowrap;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.more-members a:hover .more-members__action { background: var(--primary); color: var(--color-white); border-color: var(--primary); }

/* ---- Bottom CTA band (centered) --------------------------------------------------- */

.member-cta {
  position: relative;
  overflow: hidden;
  background: var(--secondary);
  min-height: clamp(320px, 52vh, 520px);
  display: flex;
  align-items: center;
  padding: clamp(64px, 11vh, 140px) var(--content-pad);
}

.member-cta__media { position: absolute; inset: 0; }
.member-cta__media img { width: 100% !important; height: 100% !important; object-fit: cover; max-width: 100% !important; animation: sitwHeroZoom 20s ease-in-out infinite alternate; will-change: transform; }
.member-cta__media video { width: 100% !important; height: 100% !important; object-fit: cover; max-width: 100% !important; display: block; }
@media (prefers-reduced-motion: reduce) { .member-cta__media img { animation: none; } }
.member-cta__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(34, 55, 104, .82), rgba(10, 15, 30, .86)); }

.member-cta__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(18px, 2.6vh, 28px);
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

.member-cta__title { margin: 0; max-width: min(100%, 26ch); font-weight: 900; font-size: clamp(1.7rem, 3.4vw, 3rem); line-height: 1.04; letter-spacing: -.03em; color: var(--color-white); text-wrap: balance; }


/* ===== mitgliederbereich.css ===== */
/* ==========================================================================
   SITW e.V. — Mitgliederbereich (member area: prototype login + docs/gallery).
   ========================================================================== */

.login-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--background);
  padding: clamp(110px, 16vh, 170px) var(--content-pad) clamp(48px, 8vh, 90px);
}

.login-hero[hidden] { display: none; }

.login-hero__media { position: absolute; inset: 0; }
.login-hero__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  max-width: 100% !important;
}
.login-hero__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgba(10, 15, 30, .95), rgba(10, 15, 30, .72) 60%, rgba(10, 15, 30, .88)); }

.login-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(28px, 5vw, 90px);
  align-items: center;
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
}

.login-hero__title { margin: 0; max-width: min(100%, 26ch); font-weight: 900; font-size: clamp(2rem, 4.6vw, 4.2rem); line-height: 1.04; letter-spacing: -.03em; color: var(--color-white); text-wrap: balance; }
.login-hero__lead { margin: clamp(20px, 3vh, 32px) 0 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; color: var(--color-text-on-dark); }

.login-card {
  width: min(440px, 100%);
  justify-self: end;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.4vw, 22px);
  padding: clamp(26px, 3.4vw, 40px);
  border-radius: 20px;
  background: rgba(14, 20, 38, .72);
  backdrop-filter: blur(18px);
  border: 1px solid var(--border-light);
}

.login-card__label { margin: 0; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--color-text-muted-light-2); }

.login-field { display: flex; flex-direction: column; gap: 8px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--color-text-muted-light-2); }
.login-field input {
  padding: 14px;
  border-radius: 10px;
  border: 1px solid rgba(232, 233, 238, .22);
  background: rgba(232, 233, 238, .05);
  color: var(--color-text-light);
  font-size: 15px;
  outline: none;
}

.login-error { margin: 0; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.65; color: #E8B4B4; }
.login-card__forgot { margin: 0; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.65; color: var(--color-text-muted-light-2); }
.login-card__forgot a { color: var(--color-accent-hover-light); }

.login-card .btn.btn--primary {
  justify-content: center;
}

/* ---- Tabs ------------------------------------------------------------------ */

.mb-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(28px, 4vh, 48px) 0 0; }

.mb-tab {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 15px 26px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  background: transparent;
  color: var(--color-text-light);
  border: 1px solid var(--border-light-strong);
  transition: background-color .28s ease, color .28s ease, border-color .28s ease;
}

.mb-tab[aria-pressed="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---- Documents list --------------------------------------------------------- */

.doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.doc-list a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px clamp(16px, 3vw, 44px);
  padding: clamp(24px, 3.4vh, 38px) 0;
  border-top: 1px solid var(--border-dark);
  color: var(--text);
  transition: color .3s ease;
}

.doc-list a:hover { color: var(--primary); }
.doc-list__main { flex: 1 1 300px; min-width: min(100%, 260px); display: flex; flex-direction: column; gap: 10px; }
.doc-list__label { font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.25; letter-spacing: -.02em; text-wrap: pretty; }
.doc-list__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--color-text-muted-dark); }
.doc-list__meta span:first-child { color: var(--primary); }
.doc-list__action {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 15px 26px;
  border-radius: 999px;
  border: 1px solid rgba(60, 90, 163, .45);
  color: var(--primary);
  white-space: nowrap;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.doc-list a:hover .doc-list__action {
  background: var(--secondary);
  color: #fff;
  border-color: var(--secondary);
}

/* ---- Gallery (masonry) -------------------------------------------------------- */

.gallery-section { background: var(--surface); padding: clamp(64px, 11vh, 140px) 0; }
.gallery-section .container { padding-left: var(--content-pad); padding-right: var(--content-pad); max-width: var(--content-max-bleed); }

.gallery-meta { display: flex; flex-direction: column; gap: 10px; width: fit-content; margin-left: auto; }
.gallery-meta__tag { margin: 0; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); }
.gallery-meta__text { margin: 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; color: var(--color-text-muted-dark); }

.gallery-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(28px, 4vh, 48px); }

.masonry { columns: clamp(230px, 24vw, 340px); column-gap: 4px; padding: 0 var(--content-pad); max-width: var(--content-max-bleed); margin: 0 auto; }
.masonry a { display: block; break-inside: avoid; margin: 0 0 4px; background: #E4E5E9; overflow: hidden; cursor: pointer; transition: opacity .3s ease; }
.masonry a:hover { opacity: .86; }
.masonry img { display: block; width: 100%; height: auto; }

/* ---- Lightbox (same pattern as the homepage gallery) --------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--content-pad);
  background: rgba(7, 11, 22, .94);
  backdrop-filter: blur(6px);
}

.lightbox[hidden] { display: none; }
.lightbox__img { max-width: 100%; max-height: 82vh; object-fit: contain; box-shadow: 0 40px 90px rgba(0, 0, 0, .5); }
.lightbox__meta { position: absolute; left: var(--content-pad); bottom: clamp(20px, 4vh, 40px); margin: 0; max-width: 60ch; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--color-text-on-dark); }
.lightbox__btn { position: absolute; width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgba(232, 233, 238, .28); background: transparent; color: var(--color-text-light); font-size: 18px; line-height: 1; transition: border-color .3s ease, color .3s ease; }
.lightbox__btn:hover { border-color: var(--color-accent-hover-light); color: var(--color-white); }
.lightbox__close { top: clamp(20px, 4vh, 40px); right: var(--content-pad); }
.lightbox__prev { left: clamp(12px, 2vw, 28px); top: 50%; translate: 0 -50%; width: 52px; height: 52px; }
.lightbox__next { right: clamp(12px, 2vw, 28px); top: 50%; translate: 0 -50%; width: 52px; height: 52px; }

/* The lightbox is swipeable, so the browser must not claim horizontal gestures
   for its own scrolling — pan-y leaves vertical scrolling alone and gives us
   the horizontal axis. */
.lightbox { touch-action: pan-y; }

.lightbox__img {
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
}

.lightbox__img:active { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
  .lightbox__img { transition: none !important; }
}


/* ---- Settings form ------------------------------------------------------------- */

.settings-status--error { margin: 0; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.65; color: #A33C3C; }
.settings-status--ok { margin: 0; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.65; color: var(--primary); }
.settings-hint { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--color-text-muted-light-2); }


/* ===== kontakt.css ===== */
/* ==========================================================================
   SITW e.V. — Kontakt.
   ========================================================================== */

.contact-cols { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 90px); align-items: flex-start; }

.contact-address { flex: 0 1 300px; min-width: min(100%, 260px); font-style: normal; display: flex; flex-direction: column; gap: clamp(20px, 3vh, 32px); }
@media (max-width: 894px) {
  .page-template-template-kontakt .content-section {
    padding: clamp(64px, 6vh, 140px) var(--content-pad);
  }
  .contact-address {
    flex: 100%;
    flex-wrap: wrap;
    flex-direction: initial;
    justify-content: space-between;
  }
}
.contact-address__group { display: flex; flex-direction: column; gap: 8px; }
.contact-address__label { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); }
.contact-address__line { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.5; color: var(--text); }
.contact-address__group a { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.5; color: var(--text); transition: color .3s ease; }
.contact-address__links { display: flex; flex-direction: column; gap: 10px; }
.contact-address__links a { display: inline-flex; align-items: center; color: var(--color-text-muted-dark) !important; }
.contact-address__links a:hover { color: var(--primary) !important; }
.contact-address__links a::after {
  content: '';
  flex: none;
  width: 1em;
  height: 1em;
  margin-left: 10px;
  background-color: currentColor;
  -webkit-mask-image: url('assets/images/arrow-right.svg');
  mask-image: url('assets/images/arrow-right.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.contact-form { flex: 1 1 460px; min-width: min(100%, 300px); display: flex; flex-direction: column; gap: clamp(20px, 3vh, 32px); }

/* CF7 wraps its form in its own .wpcf7 / form.wpcf7-form elements —
   flatten them so the actual field rows stay direct flex children of
   .contact-form and keep the intended vertical rhythm. */
.contact-form > .wpcf7,
.contact-form > .wpcf7 > form.wpcf7-form {
  display: contents;
}

.contact-form .form-row + .form-row {
  margin: 0;
}

.contact-form textarea {
  height: 150px;
}

.chip { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 15px 26px; border-radius: 999px; cursor: pointer; white-space: nowrap; background: transparent; color: var(--color-text-muted-dark); border: 1px solid rgba(20, 22, 28, .2); transition: background-color .28s ease, color .28s ease, border-color .28s ease; }
.chip[aria-pressed="true"] {
  background: var(--secondary);
  color: #fff;
  border-color: var(--secondary);
}
.chip:not([aria-pressed="true"]):hover { border-color: var(--primary); color: var(--primary); }

.contact-success { flex: 1 1 460px; min-width: min(100%, 300px); padding-top: clamp(18px, 2.6vh, 26px); border-top: 1px solid rgba(60, 90, 163, .4); }
.contact-success__tag { margin: 0 0 clamp(12px, 1.8vh, 18px); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); }
.contact-success__title { margin: 0 0 clamp(14px, 2vh, 20px); font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.contact-success__text { margin: 0 0 clamp(18px, 2.6vh, 26px); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.7; color: var(--color-text-muted-dark); }

.kontakt-map-frame { position: relative; height: clamp(280px, 44vh, 480px); overflow: hidden; background: #F7F7F8; }
.kontakt-map-frame #kontakt-map, .kontakt-map-frame #mitglied-map { position: absolute; inset: 0; }

.map-consent {
  position: absolute;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: clamp(24px, 4vw, 48px);
  background: #F7F7F8;
}

.map-consent[hidden] { display: none; }
.map-consent__label { margin: 0; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); }
.map-consent__text { margin: 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; color: var(--color-text-muted-dark); }

.leaflet-container { background: #F7F7F8; font-family: var(--font-sans); }
.leaflet-tile-pane { filter: grayscale(1) contrast(.96) brightness(1.02); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #fff; color: var(--text); border-radius: 8px; box-shadow: 0 14px 44px rgba(20, 22, 28, .18); }
.leaflet-popup-content { margin: 14px 16px; font-size: 14px; line-height: 1.5; }
.leaflet-control-zoom a { background: #fff; color: var(--text); border-color: var(--border-dark); }
.leaflet-control-attribution { background: rgba(255, 255, 255, .86); color: #4A4D57; }
.leaflet-control-attribution a { color: var(--primary); }


/* ===== responsive.css ===== */
/* ==========================================================================
   SITW e.V. — shared mobile-responsive rules, ported 1:1 from the original
   Nav component's helmet (it was dc-imported on every page, so these rules
   applied site-wide). Loaded on every page after the page-specific sheet so
   it can override component defaults at narrow widths.
   ========================================================================== */

@media (max-width: 1119px) {
  .nav-overlay__links a { padding: 0px 0; }
  .nav-overlay__group { row-gap: 8px; padding-top: clamp(8px, 1.4vh, 12px); }
  .nav-overlay__title { padding: 4px 0 8px; }
}

@media (max-width: 640px) {
  /* Right-aligned button rows/actions (margin-left:auto) stack full-width
     and move their gap above instead — never remove the auto-margin itself
     on desktop, this only overrides it below 640px. */
  .cta-row__actions,
  .area-row__action,
  .event-featured__cta,
  .member-row__actions,
  .search-form__count {
    margin-left: 0 !important;
    justify-content: flex-start;
  }

  .cta-row__actions,
  .area-row__action,
  .event-featured__cta,
  .member-row__actions {
    margin-top: 18px;
  }

  .row-list__action { margin-top: 18px; }

  .ort-input { width: 100%; }

  .form-field { flex: 100% !important; }

  .site-footer__grid { row-gap: 46px; }
}

/* ==========================================================================
   Mitgliederbereich
   Login, the tab bar, the document list, the gallery grid and the account
   form. Reuses .chip, .btn and .intro-head from the rest of the theme so the
   area does not look like a bolted-on portal.
   ========================================================================== */

/* The production build leaves the login image static; every other image band
   on the site drifts. One declaration, so the members area does not read as a
   different site. */
.login-hero__media img {
  animation: sitwHeroZoom 20s ease-in-out infinite alternate;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .login-hero__media img { animation: none; }
}

.mb-login,
.mb-konto {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mb-login__label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--color-text-muted-dark);
}

.mb-login__input {
  padding: 12px 14px;
  border: 1px solid var(--border-dark-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
}

.mb-login__input:focus {
  outline: none;
  border-color: var(--primary);
}

.mb-login__input[disabled] {
  background: var(--surface);
  color: var(--color-text-muted-dark);
}

.mb-login__hint {
  font-size: 12px;
  color: var(--color-text-muted-dark);
}

.mb-login__fehler,
.mb-login__ok {
  margin: 0;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
}

.mb-login__fehler {
  border: 1px solid rgba(179, 45, 46, .35);
  background: rgba(179, 45, 46, .06);
  color: #b32d2e;
}

.mb-login__ok {
  border: 1px solid rgba(17, 99, 41, .35);
  background: rgba(17, 99, 41, .06);
  color: #116329;
}

.mb-login__hinweis {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-muted-dark);
}

.mb-login__hinweis a { color: var(--primary); }

.mb-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* The tabs are links, not buttons, so the active one is marked with
   aria-current rather than aria-pressed. */
.mb-tabs .chip[aria-current] {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ---- documents ---------------------------------------------------------- */

/* ---- members area: what the production build does not cover ---------------
   .login-hero, .login-card, .doc-list, .gallery-section, .masonry and
   .lightbox are all already in this sheet, ported from the production build.
   Only the gaps are added here — everything else reuses those rules. */

/* The build spaces this section with an inline style on the container. */
.mb-stapel {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 6vh, 72px);
}

.intro-head--flush { margin-bottom: 0; }

/* The build's gallery chips are script-driven buttons using aria-pressed.
   Here they are links carrying ?galerie=<slug>, so the active one is marked
   with aria-current — the correct attribute for a link. */
.mb-tab[aria-current] {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Deliberate deviation from the build: it styles .mb-tab for the dark hero
   band (light text, light border) and then reuses the chip in the gallery
   section, which sits on --surface — so every inactive chip would be
   near-white on light grey. Only idle and hover are restated; the active chip
   is already solid blue. */
.gallery-chips .mb-tab {
  color: var(--text);
  border-color: var(--border-dark-strong);
}

.gallery-chips .mb-tab:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.gallery-chips .mb-tab[aria-current] {
  color: #fff;
  border-color: var(--primary);
}

@media (max-width: 600px) {
  /* The action pill needs the full width once the row stacks. */
  .doc-list a {
    flex-direction: initial;
    align-items: flex-start;
    gap: 25px;
  }

  .doc-list__action { margin-left: 0; }
}


/* ---- account form ------------------------------------------------------- */

.mb-konto { margin-top: clamp(24px, 4vh, 40px); }

.mb-konto__paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.mb-konto__aktion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

@media (max-width: 600px) {
  .mb-konto__paar { grid-template-columns: 1fr; }

  /* The action pill needs the full width once the row stacks. */
  .doc-list a {
    flex-direction: initial;
    align-items: flex-start;
    gap: 25px;
  }

  .doc-list__action { margin-left: 0; }
}

/* ---- Mitgliederbereich: account form ------------------------------------
   Ported from the prototype's own values rather than approximated: underline
   inputs on a transparent ground, 11px/.18em uppercase labels, and the intro
   beside the form rather than above it. */

.mb-konto__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(28px, 5vw, 90px);
}

.mb-konto__intro {
  flex: 1 1 300px;
  min-width: min(100%, 260px);
}

.mb-konto__intro .section__title { margin-bottom: clamp(16px, 2.4vh, 26px); }

.mb-konto {
  flex: 1 1 420px;
  min-width: min(100%, 300px);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.6vh, 28px);
  margin-top: 0;
}

.mb-feld {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-text-muted-dark);
}

.mb-feld__input {
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid rgba(20, 22, 28, .24);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
}

.mb-feld__input::placeholder { color: #9AA0B4; }

.mb-feld__input:focus {
  outline: none;
  border-bottom-color: var(--primary);
  box-shadow: 0 1px 0 0 var(--primary);
}

.mb-feld__hint {
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: #9AA0B4;
}

.mb-feld-paar {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 2.6vw, 36px);
}

.mb-feld-paar .mb-feld {
  flex: 1 1 200px;
  min-width: min(100%, 180px);
}

.mb-feld__fehler,
.mb-feld__ok {
  margin: 0;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.65;
}

.mb-feld__fehler { color: #A33C3C; }
.mb-feld__ok     { color: #116329; }

.mb-konto__frage {
  font-size: 14px;
  color: var(--color-text-muted-dark);
}

.mb-konto__frage a { color: var(--primary); }

@media (min-width: 768px) and (max-width: 999px) {
  .pillar + .pillar + .pillar {
    padding-left: 0;
    border-left: 0;
  }
  .pillars {
    border-top: 0;
  }
}

@media (max-width: 666px) {
  .pillar + .pillar {
    padding-top: 0;
  }
}

/*
 * Placed last so it wins equal-specificity cascade ties against the base
 * .pillar + .pillar / .image-strip__frame / .network-split rules and the
 * 1199px/991px #ueber overrides declared earlier in the file — CSS
 * resolves same-specificity conflicts by source order, not by which
 * media query range is narrowest.
 */
@media (max-width: 767px) {
  .hero__lead { max-width: 100%; }
  .pillar + .pillar { border-left: 0px solid var(--border-dark); padding-left: 0; }
  #ueber .section__inner { gap: 2vh; }
  #ueber nav.cta-row__nav { max-width: 100%; }
  #ueber .cta-row__actions { max-width: 100%; }
  .image-strip__frame { min-height: 40vh; }
  .network-split { grid-template-columns: 1fr; }
  .gallery__item.swiper-slide { height: auto; }
  .contact-card { width: 100%; }
  .contact-band__grid { row-gap: 50px; }
  .gallery-meta { width: 100%; }
}

/* ---- Classes extracted from inline styles (see CLAUDE.md / site-wide inline-style cleanup) ------ */
.publication-kat-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; gap: 8px clamp(20px,3vw,40px); padding: clamp(20px,3vh,30px) 0; border-top: 1px solid var(--border-dark); color: var(--text); transition: color .3s ease; }
.kontakt-cta__intro { margin-bottom: 0; }
.kontakt-cta__lead { margin-top: clamp(20px, 3vh, 32px); display: flex; flex-direction: column; gap: clamp(16px, 2.4vh, 26px); }
.kontakt-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.split-band__title { font-size: clamp(1.7rem, 3.4vw, 3rem); line-height: 1.04; }
.split-band__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(8px, 1.4vh, 14px); }

.member-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(8px, 1.4vh, 14px); }

.pub-teaser__intro { margin-bottom: 0; }
.pub-teaser__lead { margin-top: clamp(20px, 3vh, 32px); }
.pub-teaser__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(24px, 3.6vh, 38px); }

.impressum-verantw__intro { margin-top: clamp(56px, 9vh, 110px); margin-bottom: 0; }
.legal-responsible__firma { margin-top: 8px; }

.contact-address__line--muted { color: var(--color-text-muted-dark); }
.kontakt-anfahrt__group { display: flex; flex-direction: column; gap: clamp(20px, 3vh, 32px); }
.btn--self-start { align-self: flex-start; }

.karte-section__container { display: flex; flex-direction: column; gap: clamp(36px, 6vh, 72px); }
/*
 * Die Brotkrumen stehen hier im selben Behaelter wie auf jeder anderen
 * Seite — aber dieser Behaelter ist ein Flex-Element mit `gap`. In einer
 * Flex-Spalte addieren sich der eigene Unterrand des Kindes und die Luecke
 * des Behaelters; sie fallen nicht zusammen. Unter den Brotkrumen stand
 * deshalb clamp(84px, 13vh, 170px) PLUS clamp(36px, 6vh, 72px) — rund 50px
 * mehr als auf allen anderen Seiten.
 *
 * Die Luecke wird hier vom Unterrand abgezogen. Summe und Abstand sind
 * damit genau die der uebrigen Seiten, bei jeder Fenstergroesse.
 */
#karte nav.breadcrumb { margin-bottom: calc(clamp(84px, 13vh, 170px) - clamp(36px, 6vh, 72px)); }
.karte-section__intro { margin-bottom: 0; }
@media (min-width: 641px) and (max-width: 1199px) {
  .karte-section__intro {
    margin-bottom: 0;
    margin-top: -100px;
  }
  .breadcrumb + .intro-head {
    margin-top: -100px;
  }
}
@media (min-width: 641px) and (max-width: 1199px) and (max-height: 1149px) {
  .breadcrumb + .intro-head {
    margin-top: -30px;
  }
}
@media (max-height: 1149px) {
  .breadcrumb + .intro-head {
    margin-top: -30px;
  }
}
.karte-section__lead-group { display: flex; flex-direction: column; gap: clamp(16px, 2.4vh, 26px); }

.netzwerk-intro__container { display: flex; flex-direction: column; gap: clamp(36px, 6vh, 72px); }
.netzwerk-intro__head { margin-bottom: 0; }
.netzwerk-intro__lead { display: flex; flex-direction: column; gap: clamp(16px, 2.4vh, 26px); }
.netzwerk-bereiche__container { display: flex; flex-direction: column; gap: clamp(36px, 6vh, 72px); }
.netzwerk-bereiche__head { margin-bottom: 0; }

.org-card__meta--multi { gap: 8px; }

.link--primary { color: var(--primary); }
.pub-hub__intro { margin-bottom: 0; }
.pub-hub__lead { margin-top: clamp(20px, 3vh, 32px); }

.mwv-lead { display: flex; flex-direction: column; gap: clamp(16px, 2.4vh, 26px); }
.mwb-container { display: flex; flex-direction: column; gap: clamp(36px, 6vh, 72px); }
.kat-card__body { display: flex; flex-direction: column; gap: 8px; padding: clamp(16px, 2.4vh, 24px) 0 0; border-top: 1px solid var(--border-dark); }
.kat-card__name { font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em; }
.kat-card__desc { font-size: clamp(14px, 1.05vw, 16px); line-height: 1.65; color: var(--color-text-muted-dark); }
.kat-card__count { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); }
.antrag__right { display: flex; flex-direction: column; gap: clamp(20px, 3vh, 32px); }
.ablauf__container { display: flex; flex-direction: column; gap: clamp(36px, 6vh, 72px); }
.mw-gs-address { font-style: normal; padding-top: clamp(20px, 3vh, 30px); border-top: 1px solid var(--border-dark); }
.mw-gs-address__name-line { margin: 0 0 20px; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; }
.mw-gs-address__muted { color: var(--color-text-muted-dark); }
.mw-gs-address__contact { display: flex; flex-direction: column; gap: 10px; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; }

.erfahrung-lead { margin-left: auto; }
.mitgliedschaft-home__eyebrow { margin-bottom: clamp(18px, 3vh, 28px); }
.section__lead--spaced { margin-top: clamp(20px, 3vh, 32px); }
.cta-row__actions--start { justify-content: flex-start; margin-left: 0; }
.netzwerk-split__eyebrow { margin-bottom: clamp(20px, 3vh, 32px); }
.veranstaltungen-home__lead-group { display: flex; flex-direction: column; gap: clamp(18px, 2.6vh, 28px); }
.veranstaltungen-home__kats { display: flex; flex-wrap: wrap; gap: 10px; }
.veranstaltungen-home__label { margin-bottom: clamp(14px, 2vh, 20px); font-size: 11px; letter-spacing: .18em; }
.event-featured__day { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
.veranstaltungen-home__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(24px, 3.4vh, 38px); }
.home-pub__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(24px, 3.6vh, 38px); }
.home-pub__list { display: flex; flex-direction: column; }
.publication-kat-row__name { font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.25; letter-spacing: -.02em; }
.publication-kat-row__cta { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); white-space: nowrap; margin-left: 0; }
.publication-kat-row__desc { grid-column: 1/-1; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.65; color: var(--color-text-muted-dark); }
.contact-band__eyebrow { margin-bottom: clamp(18px, 3vh, 28px); }
.contact-band__lead { color: var(--color-text-on-dark); margin-top: clamp(20px, 3vh, 32px); }
.contact-band__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(24px, 3.6vh, 38px); }

.member-hero__lede-name { margin: clamp(16px, 2.4vh, 26px) 0 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; color: var(--color-text-muted-light); }
.member-hero__lede-zusatz { margin: clamp(10px, 1.6vh, 16px) 0 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; color: #97AAD8; }
.member-hero__lede-schwerpunkt { margin: clamp(10px, 1.6vh, 16px) 0 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; color: #fff; }
.member-hero__zert-badge { display: inline-block; margin: clamp(24px, 3.6vh, 38px) 0 0; cursor: default; }
/* Not a link — a plain <p>, so the .btn--outline-light hover state (fills
   white, as if it were clickable) is misleading here and stays off. */
.member-hero__zert-badge:hover { background: transparent; border-color: var(--border-light-strong); color: var(--color-text-light); }
.member-sidebar__logo-wrap { margin: 0 0 clamp(28px, 4vh, 48px); max-width: min(320px, 100%); }
.member-detail__zert-list { display: flex; flex-direction: column; gap: clamp(20px, 3vh, 32px); }
.member-detail__zert-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.entry-group__title--spaced { margin-bottom: 12px; }
.member-standort { display: flex; flex-direction: column; gap: clamp(14px, 2vh, 22px); }
.member-standort__name { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); }
.member-standort__address { margin: 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; color: var(--color-text-muted-dark); }
.member-legal-note { margin: clamp(36px, 5.5vh, 72px) 0 0; padding-top: clamp(24px, 3.4vh, 38px); border-top: 1px solid var(--border-dark); font-size: clamp(14px, 1.05vw, 16px); line-height: 1.65; color: var(--color-text-muted-dark); }
.member-page__cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(8px, 1.4vh, 14px); }

.programm__container { display: flex; flex-direction: column; gap: clamp(40px, 7vh, 80px); }
.programm__leitung { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.programm__leitung-titel { margin: 0; }
.programm__leitung-name { font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em; }
.programm__leitung-datum { margin-top: 8px; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; color: var(--color-text-muted-dark); }
.event-band1__copy { background: var(--surface); }
.event-band1__eyebrow { margin: 0; }
.event-band1__text { color: var(--color-text-muted-dark); }
.event-band1__hinweis { padding-top: clamp(18px, 2.6vh, 28px); border-top: 1px solid var(--border-dark); }
.eyebrow--compact { font-size: 11px; letter-spacing: .18em; }
.audience-list--spaced { margin-bottom: clamp(20px, 3vh, 28px); }
.anerkennung__hinweis { margin: 0; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.65; color: var(--color-text-muted-dark); }
.anmeldung__row { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 90px); align-items: flex-end; }
.anmeldung__col--form { flex: 1 1 340px; min-width: min(100%, 280px); }
.anmeldung__col--info { flex: 1 1 520px; min-width: min(100%, 300px); }
.anmeldung__heading { margin-bottom: clamp(18px, 2.6vh, 26px); }
.anmeldung__fields { display: flex; flex-direction: column; gap: clamp(14px, 2vh, 20px); }
.anmeldung__gebuehr { margin-top: clamp(26px, 4vh, 40px); }
.anmeldung__gebuehr-hinweis { margin: clamp(16px, 2.4vh, 22px) 0 0; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.65; color: var(--color-text-muted-dark); }
.empty-note--form { flex: 1 1 520px; }
.venue-block__anreise-list { display: flex; flex-direction: column; gap: 6px; }
.venue-map-section { display: flex; flex-direction: column; gap: clamp(20px, 3vh, 32px); }
#veranstaltung-map { position: absolute; inset: 0; }

@media (max-width: 640px) {
  .network-split__copy { padding-top: 80px; padding-bottom: 80px; }
  .network-split__frame { min-height: 50vh; }
  #veranstaltungen .event-featured { justify-content: space-between; }
  #veranstaltungen .recap-list__date { order: 2; align-items: flex-start; }
  #veranstaltungen .recap-list__body { order: 1; flex: 1 1 100%; }
  #veranstaltungen .event-featured__cta { order: 3; margin-top: 0; }
  #veranstaltungen .recap-list__cta { order: 3; }
  .hero-band { padding-top: 120px; padding-bottom: 60px; }
  .member-row__actions { margin-top: 15px !important; }
  .content-section { padding: 7vh var(--content-pad); }
  .hero-band__kicker { margin-bottom: 10px; }
  .eyebrow { margin-bottom: 15px; }
  .breadcrumb { margin-top: -30px; }
  #antrag .form-legend { margin: 0; }
  /* Dieselbe Rechnung wie oben, hier gegen die 44px dieses Breakpoints.
     Stand als -10px da: das war das Ergebnis, nicht die Rechnung, und es
     stimmte nur bei der Fensterhoehe, bei der jemand nachgemessen hat. */
  #karte nav.breadcrumb { margin-bottom: calc(44px - clamp(36px, 6vh, 72px)); }
  .radius-group { row-gap: 22px; }
  .event-rows__date { order: 2; align-items: flex-start; }
  .event-rows__body { flex: 1 1 100%; order: 1; }
  .event-rows__action { order: 3; }
  .member-row-list__action { margin-left: 0; }
  .member-row-list__link { row-gap: 30px; }
  .member-row-list + p { margin-top: 0 !important; }
  .member-cta { min-height: 45vh; }
  .member-cta__inner .hero-band__kicker { margin-bottom: 0; }
  .entry-list a { row-gap: 30px; }
  .entry-list__action { margin-left: 0; }
  .search-footnote { margin-top: 10px; }
  .entry-group { margin-bottom: 0; }
  .legal-responsible { margin-left: 0; width: 100%; }
  .schedule__body { max-width: 100%; width: 100%; }
  #programm .intro-head div:nth-child(2) { width: 100% !important; justify-content: flex-start !important; text-align: left; align-items: flex-start !important; }
  .single-veranstaltung .content-section .theme-columns__body { margin-bottom: 40px; }
  .venue-block { line-height: 1.6; }
  .single-veranstaltung .content-section + .split-band .eyebrow { margin-bottom: 0; }
  .single-veranstaltung .content-section#downloads .intro-head__lead { width: 100%; }
  /*
   * `flex: 1 1 220px` allein hat nie gewirkt: die Grundregel setzt
   * min-width: min(100%, 260px), und ein min-width schlaegt die kleinere
   * Flex-Basis. Auf 375px bleiben 335px Inhaltsbreite — 260 + 20 Luecke +
   * ~95 fuer den Knopf passen nicht, also rutschte der Knopf in eine
   * eigene Zeile und stand dort wegen margin-left:auto allein rechts.
   */
  .download-list__label { flex: 1 1 auto; min-width: 0; }
  .gallery-section { padding: 100px 0; }
}

/*
 * Placed last (after .mission__copy's own rule further up) so it wins the
 * cascade tie: .mission__copy sets its own gap via the shorthand, and a
 * media-query block declared earlier in the file for that same
 * single-class selector would lose to it regardless of the query
 * matching, since @media narrows *when* a rule applies, not its
 * specificity.
 */
@media (max-width: 799px) {
  #mission .section__inner { row-gap: clamp(28px, 5vw, 90px); }
  .mission__copy { row-gap: 25px; }
}