/* =========================================================================
   moosbart.de – design tokens & base
   ========================================================================= */

@font-face {
  font-family: "Source Sans 3";
  src: url("../Fonts/SourceSans3.woff2") format("woff2-variations"),
       url("../Fonts/SourceSans3.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../Fonts/SourceSans3-Italic.woff2") format("woff2-variations"),
       url("../Fonts/SourceSans3-Italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("../Fonts/SourceSerif4.woff2") format("woff2-variations"),
       url("../Fonts/SourceSerif4.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("../Fonts/SourceSerif4-Italic.woff2") format("woff2-variations"),
       url("../Fonts/SourceSerif4-Italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("../Fonts/Fraunces.woff2") format("woff2-variations"),
       url("../Fonts/Fraunces.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("../Fonts/Fraunces-Italic.woff2") format("woff2-variations"),
       url("../Fonts/Fraunces-Italic.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --color-background: #f8f7f3;
  --color-background-raised: #ece9e1;
  --color-text: #262420;
  /* Darkened from the original #86837a (3.54:1 on --color-background -
     fails WCAG AA's 4.5:1 for normal text, flagged by PageSpeed/
     Lighthouse on the date/teaser text using it). --color-muted also
     sits on darker "raised"/tint backgrounds elsewhere (frame
     background classes) - #64625b is the darkest of those, so this
     value is picked to clear 4.5:1 against all of them, not just the
     page background. Same hue as the original, just darker. */
  --color-muted: #64625b;
  --color-accent: #5f6f52;
  --color-accent-2: #a15c3e;
  --color-accent-tint: #e1e3db;
  --color-accent-2-tint: #ebe0d8;
  --color-line: #e4e2da;
  --content-width: 74rem;
  --reading-width: 46rem;

  --font-sans: "Source Sans 3", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-display: "Fraunces", "Source Serif 4", Georgia, serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
}

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

html {
  color-scheme: light;
}

body {
  margin: 0;
  /* The footer's full-bleed border rules (below) use the 100vw
     breakout trick, which can overshoot the true viewport width by a
     scrollbar's worth of pixels and introduce horizontal scroll. */
  overflow-x: hidden;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

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

figure {
  margin: 0;
}

a {
  color: inherit;
}

nav,
.site-header,
.meta,
.news-detail__meta,
.site-footer,
time {
  font-family: var(--font-sans);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 var(--space-2);
}

h1 {
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
}

h2 {
  font-size: 1.375rem;
}

h3 {
  font-size: 1.125rem;
}

p {
  margin: 0 0 var(--space-2);
}

/* Recognition mark: a small green square after the wordmark and after
   every visible H1 – nowhere else. */
h1::after {
  content: "";
  display: inline-block;
  inline-size: 0.28em;
  block-size: 0.28em;
  margin-inline-start: 0.18em;
  margin-block-end: 0.2em;
  background: var(--color-accent);
  vertical-align: middle;
}

/* =========================================================================
   Accessibility
   ========================================================================= */

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  z-index: 1000;
  background: var(--color-background);
  color: var(--color-text);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-line);
}

.skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   Header & footer
   ========================================================================= */

.site-header,
.site-footer,
main {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-2);
}

.brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.625rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--color-text);
}

.brand__moos {
  color: var(--color-accent);
}

.brand__bart {
  color: var(--color-accent-2);
}

.brand::after {
  content: "";
  display: inline-block;
  inline-size: 0.32em;
  block-size: 0.32em;
  margin-inline-start: 0.2em;
  background: var(--color-accent);
  vertical-align: middle;
}

/* Hamburger trigger – used on every viewport size, not just mobile. */
.nav-menu__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  background: none;
  border: 0;
  padding: 0.1rem;
  min-block-size: 2.5rem;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  cursor: pointer;
}

.nav-menu__trigger:hover,
.nav-menu__trigger:focus-visible {
  color: var(--color-accent);
}

.nav-menu__bars {
  display: inline-flex;
  flex-direction: column;
  gap: 0.22rem;
}

.nav-menu__bars span {
  display: block;
  inline-size: 1.35rem;
  block-size: 1.5px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Bars become a simple X while the drawer is open. */
.nav-menu__trigger[aria-expanded="true"] .nav-menu__bars span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

.nav-menu__trigger[aria-expanded="true"] .nav-menu__bars span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu__bars span {
    transition: none;
  }
}

/* Full-height drawer, sliding in from the right – carries the main nav
   plus (once the drawer is open anyway) the same legal/social links as
   the compact footer, so they stay reachable without scrolling once
   there are more than two nav items. */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(38, 36, 32, 0.28);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.32s;
}

