/* ==========================================================================
   Lions Club Gänserndorf · website template for Pixlbot CMS (templates/Site/lionsgf)
   Source: Claude Design canvas "Lions Club Gänserndorf – Website-Template" (2026-10-03),
   https://claude.ai/artifact/MSPnA7E7Au6TfMSKhm9M2W, design system "Lions Club Gänserndorf", stylesheet lions.css.
   Sections 1–17b = lions.css with these changes: page-level `@container page` rules became media queries
   (body.lg-page carries the surface variables; main.lg-main is the root size container — see Page.html — so the
   element-level container queries resolve against it, header / page head / footer / lightbox stay outside),
   fonts self-hosted (section 0), `.lg-page a` → `.lg-page :where(a)` (link-styled buttons kept the link colour), the
   canvas-only overview sheets (section 18) dropped. CMS glue: section 19 ff.
   ========================================================================== */

/* 0 · Fonts (self-hosted, fonts/ — never from Google: the visitor's IP would go to Google without consent) */
@font-face { font-family: "Roboto"; src: url("fonts/Roboto-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("fonts/Roboto-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("fonts/Roboto-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("fonts/Roboto-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("fonts/Roboto-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

/* 1 · Tokens ---------------------------------------------------------------- */
:root {
  --lg-blue: #00338d;          /* lions-blue  · Pantone 287 */
  --lg-yellow: #ebb700;        /* lions-yellow · Pantone 7406 */
  --lg-purple: #7a2582;        /* lions-purple · Pantone 2612 */
  --lg-sky: #407cca;           /* icons, bars, large text only */
  --lg-navy: #0d2240;          /* gradient start, text on yellow */
  --lg-gray-11: #55565a;       /* footer ground, muted text */
  --lg-gray-5: #b3b2b1;
  --lg-green: #00ab68;         /* success accent, navy text on it */
  --lg-orange: #ff5b35;        /* warning accent, navy text on it */

  --lg-surface: #ffffff;
  --lg-surface-muted: #f4f5f8;
  --lg-ink: #1f2024;
  --lg-ink-muted: #55565a;
  --lg-border: #d9dce3;
  --lg-border-control: #8a8d96;
  --lg-blue-tint: #e8edf6;     /* derived: placeholder + icon tiles (blue 9 %) */
  --lg-yellow-tint: #fdf6dd;   /* derived: notices */
  --lg-error: #b42318;         /* derived: form errors, 6.3:1 on white */
  --lg-success-tint: #e3f6ee;  /* derived: success alert ground */

  --lg-gradient-solid: linear-gradient(90deg, #0d2240 0%, #00338d 50%, #7a2582 100%);
  --lg-gradient-overlay: linear-gradient(100deg, #7a2582 0%, #00338d 55%, rgba(0,51,141,0.05) 100%);
  --lg-gradient-cover: linear-gradient(135deg, #0d2240 0%, #00338d 50%, #7a2582 100%);

  --lg-font: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --lg-font-serif: "Adobe Caslon Pro", "Libre Caslon Text", Georgia, "Times New Roman", serif;

  --lg-radius-sm: 3px;
  --lg-radius-md: 6px;
  --lg-shadow-sm: 0 2px 4px rgba(76,82,85,0.075);
  --lg-shadow-md: 0 8px 16px rgba(76,82,85,0.15);
  --lg-shadow-lg: 0 16px 48px rgba(76,82,85,0.175);

  --lg-rule-w: 56px;           /* yellow underline length */
  --lg-rule-h: 4px;            /* rule-width token */
  --lg-content: 1140px;        /* content width */
  --lg-gutter: 24px;
  --lg-row-gap: 64px;          /* between root elements */
}

/* 2 · Base + type ----------------------------------------------------------- */
.lg-page {
  /* container: see section 19 (main.lg-main) */
  /* surface variables – default = page ground; .lg-s-* override them */
  --c-bg: var(--lg-surface);
  --c-ink: var(--lg-ink);
  --c-head: var(--lg-blue);
  --c-muted: var(--lg-ink-muted);
  --c-link: var(--lg-blue);
  --c-link-hover: var(--lg-navy);
  --c-line: var(--lg-border);
  --c-rule: var(--lg-yellow);
  --c-kicker: var(--lg-ink-muted);
  --c-icon: var(--lg-blue);
  --c-icon-bg: var(--lg-blue-tint);
  --c-focus: var(--lg-blue);
  --c-btn-bg: var(--lg-yellow);
  --c-btn-fg: var(--lg-blue);
  --c-btn2-bg: var(--lg-blue);
  --c-btn2-fg: #ffffff;
  --c-head-band: var(--lg-blue);
  --c-head-band-fg: #ffffff;
  background: var(--lg-surface);
  color: var(--lg-ink);
  font-family: var(--lg-font);
  font-size: 17px;
  line-height: 27px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  min-width: 0;
  overflow-x: clip;
}
.lg-page *, .lg-page *::before, .lg-page *::after { box-sizing: border-box; }
.lg-page img { display: block; max-width: 100%; }
.lg-page :where(p) { margin: 0; } /* zero specificity: flow/rte spacing still applies to paragraphs */
.lg-page :focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.lg-page :where(a) { color: var(--c-link); }   /* lions.css: `.lg-page a` (0,1,1) out-ranked .lg-btn--primary / --secondary and .lg-mnav__link on <a> */
.lg-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.lg-display, .lg-h1, .lg-h2, .lg-h3, .lg-h4, .lg-section-title { margin: 0; font-family: var(--lg-font); color: var(--c-head); text-wrap: balance; hyphens: auto; -webkit-hyphens: auto; }
.lg-display { font-size: 48px; line-height: 52px; font-weight: 700; letter-spacing: -0.01em; }
.lg-h1 { font-size: 36px; line-height: 42px; font-weight: 700; }
.lg-h2 { font-size: 28px; line-height: 34px; font-weight: 700; }
.lg-section-title { font-size: 26px; line-height: 32px; font-weight: 300; color: var(--c-muted); }
.lg-h3 { font-size: 20px; line-height: 26px; font-weight: 500; }
.lg-h4 { font-size: 17px; line-height: 24px; font-weight: 700; color: var(--c-ink); }
/* the yellow underline: Überschrift H2 + Abschnitt, page heads, hero */
.lg-rule::after { content: ""; display: block; width: var(--lg-rule-w); height: var(--lg-rule-h); background: var(--c-rule); margin-top: 16px; }
.lg-rule--center::after { margin-inline: auto; }
.lg-lead { font-size: 20px; line-height: 30px; font-weight: 300; color: var(--c-ink); margin: 0; }
.lg-small { font-size: 14px; line-height: 21px; }
.lg-muted { color: var(--c-muted); }
.lg-eyebrow { margin: 0; font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-kicker); }
.lg-eyebrow time, .lg-eyebrow span + span::before { font-weight: 700; }
.lg-eyebrow span + span::before, .lg-eyebrow span + time::before { content: "·"; margin: 0 8px; }
.lg-caption { font-size: 12px; line-height: 15px; color: var(--c-muted); }
.lg-longform { font-family: var(--lg-font-serif); font-size: 19px; line-height: 30px; }

/* Rich text (Text element and every rich-text field) */
.lg-rte { max-width: 68ch; color: var(--c-ink); }
.lg-rte > * + * { margin-top: 16px; }
.lg-rte strong, .lg-rte b { font-weight: 700; }
.lg-rte a { color: var(--c-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lg-rte a:hover { text-decoration-thickness: 2px; color: var(--c-link-hover); }
.lg-rte ul, .lg-rte ol { margin: 0; padding-left: 24px; }
.lg-rte li + li { margin-top: 6px; }
.lg-rte ul li::marker { color: var(--c-head); content: "■  "; font-size: 0.7em; }
.lg-rte ol li::marker { color: var(--c-head); font-weight: 700; }
.lg-rte .c-brand { color: var(--c-head); }
.lg-rte .c-muted { color: var(--c-muted); }
.lg-rte--wide { max-width: none; }

/* 3 · Layout + rhythm ------------------------------------------------------- */
.lg-wrap { width: 100%; max-width: calc(var(--lg-content) + 2 * var(--lg-gutter)); margin-inline: auto; padding-inline: var(--lg-gutter); }
.lg-main { padding-top: var(--lg-row-gap); padding-bottom: 80px; }
.lg-main--flush { padding-top: 0; }               /* page starts with a hero / band */
.lg-row + .lg-row { margin-top: var(--lg-row-gap); }
.lg-row--headline + .lg-row { margin-top: 20px; }  /* headline sits close to what follows */
.lg-row--band + .lg-row--band { margin-top: 0; }
.lg-row--link + .lg-row--link { margin-top: 8px; } /* stacked link boxes */
.lg-row--download + .lg-row--download { margin-top: 12px; }
.lg-band { width: 100%; }
.lg-flow > * + * { margin-top: var(--flow, 24px); }
.lg-flow--s { --flow: 12px; }
.lg-flow--l { --flow: 40px; }
.lg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }

/* 4 · Media + placeholders -------------------------------------------------- */
.lg-media { position: relative; display: block; width: 100%; overflow: hidden; background: var(--lg-blue-tint); }
.lg-media > img, .lg-media > .lg-ph { width: 100%; height: 100%; object-fit: cover; }
.lg-media--shadow { box-shadow: var(--lg-shadow-md); }
.r-21x9 { aspect-ratio: 21 / 9; } .r-16x9 { aspect-ratio: 16 / 9; } .r-3x2 { aspect-ratio: 3 / 2; }
.r-4x3 { aspect-ratio: 4 / 3; } .r-1x1 { aspect-ratio: 1 / 1; } .r-3x4 { aspect-ratio: 3 / 4; } .r-4x5 { aspect-ratio: 4 / 5; }
/* image placeholder: 30° hatch (angle-diagonal) in blue tints, label pill */
.lg-ph { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-height: 64px;
  background: repeating-linear-gradient(120deg, #e3e8f2 0 14px, #edf0f6 14px 28px); color: var(--lg-ink-muted); }
.lg-ph > span { padding: 4px 12px; background: rgba(255,255,255,0.88); border-radius: 999px; font-size: 13px; line-height: 18px; font-weight: 500; text-align: center; }
.lg-ph--dark { background: repeating-linear-gradient(120deg, #3f4f6e 0 14px, #475876 14px 28px); }
.lg-ph--warm { background: repeating-linear-gradient(120deg, #e9e2cf 0 14px, #f1ebdc 14px 28px); }
.lg-credit { position: absolute; left: 12px; bottom: 10px; z-index: 2; font-size: 12px; line-height: 15px; color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }

/* 5 · Buttons + links ------------------------------------------------------- */
.lg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px;
  border: 2px solid transparent; border-radius: var(--lg-radius-sm); font-family: var(--lg-font); font-size: 16px; line-height: 20px; font-weight: 500;
  text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; white-space: nowrap; }
.lg-btn .lg-ic { width: 20px; height: 20px; }
.lg-btn--primary { background: var(--c-btn-bg); color: var(--c-btn-fg); }
.lg-btn--primary:hover, .lg-btn--primary.is-hover { background: var(--lg-navy); color: #ffffff; }
.lg-btn--secondary { background: var(--c-btn2-bg); color: var(--c-btn2-fg); }
.lg-btn--secondary:hover, .lg-btn--secondary.is-hover { background: var(--lg-navy); color: #ffffff; }
.lg-btn--outline { background: transparent; color: var(--c-head); border-color: currentColor; }
.lg-btn--outline:hover, .lg-btn--outline.is-hover { background: var(--c-head); color: var(--c-bg); border-color: var(--c-head); }
.lg-btn.is-focus { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.lg-btn:disabled, .lg-btn.is-disabled { background: #e4e6eb; color: #6b6e76; border-color: transparent; cursor: not-allowed; }
.lg-btn--block { display: flex; width: 100%; white-space: normal; text-align: center; }
.lg-btn--sm { min-height: 40px; padding: 8px 16px; font-size: 15px; }

/* Text link (Interner Link "Standard", "mehr"-Links in Teaser / News / Hero) */
.lg-link { display: inline-flex; align-items: center; gap: 6px; color: var(--c-link); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.lg-link:hover, .lg-link.is-hover { text-decoration-thickness: 2px; color: var(--c-link-hover); }
.lg-link.is-focus { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.lg-link .lg-ic { width: 18px; height: 18px; flex: none; transition: transform .15s; }
.lg-link:hover .lg-ic--arrow { transform: translateX(3px); }
.lg-link__meta { color: var(--c-muted); font-weight: 400; text-decoration: none; display: inline-block; margin-left: 4px; }

/* 6 · Icons (inline outline SVG on the canvas; Font Awesome Light on the site) */
.lg-ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.lg-ic--fill { fill: currentColor; stroke: none; }
.lg-iconbtn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--c-line); border-radius: var(--lg-radius-sm); background: var(--c-bg); color: var(--c-head); cursor: pointer; }
.lg-iconbtn:hover { border-color: var(--c-head); }
.lg-iconbtn--solid { background: var(--lg-blue); border-color: var(--lg-blue); color: #ffffff; }

/* 7 · Header + navigation --------------------------------------------------- */
.lg-header { position: relative; z-index: 20; background: var(--lg-yellow); color: var(--lg-blue); --c-focus: var(--lg-blue); }
.lg-header__bar { display: flex; align-items: center; gap: 32px; min-height: 104px; }
.lg-logo { display: inline-flex; align-items: center; gap: 14px; color: var(--lg-blue); text-decoration: none; flex: none; }
.lg-logo img { width: 72px; height: auto; }
.lg-logo__word { font-size: 22px; line-height: 25px; font-weight: 700; letter-spacing: -0.005em; }
.lg-logo__word small { display: block; font-size: 22px; font-weight: 700; }
.lg-nav { margin-left: auto; }
.lg-nav__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.lg-nav__item { position: relative; }
.lg-nav__link { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 10px 14px; color: var(--lg-blue); font-size: 19px; line-height: 24px; font-weight: 400; text-decoration: none; border-radius: var(--lg-radius-sm); }
.lg-nav__link .lg-ic { width: 16px; height: 16px; }
.lg-nav__link:hover, .lg-nav__link.is-hover { background: rgba(255,255,255,0.35); }
.lg-nav__link.is-active { font-weight: 500; box-shadow: inset 0 -3px 0 var(--lg-blue); border-radius: 0; }
.lg-nav__link.is-open { background: var(--lg-blue); color: var(--lg-yellow); border-radius: var(--lg-radius-sm) var(--lg-radius-sm) 0 0; }
.lg-dropdown { position: absolute; left: 0; top: 100%; min-width: 260px; margin: 0; padding: 8px 0; list-style: none; background: var(--lg-blue); border-radius: 0 var(--lg-radius-md) var(--lg-radius-md) var(--lg-radius-md); box-shadow: var(--lg-shadow-md); }
.lg-dropdown a { display: block; padding: 10px 20px; color: var(--lg-yellow); font-size: 17px; line-height: 24px; text-decoration: none; }
.lg-dropdown a:hover, .lg-dropdown a.is-hover { background: var(--lg-yellow); color: var(--lg-blue); }
.lg-dropdown a[aria-current] { font-weight: 700; }
.lg-cart { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 14px; border: 2px solid var(--lg-blue); border-radius: var(--lg-radius-sm); color: var(--lg-blue); font-size: 16px; font-weight: 500; text-decoration: none; flex: none; }
.lg-cart:hover { background: var(--lg-blue); color: var(--lg-yellow); }
.lg-cart__count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--lg-blue); color: #ffffff; font-size: 13px; font-weight: 700; }
.lg-cart:hover .lg-cart__count { background: var(--lg-yellow); color: var(--lg-blue); }
.lg-burger { display: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: var(--lg-radius-sm); background: var(--lg-blue); color: #ffffff; place-items: center; cursor: pointer; flex: none; }
.lg-header__tools { display: flex; align-items: center; gap: 12px; }
/* mobile menu panel (Z2) */
.lg-mnav { background: var(--lg-blue); color: #ffffff; --c-focus: var(--lg-yellow); }
.lg-mnav__list { list-style: none; margin: 0; padding: 8px 0 16px; }
.lg-mnav__row { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.18); }
.lg-mnav__link { flex: 1; display: block; padding: 14px 16px; color: #ffffff; font-size: 19px; line-height: 24px; text-decoration: none; }
.lg-mnav__link[aria-current] { color: var(--lg-yellow); font-weight: 700; }
.lg-mnav__toggle { width: 56px; height: 52px; border: 0; border-left: 1px solid rgba(255,255,255,0.18); background: transparent; color: var(--lg-yellow); display: grid; place-items: center; }
.lg-mnav__sub { list-style: none; margin: 0; padding: 4px 0 12px; background: var(--lg-navy); }
.lg-mnav__sub a { display: block; padding: 10px 16px 10px 32px; color: var(--lg-yellow); font-size: 17px; text-decoration: none; }
.lg-mnav__sub a[aria-current] { font-weight: 700; color: #ffffff; }

@media (max-width: 1100px) {
  .lg-header__bar { gap: 20px; }
  .lg-nav__link { padding-inline: 10px; font-size: 18px; }
  .lg-logo__word, .lg-logo__word small { font-size: 20px; line-height: 23px; }
}
@media (max-width: 960px) {
  .lg-nav { display: none; }
  .lg-burger { display: inline-grid; }
  .lg-header__tools { margin-left: auto; }
  .lg-header__bar { min-height: 76px; gap: 12px; }
  .lg-logo img { width: 52px; }
  .lg-logo { gap: 10px; }
  .lg-logo__word, .lg-logo__word small { font-size: 17px; line-height: 20px; }
  .lg-cart__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* stays in the accessible name */
  .lg-cart { padding: 8px 10px; }
}

/* 8 · Breadcrumb + page head ----------------------------------------------- */
.lg-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 21px; }
.lg-crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.lg-crumbs li + li::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.7; margin-right: 4px; }
.lg-crumbs a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.lg-crumbs [aria-current] { font-weight: 500; }

/* A · Banner: photo with the official overlay gradient, text on-dark */
.lg-pagehead { position: relative; color: #ffffff; --c-head: #ffffff; --c-ink: #ffffff; --c-muted: #dfe5f1; --c-kicker: var(--lg-yellow); --c-link: #ffffff; --c-focus: var(--lg-yellow); --c-rule: var(--lg-yellow); }
.lg-pagehead--banner { min-height: 360px; display: flex; align-items: flex-end; }
.lg-pagehead__media { position: absolute; inset: 0; }
.lg-pagehead__media .lg-media { height: 100%; }
.lg-pagehead__media::after { content: ""; position: absolute; inset: 0; background: var(--lg-gradient-overlay); }
.lg-pagehead__inner { position: relative; z-index: 1; width: 100%; padding-block: 48px 56px; }
.lg-pagehead__text { max-width: 640px; display: flex; flex-direction: column; gap: 14px; }
.lg-pagehead__text .lg-crumbs { margin-bottom: 8px; color: #ffffff; }
.lg-pagehead .lg-lead { color: #ffffff; }
.lg-pagehead .lg-h1 { color: #ffffff; }
/* B · Slider: photo, floating yellow panel (the club's current banner look) */
.lg-slider { position: relative; }
.lg-slider__stage { position: relative; height: 480px; }
.lg-slider__stage > .lg-media { height: 100%; }
.lg-slider__panel { position: absolute; z-index: 1; left: max(var(--lg-gutter), calc((100% - var(--lg-content)) / 2)); top: 50%; transform: translateY(-50%); width: min(520px, calc(100% - 2 * var(--lg-gutter))); padding: 32px 36px; background: var(--lg-yellow); color: var(--lg-navy);
  --c-head: var(--lg-blue); --c-ink: var(--lg-navy); --c-kicker: var(--lg-navy); --c-link: var(--lg-blue); --c-rule: var(--lg-blue); --c-btn-bg: var(--lg-blue); --c-btn-fg: #ffffff; display: flex; flex-direction: column; gap: 14px; }
.lg-slider__controls { position: absolute; z-index: 1; right: max(var(--lg-gutter), calc((100% - var(--lg-content)) / 2)); bottom: 24px; display: flex; align-items: center; gap: 8px; padding: 6px; background: rgba(13,34,64,0.72); border-radius: var(--lg-radius-md); }
.lg-slider__controls .lg-iconbtn { width: 40px; height: 40px; border-color: transparent; background: transparent; color: #ffffff; --c-focus: var(--lg-yellow); }
.lg-dots { display: flex; gap: 2px; }
.lg-dot { width: 28px; height: 40px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; }
.lg-dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 2px solid #ffffff; }
.lg-dot[aria-current="true"]::after { background: var(--lg-yellow); border-color: var(--lg-yellow); }
/* C · Text only: solid blue band */
.lg-pagehead--text { background: var(--lg-blue); }
.lg-pagehead--text .lg-pagehead__inner { padding-block: 40px 48px; }
.lg-pagehead--gradient { background: var(--lg-gradient-solid); }

@media (max-width: 960px) {
  .lg-pagehead--banner { min-height: 0; display: block; }
  .lg-pagehead--banner .lg-pagehead__media { position: relative; inset: auto; }
  .lg-pagehead--banner .lg-pagehead__media .lg-media { aspect-ratio: 4 / 3; height: auto; }
  .lg-pagehead--banner .lg-pagehead__media::after { background: linear-gradient(180deg, rgba(0,51,141,0) 40%, rgba(0,51,141,0.65) 100%); }
  .lg-pagehead--banner .lg-pagehead__inner { background: var(--lg-gradient-cover); padding-block: 28px 36px; }
  .lg-slider__stage { height: auto; }
  .lg-slider__stage > .lg-media { height: 300px; }
  .lg-slider__panel { position: relative; left: auto; top: auto; transform: none; width: 100%; padding: 24px var(--lg-gutter) 28px; }
  .lg-slider__controls { bottom: auto; top: 236px; right: var(--lg-gutter); }
  .lg-pagehead--text .lg-pagehead__inner { padding-block: 28px 36px; }
}

/* 9 · Hero (root only, replaces the page head) ------------------------------ */
.lg-hero { position: relative; --c-focus: var(--lg-blue); }
.lg-display__accent { display: block; color: var(--lg-sky); }
.lg-hero .lg-display__accent { color: inherit; font-weight: 300; }
/* Split */
.lg-hero--split { background: var(--lg-surface); }
.lg-hero--split .lg-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; padding-block: 64px 72px; }
.lg-hero__text { display: flex; flex-direction: column; gap: 20px; }
.lg-hero__text .lg-display::after { content: ""; display: block; width: var(--lg-rule-w); height: var(--lg-rule-h); background: var(--lg-yellow); margin-top: 20px; }
.lg-hero__visual { position: relative; }
.lg-hero__visual > .lg-media { aspect-ratio: 4 / 3; }
.lg-hero__visual::before { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: -22px; width: 44px; background: var(--lg-yellow); transform: skewX(-30deg); transform-origin: bottom left; } /* 30° diagonal (angle-diagonal) */
.lg-hero__badge { position: absolute; z-index: 2; left: -28px; bottom: -28px; max-width: 300px; padding: 20px 24px; background: var(--lg-blue); color: #ffffff; box-shadow: var(--lg-shadow-md);
  --c-kicker: var(--lg-yellow); --c-link: #ffffff; --c-focus: var(--lg-yellow); display: flex; flex-direction: column; gap: 6px; }
.lg-hero__badge-title { font-size: 20px; line-height: 26px; font-weight: 700; }
.lg-hero__badge-text { font-size: 15px; line-height: 22px; color: #dfe5f1; }
.lg-hero--noimg .lg-hero__grid { grid-template-columns: minmax(0, 1fr); }
.lg-hero--noimg .lg-hero__badge { position: static; max-width: 420px; margin-top: 8px; }
/* Image: full-bleed photo + official overlay gradient */
.lg-hero--image { min-height: 560px; display: flex; align-items: center; color: #ffffff;
  --c-head: #ffffff; --c-ink: #ffffff; --c-kicker: var(--lg-yellow); --c-link: #ffffff; --c-link-hover: var(--lg-yellow); --c-focus: var(--lg-yellow); --c-muted: #dfe5f1; }
.lg-hero--image > .lg-hero__media { position: absolute; inset: 0; }
.lg-hero--image > .lg-hero__media .lg-media { height: 100%; }
.lg-hero--image > .lg-hero__media::after { content: ""; position: absolute; inset: 0; background: var(--lg-gradient-overlay); }
.lg-hero--image .lg-hero__inner { position: relative; z-index: 1; width: 100%; padding-block: 80px; }
.lg-hero--image .lg-hero__text { max-width: 600px; }
.lg-hero--image .lg-lead, .lg-hero--image .lg-rte { color: #ffffff; }
/* Plain: gradient band */
.lg-hero--plain { background: var(--lg-gradient-solid); color: #ffffff;
  --c-head: #ffffff; --c-ink: #ffffff; --c-kicker: var(--lg-yellow); --c-link: #ffffff; --c-link-hover: var(--lg-yellow); --c-focus: var(--lg-yellow); --c-muted: #dfe5f1; }
.lg-hero--plain .lg-hero__inner { padding-block: 72px 80px; }
.lg-hero--plain .lg-hero__text { max-width: 760px; }
.lg-hero--plain .lg-lead, .lg-hero--plain .lg-rte { color: #ffffff; }

@media (max-width: 960px) {
  .lg-display { font-size: 36px; line-height: 41px; }
  .lg-hero--split .lg-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 36px 0; }
  .lg-hero--split .lg-hero__visual { margin-inline: calc(-1 * var(--lg-gutter)); }
  .lg-hero__visual::before { display: none; }
  .lg-hero__badge { position: relative; left: auto; bottom: auto; max-width: none; margin: -40px var(--lg-gutter) 0; }
  .lg-hero--image { min-height: 0; display: block; }
  .lg-hero--image > .lg-hero__media { position: relative; inset: auto; }
  .lg-hero--image > .lg-hero__media .lg-media { aspect-ratio: 4 / 3; height: auto; }
  .lg-hero--image > .lg-hero__media::after { background: linear-gradient(180deg, rgba(0,51,141,0) 45%, rgba(0,51,141,0.7) 100%); }
  .lg-hero--image .lg-hero__inner { background: var(--lg-gradient-cover); padding-block: 32px 40px; }
  .lg-hero--plain .lg-hero__inner { padding-block: 44px 52px; }
}
@media (max-width: 640px) {
  .lg-display { font-size: 32px; line-height: 37px; }
  .lg-h1 { font-size: 30px; line-height: 36px; }
  .lg-h2 { font-size: 24px; line-height: 30px; }
  .lg-section-title { font-size: 22px; line-height: 28px; }
  .lg-lead { font-size: 18px; line-height: 28px; }
  .lg-hero--split .lg-hero__visual { margin-inline: -16px; }
}

/* 10 · Text, Bild, Text + Bild --------------------------------------------- */
.lg-textimg { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; }
.lg-textimg--img-left { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.lg-textimg--img-left .lg-textimg__media { order: -1; }
.lg-textimg__text { display: flex; flex-direction: column; gap: 20px; }
.lg-figure { margin: 0; }
.lg-figure figcaption { margin-top: 10px; font-size: 14px; line-height: 21px; color: var(--c-muted); }
.lg-figure--medium { width: 58%; }
.lg-figure--small { width: 25%; min-width: 180px; }
.lg-figure__link { display: block; color: inherit; }
.lg-figure__link:hover .lg-media { box-shadow: var(--lg-shadow-md); }
.lg-zoom { position: absolute; right: 12px; bottom: 12px; z-index: 2; background: rgba(255,255,255,0.92); border-color: transparent; }
@container (max-width: 640px) {
  .lg-textimg, .lg-textimg--img-left { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .lg-textimg__media { order: -1; }
  .lg-figure--medium, .lg-figure--small { width: 100%; min-width: 0; }
}

/* 11 · Surfaces, Quick Fact, Teaser, Card ---------------------------------- */
.lg-s-light { --c-bg: var(--lg-surface-muted); --c-ink: var(--lg-ink); --c-head: var(--lg-blue); --c-muted: var(--lg-ink-muted); --c-link: var(--lg-blue); --c-link-hover: var(--lg-navy);
  --c-line: #d3d7e0; --c-rule: var(--lg-yellow); --c-kicker: var(--lg-ink-muted); --c-icon: var(--lg-blue); --c-icon-bg: #ffffff; --c-focus: var(--lg-blue);
  --c-btn-bg: var(--lg-yellow); --c-btn-fg: var(--lg-blue); --c-btn2-bg: var(--lg-blue); --c-btn2-fg: #ffffff; background: var(--c-bg); color: var(--c-ink); }
.lg-s-dark { --c-bg: var(--lg-blue); --c-ink: #ffffff; --c-head: #ffffff; --c-muted: #d6def0; --c-link: var(--lg-yellow); --c-link-hover: #ffffff;
  --c-line: rgba(255,255,255,0.28); --c-rule: var(--lg-yellow); --c-kicker: var(--lg-yellow); --c-icon: var(--lg-yellow); --c-icon-bg: rgba(255,255,255,0.12); --c-focus: var(--lg-yellow);
  --c-btn-bg: var(--lg-yellow); --c-btn-fg: var(--lg-blue); --c-btn2-bg: #ffffff; --c-btn2-fg: var(--lg-blue); --c-head-band: var(--lg-navy); background: var(--c-bg); color: var(--c-ink); }
.lg-s-accent { --c-bg: var(--lg-yellow); --c-ink: var(--lg-navy); --c-head: var(--lg-blue); --c-muted: var(--lg-navy); --c-link: var(--lg-blue); --c-link-hover: var(--lg-navy);
  --c-line: rgba(13,34,64,0.28); --c-rule: var(--lg-blue); --c-kicker: var(--lg-navy); --c-icon: var(--lg-blue); --c-icon-bg: rgba(255,255,255,0.55); --c-focus: var(--lg-blue);
  --c-btn-bg: var(--lg-blue); --c-btn-fg: #ffffff; --c-btn2-bg: var(--lg-navy); --c-btn2-fg: #ffffff; background: var(--c-bg); color: var(--c-ink); }
.lg-s-plain { --c-bg: #ffffff; background: #ffffff; color: var(--c-ink); }

/* Quick Fact */
.lg-fact { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: var(--lg-radius-md); height: 100%; }
.lg-fact.lg-s-plain { padding: 24px 0 0; border-top: var(--lg-rule-h) solid var(--lg-yellow); border-radius: 0; }
.lg-fact__icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c-icon-bg); color: var(--c-icon); margin-bottom: 6px; }
.lg-fact__icon .lg-ic { width: 28px; height: 28px; }
.lg-fact__cause { width: 72px; height: 72px; border-radius: 50%; margin-bottom: 6px; }
.lg-fact__text { color: var(--c-ink); font-size: 16px; line-height: 25px; }
.lg-fact .lg-media { margin-bottom: 8px; }

/* Teaser */
.lg-teaser { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 28px 28px 24px; border-radius: var(--lg-radius-md); }
.lg-teaser.lg-s-plain { border: 1px solid var(--lg-border); border-top: var(--lg-rule-h) solid var(--lg-yellow); border-radius: 0 0 var(--lg-radius-md) var(--lg-radius-md); box-shadow: var(--lg-shadow-sm); }
.lg-teaser__text { color: var(--c-ink); font-size: 16px; line-height: 25px; }
.lg-teaser > .lg-link, .lg-teaser > .lg-actions { margin-top: auto; padding-top: 8px; }
.lg-teaser--nolink { padding-bottom: 28px; }

/* Card (layout container) */
.lg-card { container-type: inline-size; padding: 36px; border-radius: var(--lg-radius-md); }
.lg-card--plain { border: 1px solid var(--lg-border); box-shadow: var(--lg-shadow-sm); background: #ffffff; }
.lg-card__title { margin-bottom: 16px; }
.lg-card > * + * { margin-top: 20px; }
.lg-card > .lg-card__title + * { margin-top: 0; }
@container (max-width: 480px) { .lg-card { padding: 24px 20px; } .lg-fact, .lg-teaser { padding: 22px 20px; } .lg-fact.lg-s-plain { padding: 20px 0 0; } }

/* 12 · News, Kennzahlen, Terminliste, Tabelle ------------------------------ */
.lg-news { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; }
.lg-news--noimg { grid-template-columns: minmax(0, 1fr); }
.lg-news--noimg .lg-news__body { max-width: 760px; }
.lg-news__body { display: flex; flex-direction: column; gap: 14px; }
.lg-news .lg-news__title { color: var(--c-head); font-size: 24px; line-height: 30px; font-weight: 700; }
.lg-news .lg-actions { gap: 10px 24px; }
.lg-news__strip { display: flex; gap: 8px; list-style: none; margin: 4px 0 0; padding: 0; }
.lg-news__strip li { width: 72px; }
.lg-thumb { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.lg-thumb:hover .lg-media { outline: 3px solid var(--lg-yellow); outline-offset: -3px; }
.lg-news-list > .lg-news + .lg-news { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--lg-border); }
@container (max-width: 640px) { .lg-news { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* Kennzahlen: dark = brand gradient band, light = muted band; full-bleed at root */
.lg-figures { padding-block: 56px 60px; }
.lg-figures.lg-s-dark { background: var(--lg-gradient-solid); }
.lg-figures__head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 36px; max-width: 760px; }
.lg-figures__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; list-style: none; margin: 0; padding: 0; }
.lg-kf { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; border-top: var(--lg-rule-h) solid var(--c-rule); }
.lg-kf__value { font-size: 44px; line-height: 48px; font-weight: 700; color: var(--c-head); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.lg-s-dark .lg-kf__value { color: var(--lg-yellow); }
.lg-kf__label { font-size: 17px; line-height: 24px; font-weight: 500; color: var(--c-ink); }
.lg-kf__source { font-size: 14px; line-height: 20px; color: var(--c-muted); }
@container (max-width: 640px) { .lg-figures { padding-block: 40px 44px; } .lg-kf__value { font-size: 36px; line-height: 40px; } .lg-figures__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; } }
@container (max-width: 360px) { .lg-figures__list { grid-template-columns: minmax(0, 1fr); } }

/* Terminliste */
.lg-events { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.lg-events--nohead { grid-template-columns: minmax(0, 1fr); }
.lg-events__head { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.lg-events__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.lg-event { display: grid; grid-template-columns: minmax(150px, 2fr) minmax(0, 5fr); gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.lg-event__when { font-weight: 700; color: var(--c-head); font-variant-numeric: tabular-nums; }
.lg-event__what { color: var(--c-ink); }
.lg-event__what small { display: block; color: var(--c-muted); font-size: 14px; line-height: 21px; }
@container (max-width: 760px) { .lg-events { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
@container (max-width: 480px) { .lg-event { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 14px 0; } }

/* Tabelle (structure shared with _default/table.js: .el-table__frame gets has-more-left/right) */
.lg-table { display: flex; flex-direction: column; gap: 14px; --tbl-head-bg: var(--lg-blue); --tbl-head-fg: #ffffff; --tbl-stripe: var(--lg-surface-muted); }
.lg-s-light .lg-table { --tbl-stripe: #ffffff; }
.lg-s-dark .lg-table { --tbl-head-bg: var(--lg-navy); --tbl-stripe: rgba(255,255,255,0.08); }
.lg-s-accent .lg-table { --tbl-head-bg: var(--lg-blue); --tbl-stripe: rgba(255,255,255,0.35); }
.lg-table__frame { position: relative; }
.lg-table__frame.has-more-right::after { content: ""; position: absolute; top: 0; right: 0; bottom: 16px; width: 28px; pointer-events: none; background: linear-gradient(90deg, rgba(31,32,36,0), rgba(31,32,36,0.14)); }
.lg-table__scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #8a8d96 #e4e6eb; }
.lg-table__scroll::-webkit-scrollbar { height: 10px; }
.lg-table__scroll::-webkit-scrollbar-track { background: #e4e6eb; border-radius: 5px; }
.lg-table__scroll::-webkit-scrollbar-thumb { background: #8a8d96; border-radius: 5px; }
.lg-table table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 24px; font-variant-numeric: tabular-nums; }
.lg-table thead th { background: var(--tbl-head-bg); color: var(--tbl-head-fg); font-weight: 500; text-align: left; padding: 12px 16px; border-bottom: var(--lg-rule-h) solid var(--lg-yellow); white-space: nowrap; }
.lg-table td, .lg-table tbody th { padding: 12px 16px; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; color: var(--c-ink); }
.lg-table tbody th { font-weight: 700; color: var(--c-head); }
.lg-table .is-num { text-align: right; white-space: nowrap; }
.lg-table .is-center { text-align: center; }
.lg-table tfoot td, .lg-table tfoot th { padding: 12px 16px; font-weight: 700; color: var(--c-head); border-top: 2px solid var(--c-head); }
.lg-table a { color: var(--c-link); }
.lg-table--striped tbody tr:nth-child(even) > * { background: var(--tbl-stripe); }
.lg-table--compact table { font-size: 15px; line-height: 21px; }
.lg-table--compact thead th, .lg-table--compact td, .lg-table--compact tbody th { padding: 7px 12px; }
.lg-table__note { font-size: 14px; line-height: 21px; color: var(--c-muted); }
@container (max-width: 640px) {
  .lg-table--cards table, .lg-table--cards tbody, .lg-table--cards tr, .lg-table--cards td, .lg-table--cards tbody th { display: block; width: 100%; }
  .lg-table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lg-table--cards tr { padding: 14px 16px; border: 1px solid var(--c-line); border-top: var(--lg-rule-h) solid var(--lg-yellow); border-radius: 0 0 var(--lg-radius-md) var(--lg-radius-md); background: var(--c-bg); }
  .lg-table--cards tr + tr { margin-top: 12px; }
  .lg-table--cards td, .lg-table--cards tbody th { display: block; position: relative; padding: 6px 0 6px calc(42% + 12px); border: 0; text-align: left !important; white-space: normal; background: none !important; }
  .lg-table--cards td::before, .lg-table--cards tbody th::before { content: attr(data-label); position: absolute; left: 0; top: 6px; width: 42%; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--c-muted); }
  .lg-table--cards tbody th { font-size: 18px; }
  .lg-table--cards tfoot { display: block; margin-top: 12px; }
  .lg-table--cards tfoot tr { display: grid; grid-template-columns: 42% minmax(0, 1fr); background: var(--lg-blue); color: #fff; border: 0; padding: 12px 16px; border-radius: var(--lg-radius-md); }
  .lg-table--cards tfoot td, .lg-table--cards tfoot th { border: 0; padding: 0; color: #fff; display: block; }
}

/* 13 · Embeds (two-click) + Trennlinie -------------------------------------- */
.lg-embed { margin: 0; }
.lg-embed__frame { position: relative; overflow: hidden; background: var(--lg-navy); min-height: 300px; }
.lg-embed__frame > .lg-media { position: absolute; inset: 0; height: 100%; }
.lg-embed__veil { position: absolute; inset: 0; background: var(--lg-gradient-overlay); opacity: 0.92; }
.lg-embed__consent { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; color: #ffffff; font-size: 15px; line-height: 22px; --c-focus: var(--lg-yellow); }
.lg-embed__consent p { max-width: 460px; }
.lg-embed__consent a { color: #ffffff; text-decoration: underline; }
.lg-embed__title { font-size: 19px; line-height: 24px; font-weight: 700; }
.lg-play { display: grid; place-items: center; width: 72px; height: 72px; border: 0; border-radius: 50%; background: var(--lg-yellow); color: var(--lg-blue); cursor: pointer; box-shadow: var(--lg-shadow-md); margin-bottom: 6px; }
.lg-play:hover { background: #ffffff; }
.lg-play .lg-ic { width: 30px; height: 30px; }
.lg-embed__always { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; }
.lg-embed__always input { width: 20px; height: 20px; accent-color: var(--lg-yellow); }
.lg-embed__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 12px; font-size: 14px; line-height: 21px; color: var(--c-muted); }
.lg-embed__foot .lg-link { font-size: 15px; }
.lg-embed--loaded .lg-embed__frame { background: #dfe3ea; }

.lg-divider { border: 0; height: 1px; background: var(--dv-color, var(--lg-border)); margin: var(--dv-top, 40px) 0 var(--dv-bottom, 40px); }
.lg-divider--brand { --dv-color: var(--lg-blue); height: 2px; }
.lg-divider--accent { --dv-color: var(--lg-yellow); height: var(--lg-rule-h); }
.lg-divider--strong { --dv-color: var(--lg-ink); height: 2px; }
.lg-row--line .lg-divider { margin: 0; }

/* 14 · Spalten, Tabs --------------------------------------------------------- */
.lg-cols { display: grid; gap: var(--lg-col-gap, 32px); align-items: start; }
.lg-cols--stretch { align-items: stretch; }
.lg-col { container-type: inline-size; min-width: 0; }
.lg-col > * + * { margin-top: 24px; }
.lg-col .lg-cols { --lg-col-gap: 24px; }
.lg-cols--50-50 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg-cols--33-66 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.lg-cols--66-33 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.lg-cols--25-75 { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
.lg-cols--75-25 { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
.lg-cols--33-33-33 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lg-cols--25-50-25 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
.lg-cols--25-25-50 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); }
.lg-cols--50-25-25 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
@container (max-width: 639px) {
  .lg-cols { grid-template-columns: minmax(0, 1fr) !important; }
  .lg-cols--25-75 > .lg-col:nth-child(2), .lg-cols--25-50-25 > .lg-col:nth-child(2), .lg-cols--25-25-50 > .lg-col:nth-child(3) { order: -1; }
}
@container (max-width: 360px) { .lg-col .lg-h2 { font-size: 22px; line-height: 28px; } .lg-col .lg-btn { white-space: normal; } }

.lg-tabs__list { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--c-line); scrollbar-width: none; }
.lg-tab { position: relative; flex: none; min-height: 52px; padding: 12px 20px; border: 0; background: transparent; color: var(--c-ink); font-family: var(--lg-font); font-size: 17px; line-height: 24px; font-weight: 400; cursor: pointer; }
.lg-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: var(--lg-rule-h); background: transparent; }
.lg-tab[aria-selected="true"] { color: var(--c-head); font-weight: 700; }
.lg-tab[aria-selected="true"]::after { background: var(--lg-yellow); }
.lg-tab:hover, .lg-tab.is-hover { color: var(--c-head); background: var(--lg-surface-muted); }
.lg-tab.is-focus { outline: 2px solid var(--c-focus); outline-offset: -2px; }
.lg-tabs__panel { container-type: inline-size; padding-top: 32px; }
.lg-tabs__panel > * + * { margin-top: 24px; }

/* 15 · Galerie, Download, Formular, Person, Link-Box ------------------------ */
.lg-gallery__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.lg-gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 200px; gap: 8px; list-style: none; margin: 0; padding: 0; }
.lg-gallery__grid--mosaic > li:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; }
.lg-gallery__grid .lg-thumb, .lg-gallery__grid .lg-media { height: 100%; }
.lg-gallery__grid figcaption, .lg-strip figcaption { margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--c-muted); }
.lg-strip-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.lg-strip { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 12px) / 5); gap: 12px; overflow-x: auto; list-style: none; margin: 0; padding: 0 0 8px; scrollbar-width: thin; }
.lg-media--contain { background: var(--lg-surface-muted); display: grid; place-items: center; }
.lg-media--contain > img { object-fit: contain; }
.lg-stage { position: relative; }
.lg-stage__count { position: absolute; z-index: 2; left: 16px; top: 16px; padding: 4px 10px; background: rgba(13,34,64,0.8); color: #ffffff; font-size: 14px; border-radius: var(--lg-radius-sm); }
.lg-stage__nav { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.94); border-color: transparent; }
.lg-stage__nav--prev { left: 16px; } .lg-stage__nav--next { right: 16px; }
.lg-stage__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 12px; font-size: 14px; line-height: 21px; color: var(--c-muted); }
@container (max-width: 640px) {
  .lg-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 140px; }
  .lg-gallery__grid--mosaic > li:nth-child(6n+1) { grid-column: auto; grid-row: span 1; }
  .lg-gallery__grid--mosaic > li:nth-child(5n+1) { grid-column: span 2; }
  .lg-strip { grid-auto-columns: 42%; }
}

/* Download (AssetDB) */
.lg-downloads { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lg-download { display: grid; grid-template-columns: 52px minmax(0, 1fr) 44px; gap: 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--lg-border); border-radius: var(--lg-radius-md); background: #ffffff; color: var(--lg-ink); text-decoration: none; }
.lg-download:hover, .lg-download.is-hover { border-color: var(--lg-blue); box-shadow: var(--lg-shadow-md); }
.lg-filetype { display: grid; place-items: center; width: 52px; height: 60px; background: var(--lg-blue); color: #ffffff; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; clip-path: polygon(0 0, 72% 0, 100% 22%, 100% 100%, 0 100%); }
.lg-download__label { display: block; color: var(--lg-blue); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lg-download__desc { display: block; font-size: 15px; line-height: 22px; color: var(--lg-ink); }
.lg-download__meta { display: block; font-size: 14px; line-height: 20px; color: var(--lg-ink-muted); }
.lg-download__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--lg-radius-sm); background: var(--lg-yellow); color: var(--lg-blue); }

/* Formular */
.lg-form { display: flex; flex-direction: column; gap: 22px; max-width: 760px; }
.lg-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
.lg-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lg-label { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--lg-ink); }
.lg-label__opt { font-weight: 400; color: var(--lg-ink-muted); }
.lg-input { width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--lg-border-control); border-radius: var(--lg-radius-sm); background: #ffffff; color: var(--lg-ink); font-family: var(--lg-font); font-size: 17px; line-height: 24px; }
textarea.lg-input { min-height: 132px; resize: vertical; }
.lg-input:focus, .lg-input.is-focus { outline: 2px solid var(--lg-blue); outline-offset: 0; border-color: var(--lg-blue); }
.lg-input.is-error { border-color: var(--lg-error); border-width: 2px; padding: 10px 13px; }
.lg-select { position: relative; }
.lg-select select { appearance: none; padding-right: 44px; }
.lg-select .lg-ic { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; pointer-events: none; color: var(--lg-blue); }
.lg-hint { font-size: 14px; line-height: 20px; color: var(--lg-ink-muted); }
.lg-error-msg { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; line-height: 20px; color: var(--lg-error); font-weight: 500; }
.lg-error-msg .lg-ic { width: 18px; height: 18px; margin-top: 1px; }
.lg-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.lg-fieldset > legend { padding: 0; margin-bottom: 10px; }
.lg-options { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.lg-choice { display: inline-flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 0; font-size: 17px; line-height: 24px; cursor: pointer; }
.lg-choice input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--lg-blue); flex: none; }
.lg-choice--consent { font-size: 15px; line-height: 22px; }
.lg-choice--box { width: 100%; padding: 14px 16px; border: 1px solid var(--lg-border-control); border-radius: var(--lg-radius-sm); }
.lg-choice--box.is-checked { border: 2px solid var(--lg-blue); padding: 13px 15px; background: var(--lg-blue-tint); }
.lg-choice__main { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.lg-choice__price { font-weight: 700; color: var(--lg-blue); white-space: nowrap; }
.lg-form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 4px; }
.lg-alert { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--lg-radius-md); font-size: 16px; line-height: 24px; }
.lg-alert .lg-ic { width: 26px; height: 26px; flex: none; }
.lg-alert--error { background: #fdecea; color: var(--lg-ink); border: 1px solid #f3b8b1; }
.lg-alert--error .lg-ic { color: var(--lg-error); }
.lg-alert--success { background: var(--lg-success-tint); color: var(--lg-ink); border: 1px solid #9fdcc2; }
.lg-alert--success .lg-ic { color: #007a4a; }
.lg-alert--info { background: var(--lg-yellow-tint); color: var(--lg-ink); border: 1px solid #f0d777; }
.lg-alert--info .lg-ic { color: var(--lg-blue); }
.lg-alert__title { font-weight: 700; display: block; }
.lg-alert ul { margin: 6px 0 0; padding-left: 18px; }
.lg-alert a { color: var(--lg-blue); }
@container (max-width: 560px) { .lg-form__row { grid-template-columns: minmax(0, 1fr); } }

/* Person */
.lg-person { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 32px; align-items: center; padding: 28px; border-radius: var(--lg-radius-md); }
.lg-person--noimg { grid-template-columns: minmax(0, 1fr); }
.lg-person__body { display: flex; flex-direction: column; gap: 6px; }
.lg-person__role { color: var(--c-muted); font-size: 16px; line-height: 24px; }
.lg-person__photo { border-radius: 50%; overflow: hidden; aspect-ratio: 1 / 1; border: 4px solid var(--lg-yellow); }
.lg-contactlist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 16px; }
.lg-contactlist a { display: inline-flex; align-items: center; gap: 10px; color: var(--c-link); text-decoration: underline; text-underline-offset: 3px; }
.lg-contactlist .lg-ic { width: 20px; height: 20px; }
@container (max-width: 560px) {
  .lg-person { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px; text-align: center; justify-items: center; }
  .lg-person .lg-person__media { width: min(180px, 70%); }
  .lg-person__body { align-items: center; }
}

/* Interner / Externer Link: Standard = text link; Hell / Dunkel / Akzent = box; Breite kompakt / voll */
.lg-linkbox { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 20px; border-radius: var(--lg-radius-sm); font-weight: 500; text-decoration: none; color: var(--c-link); background: var(--c-bg); }
.lg-linkbox.lg-s-light { border: 1px solid #d3d7e0; }
.lg-linkbox.lg-s-dark { color: #ffffff; }
.lg-linkbox.lg-s-accent { color: var(--lg-blue); }
.lg-linkbox:hover, .lg-linkbox.is-hover { text-decoration: underline; text-underline-offset: 4px; }
.lg-linkbox:hover .lg-ic--arrow { transform: translateX(3px); }
.lg-linkbox .lg-ic { width: 20px; height: 20px; transition: transform .15s; }
.lg-linkbox--full { display: flex; width: 100%; }

/* 16 · Produkte + Shop ------------------------------------------------------ */
.lg-products { display: flex; flex-direction: column; gap: 24px; }
.lg-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.lg-pcard { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 0 0 22px; border: 1px solid var(--lg-border); border-radius: var(--lg-radius-md); background: #ffffff; overflow: hidden; box-shadow: var(--lg-shadow-sm); }
.lg-pcard:hover { box-shadow: var(--lg-shadow-md); }
.lg-pcard > .lg-media { margin-bottom: 8px; }
.lg-pcard > :not(.lg-media) { margin-inline: 22px; }
.lg-pcard__badge { position: absolute; top: 14px; left: 0; margin: 0 !important; padding: 5px 12px 5px 22px; background: var(--lg-yellow); color: var(--lg-blue); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.lg-pcard__name { font-size: 20px; line-height: 26px; font-weight: 700; color: var(--lg-blue); margin: 0; }
.lg-pcard__name a { color: inherit; text-decoration: none; }
.lg-pcard__name a::after { content: ""; position: absolute; inset: 0; }
.lg-pcard__name a:hover { text-decoration: underline; }
.lg-pcard__sub { color: var(--lg-ink-muted); font-size: 15px; line-height: 22px; }
.lg-price { font-size: 24px; line-height: 30px; font-weight: 700; color: var(--lg-ink); font-variant-numeric: tabular-nums; }
.lg-price small { font-size: 14px; font-weight: 400; color: var(--lg-ink-muted); }
.lg-pcard__legal, .lg-pcard__base { font-size: 13px; line-height: 18px; color: var(--lg-ink-muted); }
.lg-pcard__note { font-weight: 700; color: var(--lg-error); }
.lg-pcard.is-soldout > .lg-media { opacity: 0.55; }
.lg-buy { position: relative; z-index: 2; margin-top: auto !important; padding-top: 10px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.lg-buy__qty { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; }
.lg-buy__qty input { width: 88px; }
.lg-product { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: start; }
.lg-product__text { display: flex; flex-direction: column; gap: 12px; }
.lg-attrs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 20px; margin: 4px 0; font-size: 16px; }
.lg-attrs dt { color: var(--lg-ink-muted); }
.lg-attrs dd { margin: 0; }
@container (max-width: 640px) { .lg-product { grid-template-columns: minmax(0, 1fr); gap: 24px; } .lg-product-grid { grid-template-columns: minmax(0, 1fr); } }

/* Shop pages: Warenkorb, Kasse, Danke, Widerruf */
.lg-shop { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 48px; align-items: start; }
.lg-shop--single { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.lg-cart-table { width: 100%; border-collapse: collapse; }
.lg-cart-table th { text-align: left; font-size: 14px; font-weight: 500; color: var(--lg-ink-muted); padding: 0 12px 10px; border-bottom: 2px solid var(--lg-blue); }
.lg-cart-table td { padding: 18px 12px; border-bottom: 1px solid var(--lg-border); vertical-align: middle; }
.lg-cart-table .is-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lg-cart-item { display: flex; align-items: center; gap: 16px; }
.lg-cart-item .lg-media { width: 72px; flex: none; }
.lg-cart-item__name { font-weight: 700; color: var(--lg-blue); }
.lg-cart-item__sub { display: block; font-size: 14px; color: var(--lg-ink-muted); }
.lg-qty { width: 84px; text-align: center; }
.lg-remove { width: 40px; height: 40px; border: 1px solid var(--lg-border); border-radius: var(--lg-radius-sm); background: #ffffff; color: var(--lg-ink-muted); display: grid; place-items: center; cursor: pointer; }
.lg-summary { padding: 28px; border-radius: var(--lg-radius-md); background: var(--lg-surface-muted); display: flex; flex-direction: column; gap: 14px; }
.lg-summary__rows { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; margin: 0; font-size: 16px; }
.lg-summary__rows dt { color: var(--lg-ink); }
.lg-summary__rows dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.lg-summary__total { padding-top: 12px; border-top: 2px solid var(--lg-blue); font-size: 20px; font-weight: 700; color: var(--lg-blue); }
.lg-summary__tax { font-size: 14px; color: var(--lg-ink-muted); }
.lg-summary__items { list-style: none; margin: 0; padding: 0 0 12px; border-bottom: 1px solid #d3d7e0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.lg-summary__items li { display: flex; justify-content: space-between; gap: 12px; }
.lg-checkout { display: flex; flex-direction: column; gap: 40px; }
.lg-checkout__section { display: flex; flex-direction: column; gap: 18px; }
.lg-checkout__section > .lg-h3 { padding-bottom: 10px; border-bottom: 1px solid var(--lg-border); }
.lg-step { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 10px; border-radius: 50%; background: var(--lg-yellow); color: var(--lg-blue); font-size: 15px; font-weight: 700; vertical-align: 2px; }
.lg-order-no { display: inline-block; padding: 6px 14px; background: var(--lg-yellow); color: var(--lg-blue); font-weight: 700; font-size: 20px; letter-spacing: 0.02em; }
.lg-address { font-style: normal; line-height: 26px; }
.lg-review { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 24px; margin: 0; padding: 24px; border-radius: var(--lg-radius-md); background: var(--lg-surface-muted); }
.lg-review dt { color: var(--lg-ink-muted); }
.lg-review dd { margin: 0; font-weight: 500; }
@media (max-width: 960px) { .lg-shop { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
@container (max-width: 640px) {
  .lg-cart-table thead { display: none; }
  .lg-cart-table, .lg-cart-table tbody, .lg-cart-table tr { display: block; }
  .lg-cart-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 16px 0; border-bottom: 1px solid var(--lg-border); }
  .lg-cart-table td { padding: 0; border: 0; }
  .lg-cart-table td:first-child { grid-column: 1 / -1; }
  .lg-cart-table .lg-cart-unit { display: none; }
  .lg-review { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .lg-review dd + dt { margin-top: 10px; }
}

/* 17 · Footer ---------------------------------------------------------------- */
.lg-footer { background: var(--lg-gray-11); color: #ffffff; --c-link: #ffffff; --c-focus: var(--lg-yellow); --c-ink: #ffffff; --c-muted: #e4e5e8; font-size: 15px; line-height: 23px; }
.lg-footer a { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
.lg-footer a:hover { color: var(--lg-yellow); }
.lg-footer__top { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-block: 56px 48px; }
.lg-footer__brand { display: flex; flex-direction: column; gap: 16px; }
.lg-footer__sig { display: flex; align-items: center; gap: 14px; }
.lg-footer__sig img { width: 64px; height: auto; }
.lg-footer__name { font-size: 20px; line-height: 23px; font-weight: 700; }
.lg-footer__claim { color: #e4e5e8; }
.lg-footer__title { margin: 0 0 12px; font-size: 19px; line-height: 24px; font-weight: 700; color: var(--lg-yellow); }
.lg-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lg-footer__list .lg-ic { width: 18px; height: 18px; }
.lg-footer__list a { display: inline-flex; align-items: center; gap: 8px; }
.lg-hours { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 0; }
.lg-hours dt { font-weight: 500; }
.lg-hours dd { margin: 0; }
.lg-social { display: flex; gap: 10px; margin-top: 16px; }
.lg-social a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,0.45); border-radius: 50%; text-decoration: none; }
.lg-social a:hover { background: var(--lg-yellow); color: var(--lg-blue); border-color: var(--lg-yellow); }
.lg-social .lg-ic { width: 20px; height: 20px; }
.lg-footer__about { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; align-items: start; padding-block: 0 40px; }
.lg-footer__about-lead { font-weight: 700; font-size: 17px; }
.lg-footer__bottom { border-top: 1px solid rgba(255,255,255,0.25); }
.lg-footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding-block: 20px 24px; font-size: 14px; }
.lg-footer__menu ul { display: flex; flex-wrap: wrap; gap: 4px 20px; list-style: none; margin: 0; padding: 0; }
.lg-footer__motto { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lg-yellow); font-size: 14px; }
@media (max-width: 960px) { .lg-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; } }
@media (max-width: 640px) {
  .lg-footer__top { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 40px 36px; }
  .lg-footer__about { grid-template-columns: 1fr; }
  .lg-footer__bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* page gutters on phones */
@media (max-width: 640px) {
  .lg-wrap { padding-inline: 16px; }
  .lg-main { padding-top: 48px; padding-bottom: 56px; }
  .lg-main--flush { padding-top: 0; }
  .lg-row + .lg-row { margin-top: 48px; }
  .lg-row--headline + .lg-row { margin-top: 16px; }
  .lg-row--band + .lg-row--band { margin-top: 0; }
  .lg-row--link + .lg-row--link { margin-top: 8px; }
  .lg-row--download + .lg-row--download { margin-top: 12px; }
}
/* a band (hero, Kennzahlen) that closes the page sits flush on the footer */
.lg-main > .lg-row--band:last-child { margin-bottom: -80px; }
@media (max-width: 640px) { .lg-main > .lg-row--band:last-child { margin-bottom: -56px; } }

/* Lightbox (Z3) */
.lg-lightbox { position: relative; height: 100%; background: rgba(13,34,64,0.96); color: #ffffff; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; --c-focus: var(--lg-yellow); }
.lg-lightbox__top { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; font-size: 15px; }
.lg-lightbox__stage { position: relative; display: grid; place-items: center; padding: 0 96px; }
.lg-lightbox__stage .lg-media { max-height: 100%; }
.lg-lightbox .lg-iconbtn { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); color: #ffffff; }
.lg-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lg-lightbox__nav--prev { left: 24px; } .lg-lightbox__nav--next { right: 24px; }
.lg-lightbox__caption { padding: 14px 20px 20px; text-align: center; font-size: 15px; color: #dfe5f1; }

/* 17b · Refinements -------------------------------------------------------- */
/* "ohne" surface inside a card takes the card's ground */
.lg-card .lg-s-plain { --c-bg: transparent; background: transparent; }
/* equal-height cards in stretched columns */
.lg-cols--stretch > .lg-col > .lg-card:only-child { height: 100%; }
/* Quick-Fact raster with four tracks (8 cause icons) – 2 per row on phones */
.lg-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container (max-width: 639px) { .lg-cols.lg-cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; --lg-col-gap: 24px; } }
/* stacked radio/checkbox options (checkout) */
.lg-options--stack { flex-direction: column; flex-wrap: nowrap; gap: 10px; }
/* cart on phones: quantity, total and remove on one line */
@container (max-width: 640px) { .lg-cart-table tr { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; } }
.lg-summary__rows dt.lg-summary__total { color: var(--lg-blue); }
/* secondary button on the yellow surface: hover to blue */
.lg-s-accent .lg-btn--secondary:hover, .lg-s-accent .lg-btn--secondary.is-hover { background: var(--lg-blue); color: #ffffff; }
/* demo state class moves the arrow like :hover */
.lg-linkbox.is-hover .lg-ic--arrow, .lg-link.is-hover .lg-ic--arrow { transform: translateX(3px); }
/* portrait image in Text + Bild keeps a sensible size */
.lg-textimg--portrait .lg-textimg__media { width: 100%; max-width: 440px; justify-self: center; }

/* ==========================================================================
   19 · CMS glue — everything below is not in lions.css
   ========================================================================== */
body { margin: 0; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; }
.lg-pre { white-space: pre-line; }
.preview-bar { background: #b45309; color: #fff; text-align: center; font-size: 13px; line-height: 20px; padding: 4px; letter-spacing: .05em; }
.lg-skip { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 12px 16px; background: #fff; color: var(--lg-blue); font-weight: 500; border-radius: var(--lg-radius-sm); box-shadow: var(--lg-shadow-lg); }
.lg-skip:focus { top: 16px; }
.lg-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Root size container: element-level @container rules at root level resolve against main (Page.html) */
.lg-main { container-type: inline-size; }

/* Rhythm inside containers (columns 24px, card 20px, tab panel 24px — lions.css): headline closer to what follows,
   link elements 8px, downloads 12px, news articles with the hairline of the design's news list */
:is(.lg-col, .lg-card, .lg-tabs__panel) > .lg-hl + * { margin-top: 16px; }
:is(.lg-col, .lg-card, .lg-tabs__panel) > .lg-linkline + .lg-linkline { margin-top: 8px; }
:is(.lg-col, .lg-card, .lg-tabs__panel) > .lg-download + .lg-download { margin-top: 12px; }
.lg-row--news + .lg-row--news { margin-top: 48px; }
.lg-row--news + .lg-row--news .lg-news,
:is(.lg-col, .lg-card, .lg-tabs__panel) > .lg-news + .lg-news { padding-top: 48px; border-top: 1px solid var(--c-line); }
:is(.lg-col, .lg-card, .lg-tabs__panel) > .lg-news + .lg-news { margin-top: 48px; }
.lg-linkline { margin: 0; }
.el.lg-divider { margin: 0; }
:is(.lg-col, .lg-card, .lg-tabs__panel) > .lg-divider { margin-block: 16px; }

/* Equal heights in a column row (design: teasers / facts side by side line up) — only when every column holds nothing
   but boxes; a lone box fills its column, stacked boxes keep their height. */
.lg-cols:not(:has(> .lg-col > :not(.lg-fact, .lg-teaser, .lg-card, .lg-person))) { align-items: stretch; }
.lg-col > :is(.lg-fact, .lg-teaser, .lg-card, .lg-person):only-child { height: 100%; }
.lg-col > :is(.lg-fact, .lg-teaser):not(:only-child) { height: auto; }

/* Kennzahlen inside a column / card / tab: a padded box instead of the band */
:is(.lg-col, .lg-card, .lg-tabs__panel) > .lg-figures { padding: 32px; border-radius: var(--lg-radius-md); }
:is(.lg-col, .lg-card, .lg-tabs__panel) > .lg-figures > .lg-wrap { padding-inline: 0; }

/* Header: dropdown on hover / keyboard focus, burger icon swap, phone menu */
.lg-logo__word small { display: block; }
span.lg-nav__link { cursor: default; }
.lg-dropdown { display: none; z-index: 30; }
.lg-nav__item:hover > .lg-dropdown, .lg-nav__item:focus-within > .lg-dropdown { display: block; }
.lg-nav__item.has-dropdown:hover > .lg-nav__link, .lg-nav__item.has-dropdown:focus-within > .lg-nav__link { background: var(--lg-blue); color: var(--lg-yellow); border-radius: var(--lg-radius-sm) var(--lg-radius-sm) 0 0; box-shadow: none; }
.lg-nav__link .lg-ic--chevron { transition: transform .15s; }
.lg-nav__item.has-dropdown:hover > .lg-nav__link .lg-ic--chevron, .lg-nav__item.has-dropdown:focus-within > .lg-nav__link .lg-ic--chevron { transform: rotate(180deg); }
.lg-dropdown a:focus-visible { outline-color: var(--lg-yellow); outline-offset: -2px; }
.lg-dropdown span { display: block; padding: 10px 20px; color: #fff; font-size: 17px; line-height: 24px; font-weight: 700; }
.lg-burger .lg-ic--close, .lg-burger[aria-expanded="true"] .lg-ic--menu { display: none; }
.lg-burger[aria-expanded="true"] .lg-ic--close { display: block; }
.lg-burger:focus-visible { outline: 2px solid var(--lg-blue); outline-offset: 2px; }
.lg-cart .lg-ic { width: 22px; height: 22px; }
.lg-mnav__toggle { cursor: pointer; }
.lg-mnav__toggle .lg-ic { transition: transform .15s; }
.lg-mnav li.is-open > div > .lg-mnav__toggle .lg-ic { transform: rotate(180deg); }
.lg-mnav li:not(.is-open) > .lg-mnav__sub { display: none; }
.lg-mnav__row > span.lg-mnav__link { color: #fff; }
.lg-mnav__subrow { display: flex; align-items: center; }
.lg-mnav__subrow > a, .lg-mnav__subrow > span { flex: 1; }
.lg-mnav__sub span { display: block; padding: 10px 16px 10px 32px; color: #fff; font-size: 17px; }
.lg-mnav__subrow > .lg-mnav__toggle { height: 44px; border-left: 0; }
.lg-mnav__sub .lg-mnav__sub { padding: 0 0 4px 16px; }
.lg-mnav__foot { padding: 16px; }
@media (min-width: 961px) { .lg-mnav { display: none !important; } }
/* 7+ main items (the design plans for 3–7): compact items, burger from 1180px down (Header.html: lg-header--many) */
.lg-header--many .lg-header__bar { gap: 20px; }
.lg-header--many .lg-nav__list { gap: 0; }
.lg-header--many .lg-nav__link { padding-inline: 9px; font-size: 17px; }
@media (max-width: 1180px) {
  .lg-header--many .lg-nav { display: none; }
  .lg-header--many .lg-burger { display: inline-grid; }
  .lg-header--many .lg-header__tools { margin-left: auto; }
}
@media (min-width: 961px) and (max-width: 1180px) { .lg-header--many .lg-mnav:not([hidden]) { display: block !important; } }

/* Header slider (page head variant B) — slides stacked, /site/_default/slider.js toggles .is-active */
.lg-slider { touch-action: pan-y; }
.lg-slider:focus-visible { outline: 3px solid var(--lg-blue); outline-offset: -3px; }
.lg-slider__stage { display: grid; background: var(--lg-blue-tint); }
.lg-slide { grid-area: 1 / 1; position: relative; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; }
.lg-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.lg-slide > .lg-media { position: absolute; inset: 0; height: 100%; }
.lg-slide .lg-media img { -webkit-user-drag: none; user-select: none; }
.lg-slider__controls { z-index: 2; }
.slider__pause .lg-ic--play, .is-paused .slider__pause .lg-ic--pause { display: none; }
.is-paused .slider__pause .lg-ic--play { display: block; }
@media (prefers-reduced-motion: reduce) { .lg-slide { transition: none; } }
@media (max-width: 960px) {
  .lg-slide > .lg-media { position: relative; inset: auto; height: 300px; }
  .lg-slide:not(:has(> .lg-media)) { padding-top: 64px; }
}

/* Page head A (banner) + Hero "Bild": the design's overlay (opaque up to 55 %) hid most of the photo on wide screens —
   lighter, dense only behind the text column (text runs up to ~55 % of the width at 1280px), fading out to the right */
@media (min-width: 961px) {
  .lg-pagehead--banner .lg-pagehead__media::after,
  .lg-hero--image > .lg-hero__media::after {
    background: linear-gradient(100deg, rgba(122,37,130,.88) 0%, rgba(0,51,141,.8) 45%, rgba(0,51,141,.2) 75%, rgba(0,51,141,0) 90%);
  }
}

/* Media without a crop (Text + Bild, Bild) */
.lg-media--natural { background: none; }
.lg-media--natural > img { height: auto; }
.lg-figure__link { text-decoration: none; }
.lg-zoom { pointer-events: none; }
.lg-textimg--noimg { grid-template-columns: minmax(0, 1fr); }
.lg-fact__cause { object-fit: cover; }

/* Gallery (/site/_default/gallery.js + lightbox.js) */
.lg-gallery__grid > li, .lg-strip > li { min-width: 0; }
.lg-gallery__grid figure { display: flex; flex-direction: column; height: 100%; margin: 0; }
.lg-gallery__grid figure > .lg-thumb, .lg-gallery__grid figure > .lg-media { flex: 1; min-height: 0; }
.lg-gallery__grid figcaption { flex: none; }
.lg-gallery .lg-thumb { text-decoration: none; color: inherit; }
.lg-thumb, .lg-figure__link, .lg-strip { position: relative; }   /* keeps the .lg-sr spans inside the scrolling strip */
.lg-gallery .lg-media img, .lg-news__strip img { -webkit-user-drag: none; }
.lg-strip { scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.lg-strip > li { scroll-snap-align: start; }
.lg-strip figure { margin: 0; }
.lg-strip:focus-visible, .lg-stage:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.lg-strip-bar { justify-content: flex-end; }
.lg-iconbtn:disabled { opacity: .4; cursor: default; }
.lg-stage { touch-action: pan-y; }
.lg-stage__track { display: grid; }
.lg-stage__track > figure { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s; }
.lg-stage__track > figure.is-active { opacity: 1; visibility: visible; }
.lg-stage__track figcaption { margin-top: 12px; font-size: 14px; line-height: 21px; color: var(--c-muted); }
.lg-stage__ratio { aspect-ratio: 21 / 9; }
.lg-stage__nav { top: calc(50% - 16px); }
.lg-stage:has(figcaption) .lg-stage__nav { top: calc(50% - 32px); }
@container (max-width: 640px) { .lg-stage__ratio { aspect-ratio: 4 / 3; } }

/* Lightbox (gallery / picture "Vergrößern", news strip — DOM built by /site/_default/lightbox.js), board Z3 */
html.has-lightbox { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 72px 96px 56px; background: rgba(13, 34, 64, .96); touch-action: pan-y; font-family: var(--lg-font); }
.lightbox.is-open { display: flex; }
.lightbox__figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lightbox__img { display: block; max-width: 100%; max-height: calc(100vh - 160px); object-fit: contain; transition: opacity .25s; -webkit-user-drag: none; user-select: none; }
.lightbox.is-loading .lightbox__img { opacity: .4; }
.lightbox__caption { color: #dfe5f1; font-size: 15px; line-height: 22px; text-align: center; }
.lightbox__counter { position: absolute; left: 20px; top: 26px; color: #fff; font-size: 15px; line-height: 20px; }
.lightbox__close, .lightbox__arrow { position: absolute; z-index: 2; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.3); border-radius: var(--lg-radius-sm); background: rgba(255,255,255,.1); color: #fff; cursor: pointer; }
.lightbox__close:hover, .lightbox__arrow:hover { border-color: var(--lg-yellow); }
.lightbox__close:focus-visible, .lightbox__arrow:focus-visible { outline: 2px solid var(--lg-yellow); outline-offset: 2px; }
.lightbox__close { top: 16px; right: 20px; }
.lightbox__close::before, .lightbox__close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 1.75px; background: #fff; transform: translate(-50%, -50%) rotate(45deg); }
.lightbox__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.lightbox__arrow { top: 50%; margin-top: -22px; }
.lightbox__arrow::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-top: 1.75px solid #fff; border-right: 1.75px solid #fff; transform: translate(-30%, -50%) rotate(-135deg); }
.lightbox__arrow--prev { left: 24px; }
.lightbox__arrow--next { right: 24px; }
.lightbox__arrow--next::before { transform: translate(-70%, -50%) rotate(45deg); }
.lightbox.is-single .lightbox__arrow { display: none; }
@media (max-width: 760px) { .lightbox { padding: 72px 12px 40px; } .lightbox__arrow { display: none; } .lightbox__img { max-height: calc(100vh - 140px); } }

/* Two-click embeds (/site/_default/embed.js swaps the consent layer for the iframe) */
.lg-play { text-decoration: none; }
.lg-play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lg-embed__frame { width: 100%; }   /* auto width + aspect-ratio + min-height 300px would widen the frame on phones */
.lg-embed__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lg-embed__frame.is-loaded { background: #dfe3ea; }
.lg-embed__foot:not(:has(> span:not(:empty))) { justify-content: flex-end; }
.lg-embed--medium { width: 66%; }
@container (max-width: 640px) { .lg-embed--medium { width: 100%; } }

/* Forms: short fields pair up in two columns (one below 560px container width) */
.lg-form--cms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
.lg-form--cms > * { grid-column: 1 / -1; }
.lg-form--cms > .lg-field--short { grid-column: auto; }
@container (max-width: 560px) { .lg-form--cms > .lg-field--short { grid-column: 1 / -1; } }
.lg-form__intro { margin: 0; }
.lg-fieldset:focus { outline: none; }
.lg-alert > div > * + * { margin-top: 4px; }
.lg-alert p { margin: 0; }
.lg-alert--success { max-width: 760px; }
.lg-choice a { color: var(--c-link); }
select.lg-input { cursor: pointer; }

/* Link box (Interner / Externer Link, Stil Hell / Dunkel / Akzent) */
.lg-linkbox { max-width: 100%; }
.lg-linkbox > span { min-width: 0; }
a.lg-linkbox.lg-s-light:hover { background: #e9ecf2; }
a.lg-linkbox.lg-s-dark:hover { background: var(--lg-navy); }

/* Person: H2-sized name at root level and in wide columns, H3-sized in narrow ones */
@container (max-width: 640px) { .lg-person__name { font-size: 20px; line-height: 26px; font-weight: 500; } }
.lg-person__photo .lg-media img { height: 100%; }

/* Products */
.lg-pcard > .lg-media img { height: 100%; }
.lg-buy { margin-block: 0; }
.lg-product .lg-pcard__badge { z-index: 1; }

/* Shop pages (templates/Site/lionsgf/Shop) */
.lg-shop-flash { margin-bottom: 32px; }
/* summary rows: label keeps its width, a long value (Lieferzeit) wraps; the total's blue rule runs through */
.lg-summary__rows { grid-template-columns: max-content minmax(0, 1fr); column-gap: 0; }
.lg-summary__rows dd { padding-left: 16px; }
.lg-cart-item .lg-media img { height: 100%; }
.lg-cart-item__warn { display: block; margin-top: 4px; font-size: 14px; font-weight: 500; color: var(--lg-error); }
.lg-cart-table tr.is-short td { background: var(--lg-yellow-tint); }
.lg-remove:hover { border-color: var(--lg-error); color: var(--lg-error); }
.lg-remove .lg-ic { width: 18px; height: 18px; }
.lg-choice--box:has(input:checked) { border: 2px solid var(--lg-blue); padding: 13px 15px; background: var(--lg-blue-tint); }
.lg-choice--box:has(input:disabled) { opacity: .5; }
.lg-checkout__req { margin-bottom: -20px; }
.lg-checkout__ship { display: flex; flex-direction: column; gap: 18px; }
.lg-form__row--zip { grid-template-columns: minmax(0, 140px) minmax(0, 1fr); }
.lg-checkout__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; font-size: 15px; }
.lg-checkout__legal a, .lg-summary a, .lg-card a:not([class]), .lg-alert a { color: var(--c-link); }
.lg-options--consents { gap: 4px; }
.lg-done-payment { padding: 18px 20px; border-radius: var(--lg-radius-md); background: var(--lg-yellow-tint); border: 1px solid #f0d777; }
.lg-done-sku { display: block; font-size: 14px; color: var(--c-muted); }
.lg-table tfoot tr + tr > * { border-top: 0; }
.lg-table tfoot tr + tr:not([class]) > * { border-top: 2px solid var(--c-head); }   /* the total row of the order confirmation */
.lg-table tfoot .lg-done-sub > * { font-weight: 400; color: var(--c-ink); }
.lg-table tfoot .lg-done-tax > * { font-weight: 400; font-size: 14px; color: var(--c-muted); padding-top: 0; }
.lg-shop .lg-cols h2.lg-h3 { margin-bottom: 10px; }
@media (max-width: 640px) { .lg-form__row--zip { grid-template-columns: minmax(0, 1fr); } }

/* Tabelle: scroll shadow on the left too (table.js sets has-more-left) */
.lg-table__frame.has-more-left::before { content: ""; position: absolute; top: 0; left: 0; bottom: 16px; width: 28px; z-index: 1; pointer-events: none; background: linear-gradient(270deg, rgba(31,32,36,0), rgba(31,32,36,0.14)); }
.lg-table__scroll:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.lg-table thead th:is(.is-num) { text-align: right; }
@container (max-width: 640px) { .lg-table--cards td[data-label=""]::before, .lg-table--cards tbody th[data-label=""]::before { content: none; } .lg-table--cards td[data-label=""], .lg-table--cards tbody th[data-label=""] { padding-left: 0; } }

/* Footer details */
.lg-footer__addition { color: #e4e5e8; }
.lg-footer__about { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding-block: 0; }   /* the brand column is narrow */
.lg-footer__about--noimg { grid-template-columns: minmax(0, 1fr); }
.lg-footer__about .lg-footer__title { margin-bottom: 0; }
.lg-footer__address { margin-top: 12px; font-style: normal; }
.lg-hours__note { grid-column: 1 / -1; }
.lg-footer__list a, .lg-footer__menu a { text-decoration-thickness: 1px; }
.lg-footer__list .lg-ic { flex: none; }
ul.lg-social { list-style: none; padding: 0; margin-bottom: 0; flex-wrap: wrap; }
.lg-social a.lg-social__text { width: auto; padding: 0 16px; border-radius: 22px; text-decoration: none; }
.lg-footer__menu span { color: #e4e5e8; }