/* ==========================================================================
   Bowls Club Jungfrau – Sitepackage für TYPO3 14
   Modernisierte Fassung von fileadmin/template (Bootstrap 3):
   dunkle Navigation, Kopfbild-Slider, Orange als Akzent, dunkler Footer –
   ohne Bootstrap und jQuery. Farben unten unter :root anpassen.
   Cascade Layers, Custom Properties, Nesting, Container Queries.
   ========================================================================== */

@layer reset, base, layout, components, content, utilities;

@font-face {
  font-family: "Open Sans";
  src: url("../Fonts/open-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../Fonts/open-sans-latin-wght-italic.woff2") format("woff2");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;

  --c-dark: #141414;
  --c-dark-2: #262626;
  --c-footer: #2b2b2b;
  --c-accent: #f26101;
  --c-accent-light: #ff8a3d;
  --c-link: #c24d00;
  --c-link-hover: #8f3900;
  --c-red: #de5800;
  --c-notice: #c8102e;
  --c-intro: #f1f1f1;
  --c-ink: #212529;
  --c-muted: #5c636a;
  --c-line: #dee2e6;
  --c-card-1: #ffffff;
  --c-card-2: #eceef0;
  --c-paper: #ffffff;
  --c-sand: #f3f4f6;
  --c-night: var(--c-dark);
  --c-gold: var(--c-red);
  --c-gold-dark: var(--c-red);
  --c-blue: var(--c-link);

  --f-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-300: 0.875rem;
  --fs-400: 1.0625rem;
  --fs-500: 1.25rem;
  --fs-600: 1.875rem;
  --fs-700: 2.25rem;

  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --radius: 12px;
  --radius-s: 8px;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.06), 0 6px 18px -8px rgb(0 0 0 / 0.18);
  --shadow-card-hover: 0 2px 4px rgb(0 0 0 / 0.08), 0 14px 32px -12px rgb(0 0 0 / 0.35);
  --container: 1320px;
  --gutter: clamp(1rem, 0.6rem + 1.5vw, 1.5rem);
  --header-h: 4.25rem;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: none; text-size-adjust: none; }
  img, picture, svg, video { display: block; max-inline-size: 100%; block-size: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
}