/* Never toggled via the "hidden" attribute/display:none: an element has
   to already be rendered for its transform to animate from somewhere –
   display:none gives the browser nothing to interpolate from, so the
   panel would just pop open instead of sliding in. Opacity/visibility
   keep it in the render tree (and out of the accessibility tree/tab
   order while closed) so the transform below can actually transition. */
.nav-drawer.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer {
    transition: none;
  }
}

.nav-drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(26rem, 88vw);
  background: var(--color-background);
  display: flex;
  flex-direction: column;
  padding: var(--space-2) var(--space-3) var(--space-3);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-drawer.is-open .nav-drawer__panel {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer__panel {
    transition: none;
  }
}

.nav-drawer__close {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  font-size: 1.375rem;
  line-height: 1;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  margin-inline-end: -0.5rem;
  margin-block-start: -0.3rem;
  color: var(--color-text);
  cursor: pointer;
}

.nav-drawer__close:hover,
.nav-drawer__close:focus-visible {
  color: var(--color-accent);
}

.nav-drawer__links {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1 0 auto;
}

.nav-drawer__links a {
  display: block;
  padding-block: 0.4rem;
  font-family: var(--font-display);
  font-size: 1.75rem;
  text-decoration: none;
  color: var(--color-text);
}

.nav-drawer__links a:hover,
.nav-drawer__links a:focus-visible,
.nav-drawer__links a.is-active {
  color: var(--color-accent);
}

.nav-drawer__footer {
  border-block-start: 1px solid var(--color-line);
  padding-block-start: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.nav-drawer__social {
  list-style: none;
  display: flex;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
}

.nav-drawer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  margin-inline-start: -0.5rem;
  color: var(--color-muted);
  text-decoration: none;
}

.nav-drawer__social a:hover,
.nav-drawer__social a:focus-visible {
  color: var(--color-accent);
}

.nav-drawer__legal {
  display: flex;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-muted);
}

.nav-drawer__legal a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.5rem;
  color: var(--color-muted);
  text-decoration: none;
}

.nav-drawer__legal a:hover,
.nav-drawer__legal a:focus-visible {
  color: var(--color-accent);
}

/* The footer itself stays inline with the page's reading width (it's a
   flex row sharing .content-width with the header/main), but the two
   accent rules bracketing it – a hairline above, a thick accent-colored
   line below, close to page as a whole – are meant to run full-bleed
   edge to edge. Pseudo-elements break out of the centered/max-width
   container via the classic 50vw full-bleed trick. */
.site-footer {
  position: relative;
  margin-top: var(--space-5);
  padding-block: calc(var(--space-2) + 5px) calc(var(--space-2) + 40px);
  color: var(--color-muted);
  font-size: 0.875rem;
}

.site-footer::before,
.site-footer::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inline-size: 100vw;
  margin-inline-start: -50vw;
  background: var(--color-accent);
}

.site-footer::before {
  inset-block-start: 0;
  block-size: 5px;
}

.site-footer::after {
  inset-block-end: 0;
  block-size: 40px;
}

.site-footer__categories ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: 0 0 var(--space-2);
  padding: 0;
}

.site-footer__categories a {
  color: var(--color-muted);
  text-decoration: none;
}

.site-footer__categories a:hover,
.site-footer__categories a:focus-visible {
  color: var(--color-accent);
}

.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

/* Copyright, icons and legal links all share the same 2.5rem row height
   (matching the icons' minimum tap target) so their text sits on one
   visual line instead of being centered against boxes of different
   heights. */
.site-footer__copyright {
  display: flex;
  align-items: center;
  min-block-size: 2.5rem;
  margin: 0;
}

.site-footer__social {
  list-style: none;
  display: flex;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
}

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  color: var(--color-muted);
  text-decoration: none;
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
  color: var(--color-accent);
}

.site-footer__legal {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}

.site-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.5rem;
  color: var(--color-muted);
  text-decoration: none;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
  color: var(--color-accent);
}

/* =========================================================================
   Generic page content
   ========================================================================= */

.page {
  padding-block: var(--space-4);
}

.page--default {
  max-width: var(--reading-width);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.page--home,
.page--notes {
  padding-inline: var(--space-3);
}

/* =========================================================================
   Homepage intro lede – the short intro text element gets a slightly
   bigger, editorial treatment (Fraunces) above the featured note. Scoped
   to .page--home; the Notizen list/detail pages don't have this element.
   ========================================================================= */

.page--home .frame-type-text .frame-inner p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.4375rem);
  line-height: 1.5;
  color: var(--color-text);
  max-width: 36rem;
}

/* =========================================================================
   News list / stream – newest (or pinned) note large ("featured"),
   everything else in a quiet, unframed grid. Shared by the homepage and
   the Notizen page (list + detail).
   ========================================================================= */

.news-list {
  max-width: var(--content-width);
  margin-inline: auto;
}

.meta {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  display: flex;
  gap: 0.65rem;
  align-items: baseline;
  margin: 0 0 0.6rem;
}

.meta .cat {
  color: var(--color-accent);
}

/* Featured */
.featured {
  margin-block: var(--space-4);
}

.featured__link {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}

@media (min-width: 56rem) {
  .featured__link {
    grid-template-columns: minmax(0, 22rem) 1fr;
    align-items: center;
    gap: var(--space-4);
  }
}

.featured__text h2 {
  font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem);
  margin: 0 0 0.6rem;
}

.featured__text p {
  color: var(--color-muted);
  margin: 0;
}

.featured__link:hover .featured__text h2,
.featured__link:focus-visible .featured__text h2 {
  color: var(--color-accent);
}

.featured__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.featured__img img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Grid */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: var(--space-4) var(--space-3);
  margin-block-end: var(--space-3);
}

.card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.card__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin: 0 0 var(--space-2);
  background: var(--color-background-raised);
}

.card__img img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Notes without a Hauptbild are normal, not an edge case – a small
   accent-square mark stands in for the missing image, spaced to roughly
   match where a photo's caption would start. */
.card--textonly .card__mark {
  inline-size: 0.85rem;
  block-size: 0.85rem;
  background: var(--color-accent);
  opacity: 0.8;
  margin: 0 0 1.6rem;
}

.card h3 {
  font-size: 1.1875rem;
  margin: 0 0 0.35rem;
  line-height: 1.25;
}

.card__teaser {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9375rem;
}

.card__link:hover h3,
.card__link:focus-visible h3 {
  color: var(--color-accent);
}

.news-list__empty {
  color: var(--color-muted);
}

/* Pagination */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-block-start: var(--space-3);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
}

.pagination a,
.pagination__current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2rem;
  min-block-size: 2rem;
  padding-inline: 0.4rem;
  text-decoration: none;
  color: var(--color-muted);
}

.pagination a:hover,
.pagination a:focus-visible {
  color: var(--color-text);
}

.pagination__current {
  color: var(--color-text);
  font-weight: 600;
}

/* =========================================================================
   News detail
   ========================================================================= */

.news-detail {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-block: var(--space-4);
}

.news-detail__head,
.news-detail__reaction,
.news-detail__sources,
.news-detail__tags {
  max-width: var(--reading-width);
  margin-inline: auto;
}

/* The body itself spans the full content width so image-heavy elements
   (gallery, video) have room to breathe on longer stories; running text
   (bodytext, "Text"/"Zitat" content elements) stays at reading-width for
   comfortable line length, see below. */
.news-detail__body {
  max-width: var(--content-width);
  margin-inline: auto;
}

.news-detail__meta {
  display: flex;
  gap: var(--space-2);
  color: var(--color-muted);
  font-size: 0.875rem;
  margin-block-end: 0.5rem;
}

.news-detail__category {
  color: var(--color-accent);
  text-decoration: none;
}

.news-detail__teaser {
  font-size: 1.1875rem;
  color: var(--color-muted);
}

.news-detail__image,
.news-detail__hero-image {
  margin-block-start: var(--space-3);
}

.news-detail__image img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Hero: wide landscape image below the text, full content width */
.news-detail__head--hero .news-detail__hero-image {
  max-width: var(--content-width);
}

.news-detail__hero-image img {
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

/* Seitenbild: text left / uncropped image right on wide viewports */
.news-detail__head--side {
  max-width: var(--content-width);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 60rem) {
  .news-detail__head--side {
    grid-template-columns: minmax(0, var(--reading-width)) 1fr;
    align-items: start;
  }

  .news-detail__side-image img {
    margin-inline: auto;
  }
}

.news-detail__body {
  margin-block-start: var(--space-3);
}

.news-detail__bodytext p,
.news-detail__content-elements p {
  margin: 0 0 var(--space-2);
}

/* Text-flow content (Bodytext, "Text" and "Zitat" content elements) is
   narrowed to reading-width and centered within the wider body; image/
   video-heavy elements ("Bilder/Galerie", "YouTube/Video", "Text mit
   Bild/Medien") are left at the body's full content-width. */
.news-detail__bodytext,
.news-detail__content-elements .frame-type-text .frame-inner,
.news-detail__content-elements .frame-type-quote .frame-inner {
  max-width: var(--reading-width);
  margin-inline: auto;
}

.news-detail__reaction {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-line);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-muted);
}