@layer base {
  body {
    font-family: var(--f-sans);
    font-size: var(--fs-400);
    font-weight: 400;
    line-height: 1.6;
    color: var(--c-ink);
    background: var(--c-paper);
    min-block-size: 100dvh;
    display: flex;
    flex-direction: column;
  }
  h1, h2, h3, h4, h5, h6 { font-weight: 500; line-height: 1.25; text-wrap: balance; }
  h1 { font-size: var(--fs-700); }
  h2 { font-size: var(--fs-600); }
  h3 { font-size: var(--fs-500); }
  h4, h5, h6 { font-size: var(--fs-400); font-weight: 600; }
  p, li { text-wrap: pretty; }
  strong, b { font-weight: 650; }
  a {
    color: var(--c-link);
    text-underline-offset: 0.15em;
    &:hover { color: var(--c-link-hover); }
  }
  :focus-visible { outline: 3px solid #86b7fe; outline-offset: 2px; border-radius: 4px; }
}

@layer layout {
  .container {
    inline-size: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
  }
  .flow > * + * { margin-block-start: var(--flow-space, 1em); }

  .site-main { flex: 1; padding-block: 0 var(--space-xl); }
  .site-main__content { padding-block-start: var(--space-l); }

  /* Einleitung (ehemals Jumbotron): hellgrauer Balken über die ganze Breite */
  .intro { background: var(--c-intro); }
  .intro__inner { padding-block: var(--space-l); --flow-space: var(--space-m); }
  .site-main:focus { outline: none; }

  /* Spalten wie bisher (col-md-4 / col-md-6 / col-md-12) */
  .row {
    display: grid;
    gap: var(--space-m) calc(var(--space-m) * 1.25);
    align-items: start;
  }
  .row + .row { margin-block-start: var(--space-l); }
  .row__col { --flow-space: var(--space-l); min-inline-size: 0; }
  @media (min-width: 48em) {
    .row--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .row--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .row--header h2 { font-size: var(--fs-700); }
  .row--header { margin-block-end: var(--space-s); }
}

@layer components {
  .skip-link {
    position: absolute;
    inset-inline-start: 1rem;
    inset-block-start: -10rem;
    z-index: 100;
    padding: 0.6rem 1rem;
    background: #fff;
    color: var(--c-dark);
    border-radius: var(--radius-s);
    &:focus { inset-block-start: 1rem; }
  }

  /* ----- Navigation (dunkel, wie navbar-dark bg-dark) ----- */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: var(--c-dark);
    color: #fff;
  }
  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    min-block-size: var(--header-h);
  }
  .brand {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 0.75rem;
    gap: 0.1rem;
    color: #fff;
    text-decoration: none;
    flex-shrink: 0;
    margin-inline-end: var(--space-l);
    line-height: 1.1;
    &:hover { color: #fff; }
    &:hover .brand__byline { color: var(--c-accent-light); }
  }
  .brand__logo { block-size: clamp(40px, 34px + 1vw, 50px); inline-size: auto; }
  .brand__name {
    font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem);
    font-weight: 400;
    letter-spacing: 0.01em;
  }
  .brand__byline {
    font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #fff;
    transition: color 0.2s;
  }

  .nav-toggle, .nav-close {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.9rem;
    background: transparent;
    border: 1px solid rgb(255 255 255 / 0.3);
    border-radius: var(--radius-s);
    color: #fff;
    cursor: pointer;
    font-size: var(--fs-300);
    font-weight: 600;
    &:hover { border-color: #fff; }
  }
  .nav-close {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
    &::before { content: "×"; font-size: 1.3rem; line-height: 1; }
  }
  .nav-toggle__icon,
  .nav-toggle__icon::before,
  .nav-toggle__icon::after {
    display: block;
    inline-size: 18px;
    block-size: 2px;
    background: currentColor;
    border-radius: 2px;
  }
  .nav-toggle__icon { position: relative; }
  .nav-toggle__icon::before, .nav-toggle__icon::after { content: ""; position: absolute; }
  .nav-toggle__icon::before { inset-block-start: -6px; }
  .nav-toggle__icon::after { inset-block-start: 6px; }

  .site-nav {
    inset: 0 0 0 auto;
    margin: 0;
    inline-size: min(22rem, 88vw);
    block-size: 100dvh;
    max-block-size: none;
    padding: 4.5rem var(--space-m) var(--space-l);
    border: 0;
    background: var(--c-dark);
    color: #fff;
    overflow-y: auto;
    box-shadow: -20px 0 60px rgb(0 0 0 / 0.45);
    &::backdrop { background: rgb(0 0 0 / 0.5); }
  }
  @media (prefers-reduced-motion: no-preference) {
    .site-nav {
      transition: translate 0.25s ease, display 0.25s allow-discrete, overlay 0.25s allow-discrete;
      translate: 100% 0;
      &:popover-open { translate: 0 0; }
    }
    @starting-style { .site-nav:popover-open { translate: 100% 0; } }
  }

  .nav-list { list-style: none; padding: 0; display: grid; gap: 0.15rem; }
  .nav-item { position: relative; display: flex; flex-wrap: wrap; align-items: center; }
  .nav-link {
    flex: 1;
    display: block;
    padding: 0.6rem 0.75rem;
    color: rgb(255 255 255 / 0.85);
    text-decoration: none;
    font-size: 1.2rem;
    border-radius: var(--radius-s);
    &:hover { color: #fff; }
    &[aria-current="page"] { color: var(--c-accent-light); }
  }
  .nav-item.is-active > .nav-link { color: var(--c-accent-light); }

  .nav-sub-toggle {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    color: rgb(255 255 255 / 0.85);
    cursor: pointer;
    &::before {
      content: "";
      inline-size: 0.45rem;
      block-size: 0.45rem;
      border-inline-end: 2px solid currentColor;
      border-block-end: 2px solid currentColor;
      rotate: 45deg;
      translate: 0 -2px;
      transition: rotate 0.2s;
    }
    &[aria-expanded="true"]::before { rotate: 225deg; translate: 0 2px; }
  }
  .nav-sub {
    list-style: none;
    flex-basis: 100%;
    padding: 0.25rem 0 0.5rem 0.75rem;
    margin-inline-start: 0.75rem;
    border-inline-start: 1px solid rgb(255 255 255 / 0.15);
    display: none;
  }
  .nav-sub-toggle[aria-expanded="true"] + .nav-sub { display: block; }
  .nav-sub__item { position: relative; }
  .nav-sub__item.has-children { display: flex; flex-wrap: wrap; align-items: center; }
  .nav-sub__item.has-children > .nav-sub__link { flex: 1; }
  .nav-sub-toggle--level3 { inline-size: 2.25rem; block-size: 2.25rem; }
  .nav-sub--level3 { flex-basis: 100%; }
  .nav-sub__item.is-active > .nav-sub__link { color: var(--c-accent-light); }
  .nav-sub__link {
    display: block;
    padding: 0.4rem 0.75rem;
    color: rgb(255 255 255 / 0.8);
    text-decoration: none;
    border-radius: 6px;
    &:hover, &[aria-current="page"] { color: #fff; background: rgb(255 255 255 / 0.12); }
  }

  .lang-list {
    list-style: none;
    display: flex;
    gap: 0.25rem;
    padding: 0;
    margin-block-start: var(--space-m);
    & a {
      display: block;
      padding: 0.25rem 0.6rem;
      color: #fff;
      text-decoration: none;
      font-size: var(--fs-300);
      font-weight: 600;
      text-transform: uppercase;
      border: 1px solid rgb(255 255 255 / 0.3);
      border-radius: 6px;
      &[aria-current="true"] { background: #fff; color: var(--c-dark); }
    }
  }

  @media (min-width: 72em) {
    .nav-toggle, .nav-close { display: none; }
    .site-nav,
    .site-nav:popover-open {
      display: flex;
      align-items: center;
      gap: var(--space-m);
      position: static;
      inline-size: auto;
      block-size: auto;
      padding: 0;
      background: none;
      box-shadow: none;
      overflow: visible;
      translate: none;
      transition: none;
      margin-inline-end: auto;
    }
    .nav-list { display: flex; gap: 0.25rem; }
    .nav-item { flex-wrap: nowrap; }
    .nav-link {
      position: relative;
      padding: 1.1rem 0.25rem 1.1rem 0.85rem;
      font-size: 1.0625rem;
      letter-spacing: 0.01em;
      white-space: nowrap;
      &::after {
        content: "";
        position: absolute;
        inset-inline: 0.85rem 0.25rem;
        inset-block-end: 0.7rem;
        block-size: 2px;
        background: var(--c-accent);
        scale: 0 1;
        transform-origin: left;
        transition: scale 0.25s ease;
      }
      &:hover::after, &[aria-current="page"]::after { scale: 1 1; }
    }
    .nav-item:not(.has-children) > .nav-link { padding-inline-end: 0.85rem; &::after { inset-inline-end: 0.85rem; } }
    .nav-item.is-active > .nav-link::after { scale: 1 1; }
    .nav-item.has-children:hover > .nav-link::after { scale: 1 1; }
    .nav-sub-toggle { inline-size: 1.5rem; block-size: 2.25rem; }
    .nav-sub-toggle::before { inline-size: 0.4rem; block-size: 0.4rem; }
    .nav-sub {
      position: absolute;
      inset-block-start: calc(100% - 0.15rem);
      inset-inline-start: 0.35rem;
      min-inline-size: 15rem;
      inline-size: max-content;
      max-inline-size: 24rem;
      margin: 0;
      padding: 0.5rem;
      background: var(--c-dark-2);
      border: 1px solid rgb(255 255 255 / 0.08);
      border-radius: var(--radius-s);
      box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.6);
    }
    @media (prefers-reduced-motion: no-preference) {
      .nav-item.has-children:hover > .nav-sub,
      .nav-item.has-children:focus-within > .nav-sub { animation: nav-drop 0.18s ease-out; }
    }
    .nav-sub__link {
      color: rgb(255 255 255 / 0.85);
      &:hover, &[aria-current="page"] { color: #fff; background: rgb(255 255 255 / 0.08); }
      &[aria-current="page"] { color: var(--c-accent-light); }
    }
    .nav-item.has-children:hover > .nav-sub,
    .nav-item.has-children:focus-within > .nav-sub { display: block; }
    /* 3. Ebene: klappt seitlich aus */
    .nav-sub__item.has-children { flex-wrap: nowrap; }
    .nav-sub-toggle--level3 { inline-size: 1.75rem; block-size: 2rem; }
    .nav-sub-toggle--level3::before { rotate: -45deg; translate: -2px 0; }
    .nav-sub-toggle--level3[aria-expanded="true"]::before { rotate: -45deg; translate: -2px 0; }
    .nav-sub--level3 {
      inset-block-start: -0.5rem;
      inset-inline-start: calc(100% + 0.5rem);
      border-radius: var(--radius-s);
    }
    /* unsichtbare Brücke, damit das Menü beim Hinüberfahren mit der Maus offen bleibt */
    .nav-sub--level3::before {
      content: "";
      position: absolute;
      inset-block: 0;
      inset-inline-start: -1.1rem;
      inline-size: 1.1rem;
    }
    .nav-sub__item.opens-left > .nav-sub--level3::before { inset-inline: auto -1.1rem; }
    .nav-sub__item.has-children:hover > .nav-sub,
    .nav-sub__item.has-children:focus-within > .nav-sub { display: block; }
    /* Nur wenn rechts kein Platz ist (per JavaScript erkannt), nach links ausklappen */
    .nav-item.opens-left > .nav-sub { inset-inline: auto 0; }
    .nav-sub__item.opens-left > .nav-sub--level3 { inset-inline: auto calc(100% + 0.5rem); }
    .nav-sub__item.opens-left > .nav-sub-toggle--level3::before { rotate: 135deg; translate: 2px 0; }
    .lang-list { margin: 0; margin-inline-start: auto; }
  }

  @keyframes nav-drop {
    from { opacity: 0; translate: 0 -6px; }
    to { opacity: 1; translate: 0 0; }
  }

  /* ----- Suche im Kopfbereich ----- */
  .search-toggle {
    display: inline-grid;
    place-items: center;
    inline-size: 2.6rem;
    block-size: 2.6rem;
    margin-inline-start: auto;
    padding: 0;
    background: transparent;
    border: 1px solid rgb(255 255 255 / 0.3);
    border-radius: var(--radius-s);
    color: #fff;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    &:hover { border-color: var(--c-accent); color: var(--c-accent-light); }
  }
  .site-header__inner { justify-content: flex-start; }
  .site-header__inner > .brand { margin-inline-end: auto; }
  .site-header__inner > .search-toggle { margin-inline-start: 0; }

  .header-search { display: none; }

  @media (min-width: 72em) {
    .site-header__inner > .brand { margin-inline-end: var(--space-l); }
    .search-toggle { order: 5; margin-inline-start: var(--space-s); border-color: transparent; }
  }
  /* Ab genügend Breite: Suchfeld direkt in der Leiste statt Lupe */
  @media (min-width: 85em) {
    .search-toggle { display: none; }
    .header-search {
      display: flex;
      align-items: center;
      position: relative;
      flex-shrink: 0;
    }
    .header-search__input {
      inline-size: 12rem;
      padding: 0.5rem 2.6rem 0.5rem 1rem;
      background: rgb(255 255 255 / 0.08);
      border: 1px solid rgb(255 255 255 / 0.18);
      border-radius: 999px;
      color: #fff;
      font-size: 0.95rem;
      transition: inline-size 0.25s ease, background 0.2s, border-color 0.2s;
      &::placeholder { color: rgb(255 255 255 / 0.55); }
      &::-webkit-search-cancel-button { filter: invert(1); opacity: 0.6; }
      &:hover { background: rgb(255 255 255 / 0.12); }
      &:focus {
        outline: none;
        inline-size: 16rem;
        background: rgb(255 255 255 / 0.14);
        border-color: var(--c-accent);
      }
    }
    .header-search__submit {
      position: absolute;
      inset-inline-end: 0.35rem;
      display: grid;
      place-items: center;
      inline-size: 2rem;
      block-size: 2rem;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: rgb(255 255 255 / 0.75);
      cursor: pointer;
      &:hover, &:focus-visible { color: var(--c-accent-light); }
    }
  }

  /* Such-Overlay (Handy, Tablet und schmale Fenster) */
  .search-dialog {
    inline-size: min(40rem, 92vw);
    margin: 12vh auto auto;
    padding: var(--space-l) var(--space-m) var(--space-m);
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: var(--radius);
    background: var(--c-dark);
    color: #fff;
    box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.7);
    &::backdrop { background: rgb(10 12 16 / 0.7); backdrop-filter: blur(3px); }
  }
  @media (prefers-reduced-motion: no-preference) {
    .search-dialog[open] { animation: search-in 0.2s ease-out; }
  }
  @keyframes search-in {
    from { opacity: 0; translate: 0 -12px; }
    to { opacity: 1; translate: 0 0; }
  }
  .search-dialog__title {
    margin-block-end: 0.75rem;
    font-size: var(--fs-300);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.6);
  }
  .search-dialog__close {
    position: absolute;
    inset-block-start: 0.6rem;
    inset-inline-end: 0.6rem;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgb(255 255 255 / 0.7);
    cursor: pointer;
    &::before { content: "×"; font-size: 1.6rem; line-height: 1; }
    &:hover { color: #fff; background: rgb(255 255 255 / 0.08); }
  }
  .dialog-search { position: relative; display: flex; }
  .dialog-search__input {
    flex: 1;
    min-inline-size: 0;
    padding: 0.85rem 3.5rem 0.85rem 1.1rem;
    background: rgb(255 255 255 / 0.06);
    border: 1px solid rgb(255 255 255 / 0.2);
    border-radius: var(--radius-s);
    color: #fff;
    font-size: 1.2rem;
    &::placeholder { color: rgb(255 255 255 / 0.5); }
    &::-webkit-search-cancel-button { filter: invert(1); opacity: 0.6; }
    &:focus { outline: none; border-color: var(--c-accent); background: rgb(255 255 255 / 0.1); }
  }
  .dialog-search__submit {
    position: absolute;
    inset-block: 0.35rem;
    inset-inline-end: 0.35rem;
    inline-size: 2.9rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 6px;
    background: var(--c-accent);
    color: var(--c-dark);
    cursor: pointer;
    &:hover { background: var(--c-accent-light); }
  }

  /* ----- Kopfbild (ehemals .heroimage) ----- */
  .hero { background: var(--c-dark); }
  .hero__image {
    inline-size: 100%;
    block-size: clamp(200px, 120px + 16vw, 400px);
    object-fit: cover;
    object-position: center;
  }

  /* Slider bei mehreren Kopfbildern: Überblenden mit sanftem Zoom */
  .hero--slider {
    --hero-h: clamp(200px, 120px + 16vw, 400px);
    --hero-interval: 6s;
    position: relative;
    overflow: hidden;
  }
  .hero__track { position: relative; block-size: var(--hero-h); }
  .hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s ease, visibility 0s linear 1.2s;
    & picture { display: block; block-size: 100%; }
    & .hero__image { block-size: 100%; }
  }
  .hero__slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 1.2s ease, visibility 0s;
    z-index: 1;
  }
  @media (prefers-reduced-motion: no-preference) {
    .hero__slide.is-active .hero__image { animation: hero-zoom calc(var(--hero-interval) + 1.5s) ease-out both; }
  }
  @keyframes hero-zoom {
    from { scale: 1; }
    to { scale: 1.06; }
  }
  .hero--slider::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    block-size: 5rem;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to top, rgb(0 0 0 / 0.45), transparent);
  }
  .hero__controls {
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
    & > * { pointer-events: auto; }
  }
  .hero__dots {
    position: absolute;
    inset-block-end: 1rem;
    inset-inline-start: 50%;
    translate: -50% 0;
  }
  .hero__prev, .hero__next {
    position: absolute;
    inset-block-start: 50%;
    translate: 0 -50%;
  }
  .hero__prev { inset-inline-start: var(--gutter); }
  .hero__next { inset-inline-end: var(--gutter); }
  .hero__pause {
    position: absolute;
    inset-block-end: 0.6rem;
    inset-inline-end: var(--gutter);
    inline-size: 2rem;
    block-size: 2rem;
  }
  .hero__dots { display: flex; gap: 0.45rem; }
  @media (max-width: 40em) { .hero__prev, .hero__next { display: none; } }
  .hero__dot {
    inline-size: 0.6rem;
    block-size: 0.6rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.55);
    cursor: pointer;
    transition: inline-size 0.3s ease, background 0.3s;
    &:hover { background: #fff; }
    &[aria-current="true"] { inline-size: 1.8rem; background: var(--c-accent); }
  }
  .hero__btn {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(20 22 26 / 0.55);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.2s, opacity 0.2s;
    &:hover { background: rgb(20 22 26 / 0.85); }
    &::before { content: ""; inline-size: 0.5rem; block-size: 0.5rem; border-block-start: 2px solid currentColor; border-inline-end: 2px solid currentColor; }
  }
  .hero__prev::before { rotate: -135deg; translate: 2px 0; }
  .hero__next::before { rotate: 45deg; translate: -2px 0; }
  .hero__pause::before {
    border: 0;
    inline-size: 0.6rem;
    block-size: 0.7rem;
    background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%);
  }
  .hero__pause[aria-pressed="true"]::before {
    inline-size: 0;
    block-size: 0;
    background: none;
    border-block: 0.4rem solid transparent;
    border-inline-start: 0.65rem solid currentColor;
    translate: 2px 0;
  }
  @media (hover: hover) {
    .hero__prev, .hero__next { opacity: 0; }
    .hero--slider:hover :is(.hero__prev, .hero__next),
    .hero--slider:focus-within :is(.hero__prev, .hero__next) { opacity: 1; }
  }

  /* ----- Hinweis-Balken (ehemals .emergency) ----- */
  .notice {
    background: var(--c-notice);
    color: #fff;
    font-size: clamp(1.1rem, 1rem + 0.5vw, 1.5rem);
    & a { color: #fff; font-weight: 600; }
  }
  .notice__inner { padding-block: var(--space-s); }

  /* ----- Footer (dunkel, orange Titel, drei Spalten) ----- */
  .site-footer {
    background: var(--c-footer);
    color: #d0d0d0;
    font-size: 1.0625rem;
    line-height: 1.6;
    & h2, & .footer-title {
      font-size: 1.3rem;
      font-weight: 500;
      color: var(--c-accent);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-block-end: 0.75rem;
    }
    & a { color: #fff; text-decoration: none; }
    & a:hover { color: var(--c-accent-light); text-decoration: underline; }
    & .frame { margin-inline: 0; margin-block-end: 0; padding: 0; }
    & .frame header { margin-block-end: 0.5rem; }
  }
  .footer-grid {
    display: grid;
    gap: var(--space-l);
    padding-block: var(--space-l) var(--space-xl);
    --flow-space: var(--space-m);
  }
  @media (min-width: 48em) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .footer-col > .frame + .frame { margin-block-start: var(--space-l); }
  .footer-col > .frame + .frame-type-image,
  .footer-col > .frame + .frame-type-textmedia,
  .footer-col > .frame + .frame-type-textpic { margin-block-start: var(--space-s); }


  .footer-bar {
    background: var(--c-dark);
    color: rgb(255 255 255 / 0.85);
    font-size: 0.9375rem;
    & a { color: #fff; text-decoration: none; }
    & a:hover { color: var(--c-accent-light); text-decoration: underline; }
  }
  .footer-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem var(--space-m);
    padding-block: 0.75rem;
  }
  .footer-list, .social-list { list-style: none; padding: 0; display: grid; gap: 0.35rem; }
  .social-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    & a { display: inline-flex; align-items: center; gap: 0.5rem; }
  }
  .footer-nav {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
  }
  .footer-bar__copy { margin-inline: auto; }
  @media (max-width: 47.99em) {
    .footer-bar__inner { flex-direction: column; text-align: center; }
    .footer-bar__copy { margin-inline: 0; }
  }

  /* ----- Suchseite (indexed_search) ----- */
  .tx-indexedsearch-searchbox {
    padding: var(--space-m);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background: var(--c-intro);
    & fieldset { border: 0; padding: 0; margin: 0; }
    & legend { display: none; }
    & .tx-indexedsearch-search-for, & .tx-indexedsearch-search-submit { display: inline-block; }
    & label { display: block; margin-block-end: 0.35rem; font-weight: 600; font-size: var(--fs-300); }
    & input[type="text"], & input[type="search"] {
      inline-size: min(100%, 32rem);
      padding: 0.6rem 0.85rem;
      border: 1px solid #b9bec4;
      border-radius: var(--radius-s);
      background: #fff;
      font-size: 1rem;
      &:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgb(242 97 1 / 0.25); }
    }
    & input[type="submit"], & button {
      margin-block-start: 0.6rem;
      padding: 0.6rem 1.3rem;
      border: 0;
      border-radius: var(--radius-s);
      background: var(--c-accent);
      color: #fff;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s;
      &:hover { background: var(--c-red); color: #fff; }
    }
  }
  .tx-indexedsearch-info-sword, .tx-indexedsearch-browsebox {
    margin-block: var(--space-m) var(--space-s);
    color: var(--c-muted);
    font-size: var(--fs-300);
  }
  .tx-indexedsearch-browsebox ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
  .tx-indexedsearch-browsebox li a, .tx-indexedsearch-browsebox li strong {
    display: inline-block; padding: 0.25rem 0.65rem; border-radius: 6px; border: 1px solid var(--c-line); text-decoration: none;
  }
  .tx-indexedsearch-res {
    margin-block-end: var(--space-s);
    padding: var(--space-m);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.2s, translate 0.2s;
    &:hover { box-shadow: var(--shadow-card-hover); translate: 0 -1px; }
    & h3, & .tx-indexedsearch-title { font-size: var(--fs-500); margin-block-end: 0.35rem; }
    & .tx-indexedsearch-title a { text-decoration: none; }
    & .tx-indexedsearch-percent, & .tx-indexedsearch-icon { display: none; }
    & .tx-indexedsearch-description { color: var(--c-ink); }
    & .tx-indexedsearch-redMarkup { background: rgb(242 97 1 / 0.2); color: inherit; padding: 0 0.1em; border-radius: 2px; }
    /* Nur den Pfad zeigen – Grösse/Datum sind für Besucher uninteressant */
    & .tx-indexedsearch-info { margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--c-muted); }
    & .tx-indexedsearch-info :is(dt, dd) { display: none; }
    & .tx-indexedsearch-info dd.tx-indexedsearch-text-item-path { display: block; margin: 0; }
    & .tx-indexedsearch-info dd p { margin: 0; }
    & .tx-indexedsearch-info a { color: var(--c-muted); text-decoration: none; }
    & .tx-indexedsearch-info a:hover { color: var(--c-link); text-decoration: underline; }
  }
  .tx-indexedsearch-rules { padding-block: var(--space-m); font-size: var(--fs-300); }

  /* ----- Lightbox ----- */
  .lightbox-dialog {
    max-inline-size: min(92vw, 80rem);
    max-block-size: 92dvh;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: var(--c-dark);
    color: #fff;
    overflow: hidden;
    &::backdrop { background: rgb(0 0 0 / 0.85); }
    & img { max-block-size: 82dvh; inline-size: auto; margin-inline: auto; }
    & figcaption { padding: 0.75rem 1rem; font-size: var(--fs-300); }
    & button {
      position: absolute;
      inset-block-start: 0.5rem;
      inset-inline-end: 0.5rem;
      inline-size: 2.5rem;
      block-size: 2.5rem;
      border: 0;
      border-radius: 50%;
      background: rgb(0 0 0 / 0.6);
      color: #fff;
      font-size: 1.5rem;
      cursor: pointer;
    }
  }

  /* Bisherige Bootstrap-Klassen, die im Rich-Text-Editor vorkommen können */
  .btn {
    display: inline-block;
    padding: 0.45rem 1rem;
    border-radius: var(--radius-s);
    border: 1px solid transparent;
    text-decoration: none;
    font-weight: 500;
  }
  .btn-primary { background: var(--c-link); color: #fff; &:hover { background: var(--c-link-hover); color: #fff; } }
  .btn-secondary { background: #6c757d; color: #fff; &:hover { background: #5c636a; color: #fff; } }
  .btn-danger { background: var(--c-red); color: #fff; &:hover { background: #961330; color: #fff; } }
  .text-center { text-align: center; }
  .text-end, .text-right { text-align: end; }
  .img-fluid { max-inline-size: 100%; block-size: auto; }
}

@layer content {
  .frame {
    container-type: inline-size;
    --flow-space: 0.9em;
    & > * + * { margin-block-start: var(--flow-space); }
  }
  .row__col > .frame + .frame { margin-block-start: var(--space-l); }
  .frame header { margin-block-end: 0.5rem; }
  .frame header > * + * { margin-block-start: 0.25rem; }
  .frame header :is(h2, h3, h4, h5) + :is(h3, h4, h5, h6, p) { font-size: var(--fs-400); color: var(--c-muted); font-weight: 500; }
  .frame header a { color: inherit; text-decoration: none; }
  /* Hauptüberschrift einer Unterseite = erste Überschrift des ersten Inhaltselements */
  .intro__inner > .frame:first-child > header > :is(h1, h2, h3):first-child {
    font-size: clamp(1.9rem, 1.3rem + 2vw, 2.6rem);
    font-weight: 400;
    letter-spacing: -0.01em;
  }
  .intro__inner > .frame:last-child > header:last-child { margin-block-end: 0; }
  /* Überschriften im Fliesstext (RTE, auch alte «csc-firstHeader») nie grösser als die Elementüberschrift */
  /* (:not(header *) = die Elementüberschrift, die bei «Bild neben Text» im .ce-bodytext steckt, bleibt unberührt) */
  .ce-bodytext :is(h1, h2):not(header *) { font-size: 1.4rem; }
  .ce-bodytext h3:not(header *) { font-size: 1.25rem; }
  .ce-bodytext :is(h4, h5, h6):not(header *) { font-size: 1.1rem; }
  .ce-bodytext :is(h1, h2, h3, h4, h5, h6):not(header *) { margin-block: 1.4em 0.5em; }
  .ce-bodytext > :is(h1, h2, h3, h4, h5, h6):first-child { margin-block-start: 0; }
  .ce-headline-center { text-align: center; }
  .ce-headline-right { text-align: end; }
  .ce-bodytext > * + * { margin-block-start: 0.9em; }
  .frame :is(ul, ol):not([class]), ul.ce-bullets { padding-inline-start: 1.25em; }
  .frame :is(ul, ol):not([class]) li + li { margin-block-start: 0.3em; }
  .frame blockquote {
    padding: var(--space-s) var(--space-m);
    border-inline-start: 4px solid var(--c-link);
    background: var(--c-sand);
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
    font-style: italic;
  }

  /* Layout-Varianten wie bisher (Erscheinungsbild > Layout) */
  .frame-layout-1,
  .frame-layout-3 {
    padding: var(--space-m);
    border-radius: var(--radius);
    background: linear-gradient(145deg, var(--c-card-1), var(--c-card-2));
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.2s;
    &:hover { box-shadow: var(--shadow-card-hover); }
  }
  .frame-layout-2 {
    padding: var(--space-s) var(--space-m);
    border: 1px solid var(--c-red);
    border-radius: var(--radius-s);
    transition: background 0.2s;
    &:hover { background: linear-gradient(145deg, var(--c-card-1), var(--c-card-2)); }
  }
  .frame-layout-3 { border: 1px solid var(--c-red); }

  .frame-ruler-before { border-block-start: 1px solid var(--c-line); padding-block-start: var(--space-m); }
  .frame-ruler-after { border-block-end: 1px solid var(--c-line); padding-block-end: var(--space-m); }
  .frame-indent { padding-inline: clamp(0rem, 4vw, 3rem); }

  /* Tabellen */
  .frame-type-table { overflow-x: auto; }
  /* Bilder & Galerien */
  .ce-textpic, .ce-image, .ce-textmedia { display: flow-root; }
  .ce-gallery { --ce-gap: 0.75rem; --ce-cols: 1; margin-block-end: var(--space-m); }
  .ce-gallery[data-ce-columns="2"] { --ce-cols: 2; }
  .ce-gallery[data-ce-columns="3"] { --ce-cols: 3; }
  .ce-gallery[data-ce-columns="4"] { --ce-cols: 4; }
  .ce-gallery[data-ce-columns="5"] { --ce-cols: 5; }
  .ce-gallery[data-ce-columns="6"] { --ce-cols: 6; }
  .ce-gallery[data-ce-columns="7"] { --ce-cols: 7; }
  .ce-gallery[data-ce-columns="8"] { --ce-cols: 8; }
  .ce-gallery .ce-outer, .ce-gallery .ce-inner { display: contents; }
  .ce-gallery .ce-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ce-gap);
  }
  .ce-gallery .ce-row + .ce-row { margin-block-start: var(--ce-gap); }
  /* Spalte so breit wie das Bild, höchstens 1/N der Galerie.
     Bilder werden nie über die eingestellte bzw. von TYPO3 berechnete Breite hinaus vergrössert. */
  .ce-gallery .ce-column {
    --c: var(--ce-cols);
    flex: 0 0 auto;
    max-inline-size: calc((100% - (var(--c) - 1) * var(--ce-gap)) / var(--c));
    min-inline-size: 0;
  }
  .ce-gallery figure { margin: 0; }
  .ce-gallery img,
  .ce-gallery video {
    inline-size: auto;
    max-inline-size: 100%;
    block-size: auto;
    border-radius: var(--radius-s);
  }
  .ce-gallery iframe {
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--radius-s);
  }
  .ce-gallery iframe { aspect-ratio: 16 / 9; border: 0; }
  .ce-gallery figcaption,
  .image-caption {
    margin-block-start: 0.4rem;
    font-size: var(--fs-300);
    color: var(--c-muted);
  }
  .ce-gallery a.lightbox { display: block; cursor: zoom-in; }
  /* Hover wie sagenhaftezeiten.com: Schatten, der der Bildform folgt (auch bei Tastaturfokus) */
  .ce-gallery img, .ce-uploads img { transition: filter 0.25s ease; }
  .ce-gallery img:hover,
  .ce-uploads img:hover,
  .ce-gallery a:focus-visible img,
  .ce-uploads a:focus-visible img {
    filter: drop-shadow(0 6px 12px rgb(0 0 0 / 0.45));
  }
  /* Bilder mit Vergrösserung zusätzlich leicht aufhellen (wie setiportal.com) */
  .ce-gallery a.lightbox:hover img,
  .ce-gallery a.lightbox:focus-visible img {
    filter: brightness(1.08) drop-shadow(0 6px 12px rgb(0 0 0 / 0.45));
  }
  .ce-gallery a:focus-visible, .ce-uploads a:focus-visible { outline: none; }

  .ce-center .ce-gallery { margin-inline: auto; inline-size: fit-content; max-inline-size: 100%; }
  /* Bilder unter dem Text: gleicher Abstand bei allen Ausrichtungen */
  .ce-below .ce-gallery { margin-block: var(--space-m) 0; }
  .ce-left .ce-gallery { margin-inline-end: auto; }
  .ce-right:not(.ce-intext) .ce-gallery { margin-inline-start: auto; inline-size: fit-content; }

  .ce-intext.ce-left .ce-gallery,
  .ce-intext.ce-right .ce-gallery {
    inline-size: fit-content;
    max-inline-size: 45%;
  }
  .ce-intext.ce-left .ce-gallery { float: inline-start; margin-inline-end: var(--space-m); }
  .ce-intext.ce-right .ce-gallery { float: inline-end; margin-inline-start: var(--space-m); }

  /* «Neben dem Text, ohne Umbruch»: Überschrift über die ganze Breite,
     darunter Bild in Originalgrösse (max. 40 %) und Text daneben */
  .ce-intext.ce-nowrap {
    display: grid;
    column-gap: var(--space-m);
    row-gap: 0;
    align-items: start;
    & > .ce-gallery { float: none; margin: 0; max-inline-size: none; inline-size: auto; grid-row: 2 / span 40; }
    & > .ce-bodytext { display: contents; }
    & > .ce-bodytext > header { grid-column: 1 / -1; grid-row: 1; }
  }
  /* Aufeinanderfolgende Text/Bild-Elemente (z. B. Referenten-Liste) enger setzen */
  .row__col > :is(.frame-type-textpic, .frame-type-textmedia, .frame-type-text) + :is(.frame-type-textpic, .frame-type-textmedia) { margin-block-start: 2rem; }

  /* Serien von «Bild neben Text»-Elementen (z. B. Referenten): Blöcke, abwechselnd leicht grau */
  .row__col > .frame-type-textpic:has(> .ce-nowrap):is(
      :has(+ .frame-type-textpic > .ce-nowrap),
      .frame-type-textpic:has(> .ce-nowrap) + *
    ) {
    padding: var(--space-m);
    border: 1px solid transparent;
    border-radius: var(--radius);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    &:nth-child(odd of .frame-type-textpic) { background: #f3f4f6; }
    &:hover {
      border-color: rgb(216 162 58 / 0.45);
      box-shadow: 0 6px 20px rgb(33 37 41 / 0.08), 0 1px 3px rgb(33 37 41 / 0.06);
    }
  }
  /* Bild neben Text: eingestellte Bildbreite gilt, Bildunterschrift bricht innerhalb dieser Breite um */
  .ce-intext .ce-gallery img { inline-size: auto; max-inline-size: 100%; }
  .ce-intext .ce-gallery figcaption { contain: inline-size; }
  .ce-intext.ce-nowrap.ce-left { grid-template-columns: fit-content(40%) minmax(0, 1fr); }
  .ce-intext.ce-nowrap.ce-right { grid-template-columns: minmax(0, 1fr) fit-content(40%); }
  .ce-intext.ce-nowrap.ce-left > .ce-gallery { grid-column: 1; }
  .ce-intext.ce-nowrap.ce-left > .ce-bodytext > :not(header) { grid-column: 2; }
  .ce-intext.ce-nowrap.ce-right > .ce-gallery { grid-column: 2; }
  .ce-intext.ce-nowrap.ce-right > .ce-bodytext > :not(header) { grid-column: 1; }
  .ce-intext.ce-nowrap > .ce-bodytext > :not(header):first-child,
  .ce-intext.ce-nowrap > .ce-bodytext > header + * { margin-block-start: 0; }

  /* In schmalen Spalten (Kacheln, Seitenspalte, Handy): kleinere Bilder neben dem Text */
  @container (max-width: 30rem) {
    .ce-intext.ce-left .ce-gallery,
    .ce-intext.ce-right .ce-gallery {
      max-inline-size: 36%;
      margin-block-end: 0.5rem;
    }
    .ce-intext.ce-nowrap.ce-left,
    .ce-intext.ce-nowrap.ce-right { grid-template-columns: minmax(0, 1fr); }
    .ce-intext.ce-nowrap > .ce-gallery,
    .ce-intext.ce-nowrap > .ce-bodytext > :not(header) { grid-column: 1 !important; }
    .ce-intext.ce-nowrap > .ce-gallery { grid-row: 2; margin-block-end: var(--space-s); }
  }
  /* Schmale Spalten / Handy: höchstens 3 bzw. 2 Bilder nebeneinander */
  @container (max-width: 40rem) {
    .ce-gallery .ce-column { --c: min(var(--ce-cols), 3); }
  }
  @container (max-width: 22rem) {
    .ce-gallery .ce-column { --c: min(var(--ce-cols), 2); }
  }
  /* Sehr schmal: Bild über den Text */
  @container (max-width: 17rem) {
    .ce-intext.ce-left .ce-gallery,
    .ce-intext.ce-right .ce-gallery {
      float: none;
      margin-inline: 0;
      max-inline-size: 100%;
      inline-size: auto;
    }
  }

  .ce-table, .contenttable {
    inline-size: 100%;
    border-collapse: collapse;
    background: linear-gradient(180deg, #fff, #e6e6e6);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-s);
    overflow: hidden;
    & caption { text-align: start; font-weight: 600; margin-block-end: 0.5rem; }
    & th, & td { padding: 0.55rem 0.75rem; border-block-end: 1px solid #dadada; text-align: start; vertical-align: top; }
    & thead { background: #eee; }
    & thead th { font-weight: 600; }
  }

  /* Dateilinks / Downloads */
  .ce-uploads {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    & li {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.6rem 0.8rem;
      border: 1px solid var(--c-line);
      border-radius: var(--radius-s);
      background: var(--c-paper);
    }
    & img { inline-size: 2rem; }
    & .ce-uploads-fileName { font-weight: 600; }
    & .ce-uploads-description { color: var(--c-muted); font-size: var(--fs-300); }
    & .ce-uploads-filesize { margin-inline-start: auto; color: var(--c-muted); font-size: var(--fs-300); }
  }


  /* Footer: Bild-/Text-Elemente immer einfach untereinander (kein Raster, kein Umfliessen).
     Verhindert, dass Bilder auf dem Handy über die Überschrift rutschen. */
  .site-footer :is(.ce-textpic, .ce-textmedia, .ce-image),
  .site-footer .ce-intext.ce-nowrap { display: block; }
  .site-footer .ce-bodytext,
  .site-footer .ce-intext.ce-nowrap > .ce-bodytext { display: block; }
  .site-footer .ce-intext.ce-nowrap > .ce-bodytext > * { grid-column: auto !important; grid-row: auto; }
  .site-footer .frame header { position: static; }
  .site-footer .ce-gallery,
  .site-footer .ce-intext .ce-gallery,
  .site-footer .ce-intext.ce-nowrap > .ce-gallery {
    position: static;
    float: none;
    grid-row: auto;
    grid-column: auto !important;
    max-inline-size: 100%;
  }
  .site-footer .ce-gallery + .ce-bodytext { margin-block-start: 0.5rem; }

  /* Bilder im Footer (z. B. Social-Media-Logos): Grösse aus dem Inhaltselement, nebeneinander, nicht hochskaliert */
  .site-footer .ce-gallery {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    inline-size: auto;
    max-inline-size: none;
    margin: 1.25rem 0 0;
    float: none;
  }
  .site-footer .ce-gallery :is(.ce-outer, .ce-inner, .ce-row) { display: contents; }
  .site-footer .ce-gallery .ce-column { flex: none; min-inline-size: 0; max-inline-size: none; }
  /* Grösse kommt aus dem Inhaltselement (Bilder → Breite/Höhe) */
  /* Footer-Bilder (Social-Media-Icons, Logos): höchstens 3rem (48 px) hoch.
     Die Datei darf grösser sein – so bleibt sie auf hochauflösenden Bildschirmen (iPhone) scharf. */
  .site-footer .ce-gallery img {
    inline-size: auto;
    block-size: auto;
    max-inline-size: 100%;
    max-block-size: var(--footer-img-h, 3rem);
    border-radius: 0;
  }
  .site-footer .ce-gallery a { display: block; transition: opacity 0.2s, translate 0.2s; }
  .site-footer .ce-gallery a:hover { opacity: 0.75; translate: 0 -2px; }
  .site-footer .ce-gallery figcaption { font-size: 0.8rem; }
  /* «Bilder pro Zeile» aus dem Inhaltselement: so viele Bilder nebeneinander, dann neue Zeile */
  .site-footer .ce-gallery[data-ce-columns] {
    display: grid;
    justify-content: start;
    align-items: center;
  }
  .site-footer .ce-gallery[data-ce-columns="1"] { grid-template-columns: repeat(1, minmax(0, max-content)); }
  .site-footer .ce-gallery[data-ce-columns="2"] { grid-template-columns: repeat(2, minmax(0, max-content)); }
  .site-footer .ce-gallery[data-ce-columns="3"] { grid-template-columns: repeat(3, minmax(0, max-content)); }
  .site-footer .ce-gallery[data-ce-columns="4"] { grid-template-columns: repeat(4, minmax(0, max-content)); }
  .site-footer .ce-gallery[data-ce-columns="5"] { grid-template-columns: repeat(5, minmax(0, max-content)); }
  .site-footer .ce-gallery[data-ce-columns="6"] { grid-template-columns: repeat(6, minmax(0, max-content)); }
  .site-footer .ce-gallery[data-ce-columns="7"] { grid-template-columns: repeat(7, minmax(0, max-content)); }
  .site-footer .ce-gallery[data-ce-columns="8"] { grid-template-columns: repeat(8, minmax(0, max-content)); }
}

@layer utilities {
  .visually-hidden {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

@media print {
  .site-header, .hero, .skip-link, .nav-toggle { display: none !important; }
  .site-footer, .footer-bar { background: none; color: #000; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ----- Login (felogin) ----- */
@layer components {
  .frame-type-felogin_login {
    max-inline-size: 28rem;

    & form { margin-block-start: var(--space-s); }
    & fieldset {
      display: grid;
      gap: var(--space-s);
      margin: 0;
      padding: var(--space-m);
      border: 1px solid var(--c-line);
      border-radius: var(--radius);
      background: var(--c-intro);
    }
    & legend {
      padding-inline: 0.4rem;
      font-weight: 600;
      color: var(--c-ink);
    }
    & fieldset > div { display: grid; gap: 0.35rem; }
    & label {
      display: grid;
      gap: 0.35rem;
      font-size: var(--fs-300);
      font-weight: 600;
      color: var(--c-ink);
    }
    & input:is([type="text"], [type="password"], [type="email"]) {
      inline-size: 100%;
      padding: 0.6rem 0.8rem;
      font-size: var(--fs-400);
      font-weight: 400;
      background: #fff;
      border: 1px solid #c8c8c8;
      border-radius: var(--radius-s);
      transition: border-color 0.2s, box-shadow 0.2s;
      &:focus {
        outline: none;
        border-color: var(--c-accent);
        box-shadow: 0 0 0 3px rgb(242 97 1 / 0.25);
      }
    }
    & input[type="checkbox"] { inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--c-accent); }
    & label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }
    & :is(input[type="submit"], button[type="submit"], button:not([type])) {
      justify-self: start;
      padding: 0.65rem 1.6rem;
      font-weight: 600;
      color: #fff;
      background: var(--c-accent);
      border: 0;
      border-radius: var(--radius-s);
      cursor: pointer;
      transition: background 0.2s;
      &:hover { background: var(--c-red); }
    }
    & a { font-size: var(--fs-300); }
    & .alert, & .typo3-messages, & p.error {
      padding: 0.75rem 1rem;
      border-radius: var(--radius-s);
      background: #fdecea;
      color: #8a1c12;
    }
  }
}