.news-detail__reaction-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 1px solid var(--color-line);
  background: none;
  color: var(--color-muted);
  font-size: 0.9375rem;
  line-height: 1;
  cursor: pointer;
}

.news-detail__reaction-button:hover,
.news-detail__reaction-button:focus-visible {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.news-detail__reaction-button.is-selected {
  color: var(--color-background);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.news-detail__reaction-button:disabled {
  cursor: default;
}

.news-detail__reaction-button:disabled:not(.is-selected):hover {
  color: var(--color-muted);
  border-color: var(--color-line);
}

.news-detail__reaction-thanks {
  font-style: italic;
}

.news-detail__sources {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-line);
}

.news-detail__sources ul {
  padding-inline-start: 1.25rem;
}

.news-detail__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-4) auto 0;
  padding: 0;
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-line);
}

.news-detail__tags a {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  color: var(--color-muted);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  border: 1px solid var(--color-line);
}

.news-detail__tags a:hover,
.news-detail__tags a:focus-visible {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* =========================================================================
   Content elements (bootstrap-package): text, textmedia, quote, media
   ========================================================================= */

.news-detail__content-elements img,
.news-detail__bodytext img {
  margin-block: var(--space-2);
}

/* Visible fallback for the image description (Bildunterschrift/Copyright-
   Hinweis): the lightbox already shows it as a caption on click, but an
   image can have its lightbox opted out entirely (tx_moosbart_lightbox/
   moosbart_lightbox unchecked) – without this, a filled-in description
   would then never be shown anywhere at all. */
.image-caption {
  margin-block-start: 0.4rem;
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
}

/* Title uses <strong> here (not a heading) – this caption sits inline in
   the page's own content flow, so an h3 would wrongly join the page's
   real heading outline. Inside the lightbox dialog it's a proper h3
   instead, see .lightbox__caption-title below. */
.image-caption__title {
  display: block;
  color: var(--color-text);
  font-weight: 600;
}

.image-caption__text {
  display: block;
}

.image-caption__title + .image-caption__text {
  margin-block-start: 0.15rem;
}

blockquote {
  margin: var(--space-3) 0;
  padding-inline-start: var(--space-2);
  border-inline-start: 3px solid var(--color-accent);
  font-style: italic;
  color: var(--color-muted);
}

/* =========================================================================
   bk2k/bootstrap-package frame options (Rahmen-Reiter): background color/
   image, outer spacing, ruler/indent. bk2k:frame emits these as plain
   "frame-*" classes on the content element's own wrapper, but ships no CSS
   of its own for them outside the package's (unused, Bootstrap-based) SCSS
   bundle – so none of it had any visual effect until styled here. Deliber-
   ately skips the "embedded" frame_layout and the height/size variants:
   neither is exposed as a meaningful, distinct choice in this project's
   backend (frame_layout is effectively unused; size/height are never
   passed by our Layout, see Layouts/ContentElements/Default.html).
   ========================================================================= */

/* Default rhythm between content elements – without this, a heading on
   the *next* element sits right against the previous element's last
   paragraph (that paragraph only has its own small margin-bottom, not a
   real section break). Deliberately a global default rather than
   something editors set per element via "Abstand davor" – that doesn't
   scale to articles with a dozen elements. The explicit frame-space-
   before-* classes (see below) still win where set: same specificity,
   later in the cascade. */
.frame {
  position: relative;
  margin-block-start: var(--space-4);
}

.frame-background-primary,
.frame-background-secondary,
.frame-background-tertiary,
.frame-background-quaternary,
.frame-background-light,
.frame-background-dark,
.frame-has-backgroundimage {
  padding: var(--space-3);
}

.frame-background-primary {
  background: var(--color-accent);
  color: var(--color-background);
}

.frame-background-secondary {
  background: var(--color-accent-2);
  color: var(--color-background);
}

.frame-background-tertiary {
  background: var(--color-accent-tint);
  color: var(--color-text);
}

.frame-background-quaternary {
  background: var(--color-accent-2-tint);
  color: var(--color-text);
}

.frame-background-light {
  background: var(--color-background-raised);
  color: var(--color-text);
}

.frame-background-dark {
  background: var(--color-text);
  color: var(--color-background);
}

/* Ruler/indent ("Rahmen"-Auswahl selbst *und* die "Rahmenoptionen"-
   Checkboxen tragen dieselben zwei Varianten unter leicht anderem
   Klassennamen – beide werden hier gleich behandelt). */
.frame-ruler-before,
.frame-option-ruler-before {
  border-block-start: 1px solid var(--color-line);
  padding-block-start: var(--space-3);
}

.frame-ruler-after,
.frame-option-ruler-after {
  border-block-end: 1px solid var(--color-line);
  padding-block-end: var(--space-3);
}

.frame-indent,
.frame-indent-left,
.frame-option-indent-left {
  padding-inline-start: 10%;
}

.frame-indent-right,
.frame-option-indent-right {
  padding-inline-end: 10%;
}

/* Outer spacing ("Abstand davor/danach") */
.frame-space-before-extra-small { margin-block-start: var(--space-1); }
.frame-space-before-small { margin-block-start: var(--space-2); }
.frame-space-before-medium { margin-block-start: var(--space-3); }
.frame-space-before-large { margin-block-start: var(--space-4); }
.frame-space-before-extra-large { margin-block-start: var(--space-5); }

.frame-space-after-extra-small { margin-block-end: var(--space-1); }
.frame-space-after-small { margin-block-end: var(--space-2); }
.frame-space-after-medium { margin-block-end: var(--space-3); }
.frame-space-after-large { margin-block-end: var(--space-4); }
.frame-space-after-extra-large { margin-block-end: var(--space-5); }

/* Background image: absolutely positioned behind .frame-container (which
   needs its own stacking context to paint above it – see FrameViewHelper's
   DOM order, background image markup comes first). */
.frame-container {
  position: relative;
}

.frame-backgroundimage-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.frame-backgroundimage {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
}

.frame-backgroundimage-behaviour-pattern {
  background-repeat: repeat;
  background-size: auto;
}

.frame-backgroundimage-fade {
  opacity: 0.15;
}

.frame-backgroundimage-parallax {
  background-attachment: fixed;
  background-repeat: no-repeat;
}

@media (hover: none) {
  .frame-backgroundimage-parallax {
    background-attachment: initial;
  }
}

.frame-backgroundimage-blur {
  filter: blur(10px);
  inset: -20px;
}

.frame-backgroundimage-grayscale {
  filter: grayscale(1);
}

.frame-backgroundimage-sepia {
  filter: sepia(1);
}

@media (prefers-reduced-motion: reduce) {
  .frame-backgroundimage-parallax {
    background-attachment: initial;
  }
}

/* =========================================================================
   Gallery + lightbox
   ========================================================================= */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: var(--space-1);
  margin-block: var(--space-3);
  list-style: none;
  padding: 0;
}

.gallery-grid__item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.gallery-grid__item button {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.gallery-grid__item img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Single image with an optional lightbox toggle: "Text mit Bild/Medien"
   content elements (tt_content.tx_moosbart_lightbox) and the News
   Hauptbild (tx_news_domain_model_news.moosbart_lightbox /
   sys_file_reference on fal_media). */
.image-lightbox-trigger {
  display: block;
  inline-size: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.image-lightbox-trigger img {
  display: block;
  max-width: 100%;
  height: auto;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(20, 20, 18, 0.92);
  padding: var(--space-3);
}

.lightbox[hidden] {
  display: none;
}

.lightbox__figure {
  max-width: min(90vw, var(--content-width));
  max-height: 80vh;
  margin: 0;
  text-align: center;
}

.lightbox__figure img {
  max-height: 80vh;
  width: auto;
  margin-inline: auto;
}

.lightbox__caption {
  color: #f1f1f0;
  font-family: var(--font-sans);
  margin-top: var(--space-1);
}

.lightbox__caption-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
}

.lightbox__caption-text {
  font-size: 0.875rem;
  margin: 0;
}

.lightbox__caption-title:not([hidden]) + .lightbox__caption-text {
  margin-block-start: 0.2rem;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  background: none;
  border: 0;
  color: #f1f1f0;
  font-family: var(--font-sans);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: var(--space-2);
}

.lightbox__close {
  top: var(--space-2);
  right: var(--space-2);
}

.lightbox__prev {
  left: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__next {
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__close:focus-visible,
.lightbox__prev:focus-visible,
.lightbox__next:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Kontakt page: visible, selectable e-mail address + copy button
   (Resources/Public/JavaScript/copy-to-clipboard.js) - deliberately no
   mailto: link, see the page's own intro text for why. */
.contact-email {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
}

.contact-email__address {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-line);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1rem;
  color: var(--color-text);
  user-select: all;
}

.contact-email__copy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  min-block-size: 2.5rem;
  border: 1px solid var(--color-line);
  background: none;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  cursor: pointer;
}

.contact-email__copy:hover,
.contact-email__copy:focus-visible {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.contact-email__copy:disabled {
  cursor: default;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.contact-email__feedback {
  flex-basis: 100%;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--color-muted);
}