/* ==========================================================================
 * mandant-entwurf1.css - Gemeinde Lotte - KONSOLIDIERT
 *
 * MERGED: mandant.css + custom.css + mandant-entwurf1.css (Entwurf 1)
 * Merge-Datum: 2026-03-20
 *
 * Enthält:
 *   1. Basis-Mandant-Tokens (--mandant-*) + Core-Komponenten
 *   2. Lotte-spezifische Seitenkomponenten (Unterseiten, Sidebar, etc.)
 *   3. Entwurf-1-Tokens (--lotte-*) + Entwurf-Variante
 *
 * Backups: mandant.css.bak, custom.css.bak (im gleichen Verzeichnis)
 * Ursprungsdateien: mandant.css, custom.css (NICHT löschen, nur nicht mehr laden)
 * ========================================================================== */

@layer mandant {

/* ==========================================================================
 * TEIL 1: MANDANT BASIS (aus mandant.css)
 * AUTO-GENERATED by build-css.ts - Kunden-Tokens
 * Kunde: gem-lotte
 * Manuell erweitert: 2026-02-18 LILY - Design-Fix
 * ========================================================================== */

  :root {
    /* Farben */
    --mandant-primary: #145675;
    --mandant-secondary: #84BD00;
    --mandant-accent: #145675;
    --mandant-bg: #FFFFFF;
    --mandant-text: #1A1A1A;
    --mandant-muted: #4A4A4A;
    --mandant-surface: #F5F8FA;
    --mandant-border: #CCCCCC;
    /* A11y C3: dark text on secondary (green) for WCAG AA contrast >= 4.5:1 */
    /* #0a3a4a on #84BD00 = ~5.04:1 (PASS). Overrideable per mandant. */
    --mandant-btn-secondary-text: #0a3a4a;

    /* Typografie */
    --mandant-font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --mandant-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --mandant-font-size: 1.25rem;

    /* Spacing */
    --mandant-space-section: 4rem;

    /* Radius - behoerdengerecht: konsistent, nicht rund */
    --mandant-radius: 4px;
    --mandant-radius-sm: 2px;
    --mandant-radius-md: 4px;
    --mandant-radius-lg: 6px;
    /* Kein 9999px fuer Behoerdenseite - Tags und Badges leicht gerundet */
    --mandant-radius-round: 4px;

    /* Navigation */
    --mandant-nav-height: 6.5rem;

    /* Hero – frisch und freundlich: helle, luftige Overlays */
    --mandant-hero-height: 75vh;
    --mandant-hero-overlay-from: 0.4;
    --mandant-hero-overlay-mid: 0.12;

    /* Transitions */
    --mandant-transition: 250ms ease;
  }

  /* === Fix: Body-Padding fuer fixed Navigation ===
   * Die ce-nav ist position:fixed, Hoehe: --mandant-nav-height.
   * OHNE padding-top ueberdeckt sie den ersten sichtbaren Content.
   * Mit padding-top bekommt der Body den noetigen Freiraum.
   * ce-hero und page-header nehmen sich diesen Raum zurueck via negativen margin.
   */
  body {
    padding-top: var(--mandant-nav-height, 5rem);
  }

  /* =================================================================
   * SPACING-SYSTEM: Heading-Margins + Element-Abstands-Regeln
   * style.css Reset setzt margin:0 auf *, aber @layer base
   * stellt nur p-Margins wieder her. Headings + Listen brauchen
   * explizite Margins fuer lesbaren Textfluss.
   * ================================================================= */

  h1, h2, h3, h4, h5, h6 {
    margin-top: var(--min-space-xl, 2.5rem);
    margin-bottom: var(--min-space-md, 1rem);
  }

  /* Erstes Heading in Section/Container: kein margin-top */
  section > .container > h1:first-child,
  section > .container > h2:first-child,
  section > .container > h3:first-child,
  .ce-two-col__main > h2:first-of-type,
  .ce-content-section h1:first-child,
  .ce-content-section h2:first-child {
    margin-top: 0;
  }

  /* Heading direkt nach Heading: reduzierter Abstand */
  h1 + h2, h2 + h3, h3 + h4 {
    margin-top: var(--min-space-sm, 0.5rem);
  }

  /* Listen: Abstands + Bullets zurueck */
  ul, ol {
    margin-bottom: var(--min-space-md, 1rem);
    padding-left: 1.5rem;
  }

  ul { list-style: disc; }
  ol { list-style: decimal; }

  /* Navigations-Listen + UI-Listen: KEINE Bullets */
  nav ul, nav ol,
  .ce-nav ul, .ce-nav ol,
  .ce-footer ul, .ce-footer ol,
  .lotte-a11y-toolbar ul,
  .lotte-sidebar-nav,
  .lotte-download-list,
  .lotte-service-search-hints ul,
  .lotte-bekanntmachungen-list,
  .sg-nav ul,
  [role="tablist"] ul,
  .swiper-wrapper {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
  }

  li {
    margin-bottom: var(--min-space-xs, 0.25rem);
  }

  /* Navigations-Items: kein Abstand */
  nav li, .ce-nav li, .ce-footer li {
    margin-bottom: 0;
  }

  /* figure/figcaption Spacing */
  figure {
    margin-bottom: var(--min-space-lg, 2rem);
  }

  figcaption {
    margin-top: var(--min-space-sm, 0.5rem);
    font-size: 0.875rem;
    color: var(--mandant-muted, #4a4a4a);
  }

  /* Section-Spacing: Abstand zwischen Sections */
  section + section {
    margin-top: 0;
  }

  /* Info-Box Spacing */
  .ce-info-box {
    padding: var(--min-space-lg, 2rem);
    background: var(--mandant-surface, #f5f8fa);
    border-radius: var(--mandant-radius-md, 4px);
    margin-bottom: var(--min-space-lg, 2rem);
  }

  .ce-info-box h3 {
    margin-top: 0;
  }

  /* Hero: Startet direkt unter der Nav (deckt optisch den Body-Padding ab) */
  :is(.ce-hero, .min-hero),
  .hero,
  .page-hero {
    margin-top: calc(-1 * var(--mandant-nav-height, 5rem));
    /* Volle Hoehe minus Nav-Hoehe damit Viewport exakt ausgefuellt wird */
    min-height: calc(var(--ce-hero-height, 75vh));
  }

  /* Full-Hero: exakt 100vh - der margin-top hebt den body padding zurueck */
  .ce-hero--full,
  .hero--full {
    min-height: 100vh;
  }

  /* Page-Header (Unterseiten): ebenfalls am Body-Top ausgerichtet */
  .ce-page-header,
  .page-header {
    margin-top: calc(-1 * var(--mandant-nav-height, 5rem));
  }

  /* Kleeblatt-Dekor entfernt (2026-03-21) */

  /* =================================================================
   * MEGA-DROPDOWN fuer Items mit vielen Unterpunkten
   * Modifier: .ce-nav__item--mega
   * Erweitert ce-nav__sub zu einem Multi-Column-Dropdown
   * Betrifft: "Rathaus & Politik" (10 Items), "Leben & Freizeit" (9 Items)
   * ================================================================= */

  /* Desktop: Mega-Dropdown statt schmales Flyout */
  @media (min-width: 1024px) {
    .ce-nav__item--mega > .ce-nav__sub {
      min-width: 28rem;
      left: 50%;
      transform: translateX(-50%) translateY(-0.5rem);
      columns: 2;
      column-gap: var(--min-space-lg, 2rem);
      padding: var(--min-space-md, 1rem) var(--min-space-lg, 2rem);
    }

    .ce-nav__item--mega:hover > .ce-nav__sub,
    .ce-nav__item--mega:focus-within > .ce-nav__sub {
      transform: translateX(-50%) translateY(0);
    }

    /* Unterpunkte nicht umbrechen innerhalb der Spalten */
    .ce-nav__item--mega > .ce-nav__sub > li {
      break-inside: avoid;
    }

    /* Letzes Item vor der Spaltengrenze: kein Border */
    .ce-nav__item--mega > .ce-nav__sub > li:last-child {
      border-bottom: none;
    }
  }

  /* =================================================================
   * EINHEITLICHE A11Y-TOOLBAR
   * Vereint: Dark Mode, Font +/-, Kontrast, Einfache Sprache, Vorlesen
   * Position: fixed links unten (ausserhalb des Content-Flow)
   * ================================================================= */

  

  

  .lotte-a11y-toolbar__btn:hover {
    background: var(--mandant-surface, #f5f8fa);
    border-color: var(--mandant-border, #ccc);
  }

  .lotte-a11y-toolbar__btn.active {
    background: var(--mandant-primary, #145675);
    color: #fff;
    border-color: var(--mandant-primary, #145675);
  }

  /* Visueller Trenner vor Einfache-Sprache-Block */
  

  /* Mobile: Toolbar kompakter */
  @media (max-width: 479px) {
    

    
  }

  /* =================================================================
   * BACK-TO-TOP FIX
   * Button war transparent weil opacity:0 und kein JS fuer is-visible.
   * Hier: immer sichtbar ab Scroll, korrekte Farbe.
   * ================================================================= */

  .back-to-top {
    background: var(--mandant-primary, #145675);
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--mandant-transition, 250ms ease), background var(--mandant-transition, 250ms ease);
  }

  .back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
  }

  .back-to-top:hover {
    background: color-mix(in srgb, var(--mandant-primary, #145675) 80%, black);
  }

  /* =================================================================
   * SCHNELLZUGRIFFE: 3x2 Grid mit Icon-Karten (BEM)
   * Horizontales Layout: Icon links, Label rechts
   * Grid: 3 Spalten Desktop, 2 Tablet, 1 Mobile
   * ================================================================= */

  .lotte-schnellzugriffe {
    padding: var(--mandant-space-section, 4rem) 0;
  }

  .lotte-schnellzugriffe__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--min-space-md, 1rem);
  }

  @media (min-width: 1024px) {
    .lotte-schnellzugriffe__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (max-width: 639px) {
    .lotte-schnellzugriffe__grid {
      grid-template-columns: 1fr;
    }
  }

  .lotte-schnellzugriffe__card {
    display: flex;
    align-items: center;
    gap: var(--min-space-md, 1rem);
    padding: var(--min-space-md, 1rem) var(--min-space-lg, 1.5rem);
    border: 1px solid var(--mandant-border, #ccc);
    border-left: 3px solid var(--mandant-primary, #145675);
    background: var(--mandant-bg, #fff);
    border-radius: var(--mandant-radius-md, 4px);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--mandant-transition, 250ms ease), box-shadow var(--mandant-transition, 250ms ease);
  }

  .lotte-schnellzugriffe__card:hover {
    border-left-color: var(--mandant-secondary, #84BD00);
    box-shadow: 0 4px 12px var(--lotte-mm-border-dark);
  }

  .lotte-schnellzugriffe__icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--mandant-radius-md, 4px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--mandant-primary, #145675) 10%, transparent);
    color: var(--mandant-primary, #145675);
    transition: transform var(--mandant-transition, 250ms ease), background var(--mandant-transition, 250ms ease);
  }

  .lotte-schnellzugriffe__card:hover .lotte-schnellzugriffe__icon {
    transform: scale(1.08);
    background: color-mix(in srgb, var(--mandant-secondary, #84BD00) 15%, transparent);
    color: color-mix(in srgb, var(--mandant-secondary, #84BD00) 80%, black);
  }

  .lotte-schnellzugriffe__body {
    min-width: 0;
  }

  .lotte-schnellzugriffe__label {
    font-size: 1rem;
    font-weight: var(--min-font-weight-medium, 500);
    color: var(--mandant-text, #1a1a1a);
  }

  /* =================================================================
   * CTA-BAR: Online-Buergerservice Banner
   * Volle Breite, Surface-Hintergrund, zentriert
   * ================================================================= */

  .lotte-cta-bar {
    background: var(--mandant-surface, #f5f8fa);
    border-top: 1px solid var(--mandant-border, #ccc);
    border-bottom: 1px solid var(--mandant-border, #ccc);
  }

  .lotte-cta-bar .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--min-space-md, 1rem) var(--min-space-xl, 2rem);
    padding-top: var(--min-space-lg, 2rem);
    padding-bottom: var(--min-space-lg, 2rem);
  }

  .lotte-cta-bar__text {
    font-size: 1.0625rem;
    font-weight: var(--min-font-weight-medium, 500);
    color: var(--mandant-text, #1a1a1a);
    margin: 0;
  }

  .lotte-cta-bar__button {
    display: inline-flex;
    align-items: center;
    gap: var(--min-space-sm, 0.5rem);
    padding: 0.75rem 1.5rem;
    background: var(--mandant-primary, #145675);
    color: #fff;
    border: none;
    border-radius: var(--mandant-radius-md, 4px);
    font-size: 0.9375rem;
    font-weight: var(--min-font-weight-medium, 500);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--mandant-transition, 250ms ease);
  }

  .lotte-cta-bar__button:hover {
    background: color-mix(in srgb, var(--mandant-primary, #145675) 80%, black);
  }

  /* =================================================================
   * SECTION WRAPPER
   * Standard-Section-Spacing fuer alle v1 Sections
   * ================================================================= */

  .lotte-section {
    padding: var(--mandant-space-section, 4rem) 0;
  }

  .lotte-section--surface,
  .lotte-section--alt {
    background: var(--mandant-surface, #f5f8fa);
  }

  .lotte-section--primary {
    background: var(--mandant-primary, #145675);
    color: #fff;
  }

  /* =================================================================
   * SECTION-HEADER: Titel + Tabs nebeneinander
   * SECTION-FOOTER: Zentrierter Button unter Sections
   * Ersetzt Tailwind-Utilities text-center mt-8
   * ================================================================= */

  .lotte-section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--min-space-md, 1rem) var(--min-space-xl, 2rem);
    margin-bottom: var(--min-space-lg, 2rem);
  }

  .lotte-section-header h2 {
    margin-bottom: 0;
  }

  .lotte-section-footer {
    text-align: center;
    margin-top: var(--min-space-xl, 2rem);
  }

  /* =================================================================
   * TABS: Meldungen / Bekanntmachungen
   * Behördengerecht: klare Linien, kein Pill-Style
   * ================================================================= */

  .lotte-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--mandant-border, #ccc);
  }

  .lotte-tabs__tab {
    padding: var(--min-space-sm, 0.5rem) var(--min-space-lg, 1.5rem);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mandant-muted, #4a4a4a);
    cursor: pointer;
    transition: color var(--mandant-transition, 250ms ease), border-color var(--mandant-transition, 250ms ease);
  }

  .lotte-tabs__tab:hover {
    color: var(--mandant-primary, #145675);
  }

  .lotte-tabs__tab.is-active {
    color: var(--mandant-primary, #145675);
    border-bottom-color: var(--mandant-primary, #145675);
  }

  .lotte-tabs__panel[hidden] {
    display: none;
  }

  /* =================================================================
   * BEKANNTMACHUNGEN-LISTE (Tab-Panel)
   * Amtliche Verlautbarungen: sachlich, klar strukturiert
   * ================================================================= */

  .lotte-bekanntmachungen-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .lotte-bekanntmachung {
    display: flex;
    gap: var(--min-space-lg, 1.5rem);
    padding: var(--min-space-md, 1rem) 0;
    border-bottom: 1px solid var(--mandant-border, #ccc);
    align-items: flex-start;
  }

  .lotte-bekanntmachung:last-child {
    border-bottom: none;
  }

  .lotte-bekanntmachung__date {
    flex-shrink: 0;
    width: 5.5rem;
    font-size: 0.875rem;
    color: var(--mandant-muted, #4a4a4a);
    padding-top: 2px;
  }

  .lotte-bekanntmachung__content h3 {
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 4px;
  }

  .lotte-bekanntmachung__content h3 a {
    color: var(--mandant-text, #1a1a1a);
    text-decoration: none;
  }

  .lotte-bekanntmachung__content h3 a:hover {
    color: var(--mandant-primary, #145675);
    text-decoration: underline;
  }

  .lotte-bekanntmachung__content p {
    font-size: 0.875rem;
    color: var(--mandant-muted, #4a4a4a);
  }

  @media (max-width: 479px) {
    .lotte-bekanntmachung {
      flex-direction: column;
      gap: var(--min-space-xs, 0.25rem);
    }

    .lotte-bekanntmachung__date {
      width: auto;
    }
  }

  /* =================================================================
   * HERO SEARCH BOX (v1 Klarheit)
   * Gestylte Suchbox im Hero-Bereich: weisser Input, gruener Button
   * Kundenvorgabe: Suchfeld integriert in Bildbereich
   * ================================================================= */

  .ce-hero__search {
    display: flex;
    max-width: 540px;
    margin-top: var(--min-space-lg, 2rem);
    border-radius: var(--mandant-radius-md, 4px);
    overflow: hidden;
    box-shadow: 0 4px 24px var(--lotte-shadow-20);
  }

  .ce-hero__search input {
    flex: 1;
    padding: 0.875rem 1.25rem;
    border: none;
    background: var(--lotte-white-95);
    backdrop-filter: blur(8px);
    font-size: 1rem;
    color: var(--mandant-text, #1a1a1a);
    outline: none;
  }

  .ce-hero__search input::placeholder {
    color: var(--mandant-muted, #4a4a4a);
  }

  .ce-hero__search input:focus {
    background: #fff;
  }

  .ce-hero__search button {
    display: flex;
    align-items: center;
    gap: var(--min-space-sm, 0.5rem);
    padding: 0.875rem 1.5rem;
    background: var(--mandant-secondary, #84BD00);
    /* A11y fix C3: dark text on green bg for WCAG AA contrast >= 4.5:1 */
    color: var(--mandant-btn-secondary-text, #0a3a4a);
    border: none;
    font-size: 0.9375rem;
    font-weight: var(--min-font-weight-medium, 500);
    cursor: pointer;
    transition: background var(--mandant-transition, 250ms ease);
    white-space: nowrap;
  }

  .ce-hero__search button:hover {
    background: color-mix(in srgb, var(--mandant-secondary, #84BD00) 80%, black);
  }

  @media (max-width: 639px) {
    .ce-hero__search {
      flex-direction: column;
    }

    .ce-hero__search button {
      justify-content: center;
    }
  }

  /* =================================================================
   * v1 KLARHEIT: Section-Headings mit gruenem Akzent-Unterstrich
   * 3px Unterstrich in Secondary-Farbe via ::after
   * ================================================================= */

  .lotte-section-heading {
    position: relative;
    display: inline-block;
    padding-bottom: var(--min-space-sm, 0.5rem);
  }

  .lotte-section-heading::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 3rem;
    height: 3px;
    background: var(--mandant-secondary, #84BD00);
    border-radius: 2px;
  }

  /* =================================================================
   * v1 KLARHEIT: Schnellzugriffe-Grid 3x2 (6 Items)
   * Ueberschreibt das 4-Spalten-Grid fuer die neue 6-Item-Konfiguration
   * ================================================================= */

  @media (min-width: 1024px) {
    .lotte-schnellzugriffe .ce-cards__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* Kleeblatt-Divider entfernt (2026-03-21) */

  /* =================================================================
   * v1 KLARHEIT: Fokusthemen Overlay-Cards 3er-Grid
   * ================================================================= */

  .lotte-topic-cards,
  .lotte-topics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--min-space-md, 1rem);
  }

  @media (min-width: 640px) {
    .lotte-topic-cards,
    .lotte-topics-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .lotte-topic-card {
    position: relative;
    border-radius: var(--mandant-radius-md, 4px);
    overflow: hidden;
    aspect-ratio: 4/3;
    cursor: pointer;
  }

  .lotte-topic-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }

  .lotte-topic-card:hover img {
    transform: scale(1.04);
  }

  .lotte-topic-card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--min-space-lg, 1.5rem);
    background: linear-gradient(to top, var(--lotte-overlay-dark-strong) 0%, var(--lotte-overlay-dark-light) 40%, transparent 70%);
    color: #fff;
  }

  .lotte-topic-card__tag {
    display: inline-block;
    background: var(--mandant-secondary, #84BD00);
    /* A11y fix C3: dark text on green tag for WCAG AA contrast >= 4.5:1 */
    color: var(--mandant-btn-secondary-text, #0a3a4a);
    padding: 2px 0.625rem;
    border-radius: var(--mandant-radius-sm, 2px);
    font-size: 0.875rem;
    font-weight: var(--min-font-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--min-space-xs, 0.25rem);
    width: fit-content;
  }

  .lotte-topic-card__title {
    font-size: 1.125rem;
    font-weight: var(--min-font-weight-bold, 700);
    line-height: var(--min-line-height-heading, 1.3);
    text-shadow: 0 1px 6px var(--lotte-shadow-40), 0 1px 2px var(--lotte-shadow-30);
  }

  .lotte-topic-card__title a {
    color: #fff;
    text-decoration: none;
  }

  .lotte-topic-card__title a:hover {
    text-decoration: underline;
  }

  /* =================================================================
   * v1 KLARHEIT: Footer
   * Klassisch, sauber, gruener Akzent unter Spalten-Titeln
   * ================================================================= */

  .ce-footer--v1 {
    --ce-footer-bg: var(--mandant-primary, #145675);
    --ce-footer-text: #fff;
    --ce-footer-link-hover: var(--mandant-secondary, #84BD00);
  }

  .ce-footer--v1 .ce-footer__logo {
    filter: brightness(0) invert(1);
    height: 80px;
    width: auto;
    margin-bottom: var(--min-space-md, 1rem);
  }

  .ce-footer--v1 .ce-footer__column-title {
    position: relative;
    padding-bottom: var(--min-space-sm, 0.5rem);
    margin-bottom: var(--min-space-md, 1rem);
  }

  .ce-footer--v1 .ce-footer__column-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 2rem;
    height: 2px;
    background: var(--mandant-secondary, #84BD00);
    border-radius: 1px;
  }

  .ce-footer--v1 .ce-footer__columns {
    gap: var(--min-space-xl, 2rem);
  }

  .ce-footer--v1 .ce-footer__address {
    font-style: normal;
    line-height: 1.7;
  }

  /* Einheitliche Schriftgröße im gesamten Footer */
  .ce-footer--v1 {
    font-size: 0.9375rem;
  }

  .ce-footer--v1 .ce-footer__links,
  .ce-footer--v1 .ce-footer__link,
  .ce-footer--v1 .ce-footer__address,
  .ce-footer--v1 .lotte-footer-a11y,
  .ce-footer--v1 .lotte-footer-app__label,
  .ce-footer--v1 p {
    font-size: inherit;
  }

  .ce-footer--v1 .ce-footer__bottom {
    margin-top: var(--min-space-xl, 2rem);
    padding-top: var(--min-space-md, 1rem);
    border-top-color: var(--lotte-white-15);
  }

  .ce-footer--v1 .lotte-footer-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--lotte-white-10);
    color: #fff;
    transition: background 0.2s ease;
  }

  .ce-footer--v1 .lotte-footer-social__link:hover {
    background: var(--mandant-secondary, #84BD00);
  }

  .ce-footer--v1 .lotte-footer-social {
    display: flex;
    gap: var(--min-space-sm, 0.5rem);
    margin-bottom: var(--min-space-md, 1rem);
  }

  .ce-footer--v1 .lotte-footer-app__label {
    font-weight: var(--min-font-weight-bold, 700);
    margin-bottom: var(--min-space-xs, 0.25rem);
  }

  .ce-footer--v1 .lotte-footer-app__links {
    display: flex;
    gap: var(--min-space-md, 1rem);
  }

  .ce-footer--v1 .lotte-footer-a11y {
    margin-top: var(--min-space-md, 1rem);
    display: flex;
    flex-direction: column;
    gap: var(--min-space-xs, 0.25rem);
  }

  .ce-footer--v1 .lotte-footer-a11y a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }

  /* =================================================================
   * SWIPER PAGINATION + NAVIGATION (V1 Ortsteile)
   * Dots unter den Slides, Pfeile links/rechts
   * ================================================================= */

  .ortsteile-swiper {
    position: relative;
    padding-bottom: 3rem;
  }

  /* Pagination: unter den Slides */
  .ortsteile-swiper .swiper-pagination {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
  }

  .ortsteile-swiper .swiper-pagination-bullet {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mandant-border, #ccc);
    opacity: 1;
    margin: 0 5px;
    cursor: pointer;
    transition: background var(--mandant-transition, 250ms ease);
  }

  .ortsteile-swiper .swiper-pagination-bullet-active {
    background: var(--mandant-primary, #145675);
  }

  /* Navigation Pfeile */
  .ortsteile-swiper .swiper-button-prev,
  .ortsteile-swiper .swiper-button-next {
    width: 40px;
    height: 40px;
    background: var(--mandant-bg, #fff);
    border: 1px solid var(--mandant-border, #ccc);
    border-radius: 50%;
    box-shadow: 0 2px 8px var(--lotte-shadow-10);
    color: var(--mandant-primary, #145675);
    transition: background var(--mandant-transition, 250ms ease),
                box-shadow var(--mandant-transition, 250ms ease);
    top: calc(50% - 1.5rem);
  }

  .ortsteile-swiper .swiper-button-prev:hover,
  .ortsteile-swiper .swiper-button-next:hover {
    background: var(--mandant-surface, #f5f8fa);
    box-shadow: 0 4px 12px var(--lotte-shadow-15);
  }

  .ortsteile-swiper .swiper-button-prev::after,
  .ortsteile-swiper .swiper-button-next::after {
    font-family: swiper-icons;
    font-size: 16px;
    font-weight: 700;
  }

  .ortsteile-swiper .swiper-button-prev {
    left: -8px;
  }

  .ortsteile-swiper .swiper-button-next {
    right: -8px;
  }

  /* Mobile: Pfeile ausblenden, nur Dots */
  @media (max-width: 767px) {
    .ortsteile-swiper .swiper-button-prev,
    .ortsteile-swiper .swiper-button-next {
      display: none;
    }
  }

  /* =================================================================
   * PARALLAX-DIVIDER: Vollbreites Bild als Sektions-Trenner
   * Ersetzt die Ortsteile-Section. 70vh Hoehe, Parallax-Effekt.
   * ================================================================= */

  .lotte-parallax-divider {
    height: 70vh;
    min-height: 400px;
    overflow: hidden;
    position: relative;
  }

  .lotte-parallax-divider img {
    width: 100%;
    height: 130%;
    object-fit: cover;
    position: absolute;
    top: -15%;
    left: 0;
  }

  /* JS setzt transform: translateY() fuer echten Parallax.
   * Fallback ohne JS: statisches Bild mit object-position */
  @media (prefers-reduced-motion: reduce) {
    .lotte-parallax-divider img {
      height: 100%;
      top: 0;
    }
  }

  /* Mobile: reduzierte Hoehe */
  @media (max-width: 639px) {
    .lotte-parallax-divider {
      height: 50vh;
      min-height: 280px;
    }
  }

  /* Ortsteile-Cards Styling (Legacy, wird nicht mehr genutzt) */
  .lotte-ortsteil-card {
    border-radius: var(--mandant-radius-md, 4px);
    overflow: hidden;
    background: var(--mandant-bg, #fff);
    border: 1px solid var(--mandant-border, #ccc);
  }

  .lotte-ortsteil-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }

  .lotte-ortsteil-card__content {
    padding: var(--min-space-md, 1rem);
  }

  .lotte-ortsteil-card__content h3 {
    font-size: 1.125rem;
    margin-bottom: var(--min-space-xs, 0.25rem);
  }

  .lotte-ortsteil-card__content p {
    font-size: 0.875rem;
    color: var(--mandant-muted, #4a4a4a);
  }

  /* =================================================================
   * FIX: ce-cards--grid Alias
   * landing.php nutzt ce-cards--grid (BEM-Modifier) statt
   * ce-cards__grid (BEM-Element). Alias fuer Grid-Layout.
   * ================================================================= */

  .ce-cards--grid {
    display: grid;
    grid-template-columns: repeat(var(--ce-cards-columns, 3), 1fr);
    gap: var(--ce-cards-gap, 2rem);
  }

  /* Responsive: 2 Spalten auf Tablet, 1 auf Mobile */
  @media (max-width: 1023px) {
    .ce-cards--grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 639px) {
    .ce-cards--grid {
      grid-template-columns: 1fr;
    }
  }

  /* =================================================================
   * FIX: ce-cards inside .container = kein doppeltes Padding
   * ce-cards hat eigenes padding + max-width, aber wenn es schon
   * in einem .container liegt, erzeugt das Doppel-Containment.
   * ================================================================= */

  .container :is(.ce-cards, .min-cards) {
    padding: 0;
    max-width: none;
    margin-inline: 0;
  }

  /* =================================================================
   * FIX: Styleguide sg-preview overflow
   * sg-preview Inhalte sollen sichtbar bleiben
   * ================================================================= */

  .sg-nav ul,
  .sg-nav ol {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
  }

  .sg-main li a {
    color: var(--mandant-accent, #145675);
    text-decoration: none;
  }

  .sg-main li a:hover {
    text-decoration: underline;
  }

  /* Styleguide Preview: Framework-Komponenten korrekt rendern */
  .sg-preview :is(.ce-cards, .min-cards),
  .sg-preview :is(.ce-hero, .min-hero),
  .sg-preview .ce-team,
  .sg-preview .ce-stats,
  .sg-preview .ce-timeline,
  .sg-preview .ce-testimonial {
    padding: var(--min-space-lg, 2rem);
    max-width: none;
    margin-inline: 0;
  }

  /* =================================================================
   * SIDEBAR-CARD: Kompakteres Padding, Titel-Styling
   * ================================================================= */

  .lotte-sidebar-card {
    padding: var(--min-space-md, 1rem);
  }

  .lotte-sidebar-card__title {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: var(--min-space-sm, 0.5rem);
    padding-bottom: var(--min-space-xs, 0.25rem);
    border-bottom: 2px solid var(--mandant-primary, #145675);
    color: var(--mandant-primary, #145675);
  }

  /* Öffnungszeiten-Tabelle in Sidebar */
  .lotte-hours-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
  }

  .lotte-hours-table td {
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--mandant-border, #dadce0);
    vertical-align: top;
  }

  .lotte-hours-table td:first-child {
    font-weight: 600;
    white-space: nowrap;
    padding-right: 1rem;
  }

  .lotte-hours-table tr:last-child td {
    border-bottom: none;
  }

  /* =================================================================
   * TABLE STYLING: ce-table
   * Saubere Tabellen fuer Ratsinformation, etc.
   * ================================================================= */

  .ce-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
  }

  .ce-table thead th {
    background: var(--mandant-surface, #f5f8fa);
    color: var(--mandant-primary, #145675);
    font-weight: 600;
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--mandant-primary, #145675);
  }

  .ce-table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--mandant-border, #dadce0);
    vertical-align: top;
  }

  .ce-table tbody tr:hover {
    background: color-mix(in srgb, var(--mandant-primary, #145675) 4%, transparent);
  }

  /* Responsive: horizontal scrollbar auf kleinen Screens */
  @media (max-width: 639px) {
    .ce-table {
      display: block;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
  }

  /* =================================================================
   * RELATED LINKS (Sidebar)
   * ================================================================= */

  .related-links {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }

  .related-links li {
    padding-left: 0;
  }

  .related-links li::before {
    display: none;
  }

  .related-links a {
    display: block;
    padding: 0.5rem 0;
    color: var(--mandant-primary, #145675);
    text-decoration: none;
    border-bottom: 1px solid var(--mandant-border, #dadce0);
    transition: color 0.2s ease;
  }

  .related-links a:hover {
    color: var(--mandant-secondary, #84BD00);
  }

  .related-links li:last-child a {
    border-bottom: none;
  }

  /* =================================================================
   * INFO-BOX
   * ================================================================= */

  .ce-info-box {
    background: var(--mandant-surface, #f5f8fa);
    border: 1px solid var(--mandant-border, #dadce0);
    border-radius: var(--mandant-radius-md, 0.5rem);
    padding: var(--min-space-lg, 2rem);
    margin: var(--min-space-lg, 2rem) 0;
  }

  .ce-info-box--info {
    border-left: 4px solid var(--mandant-primary, #145675);
  }

  .ce-info-box h2,
  .ce-info-box h3 {
    margin-top: 0;
    color: var(--mandant-primary, #145675);
  }

  /* =================================================================
   * LEAD TEXT
   * ================================================================= */

  .ce-lead {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--mandant-muted, #5a6a7a);
    margin-bottom: var(--min-space-lg, 2rem);
  }

  /* =================================================================
   * TEXT-MUTED / SMALL helpers
   * ================================================================= */

  .text-muted {
    color: var(--mandant-muted, #5a6a7a);
  }

  .small {
    font-size: 0.875rem;
  }


  /* =================================================================
   * DARK MODE – V1 "Klarheit"
   * Kühles Dunkelblau, seriös wie eine Behörden-Seite es verlangt.
   * Aktivierung: prefers-color-scheme:dark ODER [data-theme="dark"]
   * ================================================================= */

  /* Smooth Theme-Switch-Transition auf Body */
  body {
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  /* Gemeinsamer Dark-Mode-Block: systemseitig + manuell */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --mandant-bg-dark:      #0F1419;
      --mandant-text-dark:    #E8ECF0;
      --mandant-surface-dark: #1C2128;
      --mandant-border-dark:  #2D3640;
      --mandant-muted-dark:   #8B949E;
    }
  }

  [data-theme="dark"] {
    --mandant-bg-dark:      #0F1419;
    --mandant-text-dark:    #E8ECF0;
    --mandant-surface-dark: #1C2128;
    --mandant-border-dark:  #2D3640;
    --mandant-muted-dark:   #8B949E;
  }

  /* === Komponenten-Overrides: hardcodierte Farben korrigieren === */

  /* A11y-Toolbar */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) 
    :root:not([data-theme="light"]) 
    :root:not([data-theme="light"]) .lotte-a11y-toolbar__btn:hover {
      background: color-mix(in srgb, var(--mandant-surface-dark, #1C2128) 85%, white);
      border-color: var(--mandant-border-dark, #2D3640);
    }
  }

  [data-theme="dark"] 

  [data-theme="dark"] 

  [data-theme="dark"] .lotte-a11y-toolbar__btn:hover {
    background: color-mix(in srgb, var(--mandant-surface-dark, #1C2128) 85%, white);
    border-color: var(--mandant-border-dark, #2D3640);
  }

  /* Schnellzugriff-Karten */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lotte-schnellzugriffe__card {
      background: var(--mandant-surface-dark, #1C2128);
      border-color: var(--mandant-border-dark, #2D3640);
    }
    :root:not([data-theme="light"]) .lotte-schnellzugriffe__label {
      color: var(--mandant-text-dark, #E8ECF0);
    }
  }

  [data-theme="dark"] .lotte-schnellzugriffe__card {
    background: var(--mandant-surface-dark, #1C2128);
    border-color: var(--mandant-border-dark, #2D3640);
  }

  [data-theme="dark"] .lotte-schnellzugriffe__label {
    color: var(--mandant-text-dark, #E8ECF0);
  }

  /* CTA-Bar */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lotte-cta-bar {
      background: var(--mandant-surface-dark, #1C2128);
      border-top-color: var(--mandant-border-dark, #2D3640);
      border-bottom-color: var(--mandant-border-dark, #2D3640);
    }
    :root:not([data-theme="light"]) .lotte-cta-bar__text {
      color: var(--mandant-text-dark, #E8ECF0);
    }
  }

  [data-theme="dark"] .lotte-cta-bar {
    background: var(--mandant-surface-dark, #1C2128);
    border-top-color: var(--mandant-border-dark, #2D3640);
    border-bottom-color: var(--mandant-border-dark, #2D3640);
  }

  [data-theme="dark"] .lotte-cta-bar__text {
    color: var(--mandant-text-dark, #E8ECF0);
  }

  /* Sections: Surface/Alt */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lotte-section--surface,
    :root:not([data-theme="light"]) .lotte-section--alt {
      background: var(--mandant-surface-dark, #1C2128);
    }
  }

  [data-theme="dark"] .lotte-section--surface,
  [data-theme="dark"] .lotte-section--alt {
    background: var(--mandant-surface-dark, #1C2128);
  }

  /* Tabs */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lotte-tabs {
      border-bottom-color: var(--mandant-border-dark, #2D3640);
    }
    :root:not([data-theme="light"]) .lotte-tabs__tab {
      color: var(--mandant-muted-dark, #8B949E);
      background: transparent;
    }
  }

  [data-theme="dark"] .lotte-tabs {
    border-bottom-color: var(--mandant-border-dark, #2D3640);
  }

  [data-theme="dark"] .lotte-tabs__tab {
    color: var(--mandant-muted-dark, #8B949E);
    background: transparent;
  }

  /* Bekanntmachungen */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lotte-bekanntmachung {
      border-bottom-color: var(--mandant-border-dark, #2D3640);
    }
    :root:not([data-theme="light"]) .lotte-bekanntmachung__content h3 a {
      color: var(--mandant-text-dark, #E8ECF0);
    }
  }

  [data-theme="dark"] .lotte-bekanntmachung {
    border-bottom-color: var(--mandant-border-dark, #2D3640);
  }

  [data-theme="dark"] .lotte-bekanntmachung__content h3 a {
    color: var(--mandant-text-dark, #E8ECF0);
  }

  /* Hero-Suchbox: Input-Hintergrund */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ce-hero__search input {
      background: var(--lotte-white-15);
      color: #ffffff;
    }
    :root:not([data-theme="light"]) .ce-hero__search input:focus {
      background: var(--lotte-white-22);
    }
    :root:not([data-theme="light"]) .ce-hero__search input::placeholder {
      color: var(--lotte-white-60);
    }
  }

  [data-theme="dark"] .ce-hero__search input {
    background: var(--lotte-white-15);
    color: #ffffff;
  }

  [data-theme="dark"] .ce-hero__search input:focus {
    background: var(--lotte-white-22);
  }

  [data-theme="dark"] .ce-hero__search input::placeholder {
    color: var(--lotte-white-60);
  }

  /* Ortsteil-Card */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lotte-ortsteil-card {
      background: var(--mandant-surface-dark, #1C2128);
      border-color: var(--mandant-border-dark, #2D3640);
    }
  }

  [data-theme="dark"] .lotte-ortsteil-card {
    background: var(--mandant-surface-dark, #1C2128);
    border-color: var(--mandant-border-dark, #2D3640);
  }

  /* Swiper-Buttons */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ortsteile-swiper .swiper-button-prev,
    :root:not([data-theme="light"]) .ortsteile-swiper .swiper-button-next {
      background: var(--mandant-surface-dark, #1C2128);
      border-color: var(--mandant-border-dark, #2D3640);
    }
    :root:not([data-theme="light"]) .ortsteile-swiper .swiper-button-prev:hover,
    :root:not([data-theme="light"]) .ortsteile-swiper .swiper-button-next:hover {
      background: color-mix(in srgb, var(--mandant-surface-dark, #1C2128) 75%, white);
    }
    :root:not([data-theme="light"]) .ortsteile-swiper .swiper-pagination-bullet {
      background: var(--mandant-border-dark, #2D3640);
    }
  }

  [data-theme="dark"] .ortsteile-swiper .swiper-button-prev,
  [data-theme="dark"] .ortsteile-swiper .swiper-button-next {
    background: var(--mandant-surface-dark, #1C2128);
    border-color: var(--mandant-border-dark, #2D3640);
  }

  [data-theme="dark"] .ortsteile-swiper .swiper-button-prev:hover,
  [data-theme="dark"] .ortsteile-swiper .swiper-button-next:hover {
    background: color-mix(in srgb, var(--mandant-surface-dark, #1C2128) 75%, white);
  }

  [data-theme="dark"] .ortsteile-swiper .swiper-pagination-bullet {
    background: var(--mandant-border-dark, #2D3640);
  }

  /* Sidebar-Card */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lotte-hours-table td {
      border-bottom-color: var(--mandant-border-dark, #2D3640);
    }
    :root:not([data-theme="light"]) .ce-table thead th {
      background: var(--mandant-surface-dark, #1C2128);
    }
    :root:not([data-theme="light"]) .ce-table tbody td {
      border-bottom-color: var(--mandant-border-dark, #2D3640);
    }
    :root:not([data-theme="light"]) .ce-table tbody tr:hover {
      background: color-mix(in srgb, var(--mandant-surface-dark, #1C2128) 80%, white);
    }
    :root:not([data-theme="light"]) .related-links a {
      border-bottom-color: var(--mandant-border-dark, #2D3640);
    }
    :root:not([data-theme="light"]) .ce-info-box {
      background: var(--mandant-surface-dark, #1C2128);
      border-color: var(--mandant-border-dark, #2D3640);
    }
  }

  [data-theme="dark"] .lotte-hours-table td {
    border-bottom-color: var(--mandant-border-dark, #2D3640);
  }

  [data-theme="dark"] .ce-table thead th {
    background: var(--mandant-surface-dark, #1C2128);
  }

  [data-theme="dark"] .ce-table tbody td {
    border-bottom-color: var(--mandant-border-dark, #2D3640);
  }

  [data-theme="dark"] .ce-table tbody tr:hover {
    background: color-mix(in srgb, var(--mandant-surface-dark, #1C2128) 80%, white);
  }

  [data-theme="dark"] .related-links a {
    border-bottom-color: var(--mandant-border-dark, #2D3640);
  }

  [data-theme="dark"] .ce-info-box {
    background: var(--mandant-surface-dark, #1C2128);
    border-color: var(--mandant-border-dark, #2D3640);
  }


  /* =================================================================
   * DARK MODE – V1 – HEADER (ce-nav)
   * Navigation braucht im Dark Mode: Hintergrund, Borders, Link-Farben
   * und Hamburger-Balken-Farbe. Das Dropdown ebenfalls.
   * ================================================================= */

  /* ce-nav: Haupt-Wrapper */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ce-nav {
      background: var(--mandant-bg-dark, #0F1419);
      border-bottom: 1px solid var(--mandant-border-dark, #2D3640);
      box-shadow: 0 2px 12px var(--lotte-shadow-40);
    }
    :root:not([data-theme="light"]) .ce-nav__inner {
      background: var(--mandant-bg-dark, #0F1419);
    }
    :root:not([data-theme="light"]) .ce-nav__link {
      color: var(--mandant-text-dark, #E8ECF0);
    }
    :root:not([data-theme="light"]) .ce-nav__link:hover {
      background: color-mix(in srgb, var(--mandant-surface-dark, #1C2128) 80%, white);
      color: var(--mandant-text-dark, #E8ECF0);
    }
    :root:not([data-theme="light"]) .ce-nav__link.is-active {
      background: var(--mandant-primary, #145675);
      color: #ffffff;
    }
    :root:not([data-theme="light"]) .ce-nav__toggle-bar {
      background: var(--mandant-text-dark, #E8ECF0);
    }
    :root:not([data-theme="light"]) .ce-nav__sub {
      background: var(--mandant-surface-dark, #1C2128);
      border: 1px solid var(--mandant-border-dark, #2D3640);
      box-shadow: 0 4px 16px var(--lotte-shadow-40);
    }
    :root:not([data-theme="light"]) .ce-nav__sub .ce-nav__link {
      color: var(--mandant-text-dark, #E8ECF0);
    }
    :root:not([data-theme="light"]) .ce-nav__sub .ce-nav__link:hover {
      background: color-mix(in srgb, var(--mandant-bg-dark, #0F1419) 60%, white);
    }
    :root:not([data-theme="light"]) .ce-nav__sub .ce-nav__link.is-active {
      background: var(--mandant-primary, #145675);
      color: #ffffff;
    }
  }

  [data-theme="dark"] .ce-nav {
    background: var(--mandant-bg-dark, #0F1419);
    border-bottom: 1px solid var(--mandant-border-dark, #2D3640);
    box-shadow: 0 2px 12px var(--lotte-shadow-40);
  }

  [data-theme="dark"] .ce-nav__inner {
    background: var(--mandant-bg-dark, #0F1419);
  }

  [data-theme="dark"] .ce-nav__link {
    color: var(--mandant-text-dark, #E8ECF0);
  }

  [data-theme="dark"] .ce-nav__link:hover {
    background: color-mix(in srgb, var(--mandant-surface-dark, #1C2128) 80%, white);
    color: var(--mandant-text-dark, #E8ECF0);
  }

  [data-theme="dark"] .ce-nav__link.is-active {
    background: var(--mandant-primary, #145675);
    color: #ffffff;
  }

  [data-theme="dark"] .ce-nav__toggle-bar {
    background: var(--mandant-text-dark, #E8ECF0);
  }

  [data-theme="dark"] .ce-nav__sub {
    background: var(--mandant-surface-dark, #1C2128);
    border: 1px solid var(--mandant-border-dark, #2D3640);
    box-shadow: 0 4px 16px var(--lotte-shadow-40);
  }

  [data-theme="dark"] .ce-nav__sub .ce-nav__link {
    color: var(--mandant-text-dark, #E8ECF0);
  }

  [data-theme="dark"] .ce-nav__sub .ce-nav__link:hover {
    background: color-mix(in srgb, var(--mandant-bg-dark, #0F1419) 60%, white);
  }

  [data-theme="dark"] .ce-nav__sub .ce-nav__link.is-active {
    background: var(--mandant-primary, #145675);
    color: #ffffff;
  }

  /* =================================================================
   * DARK MODE – V1 – FOOTER (ce-footer)
   * Footer V1 hat --ce-footer-bg basierend auf --mandant-primary.
   * Im Dark Mode: Dunklere Surface statt Primärfarbe, heller Text.
   * SVG-Icons erben color via currentColor – Eltern reicht.
   * ================================================================= */

  /* ce-footer: Haupt-Wrapper */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ce-footer {
      background: var(--mandant-surface-dark, #1C2128);
      color: var(--mandant-text-dark, #E8ECF0);
    }
    /* Logo im Dark Mode: weiß bleibt weiß (Logo ist bereits weiß im V1 Footer) */
    :root:not([data-theme="light"]) .ce-footer__logo {
      filter: brightness(0) invert(1);
      opacity: 0.9;
    }
    :root:not([data-theme="light"]) .ce-footer__address {
      color: var(--mandant-text-dark, #E8ECF0);
    }
    :root:not([data-theme="light"]) .ce-footer__link {
      color: var(--mandant-text-dark, #E8ECF0);
    }
    :root:not([data-theme="light"]) .ce-footer__link:hover {
      color: var(--mandant-secondary, #84BD00);
    }
    :root:not([data-theme="light"]) .ce-footer__column-title {
      color: var(--mandant-text-dark, #E8ECF0);
    }
    :root:not([data-theme="light"]) .ce-footer__bottom {
      background: color-mix(in srgb, var(--mandant-bg-dark, #0F1419) 80%, transparent);
      border-top: 1px solid var(--mandant-border-dark, #2D3640);
    }
    :root:not([data-theme="light"]) .ce-footer__copyright {
      color: var(--mandant-muted-dark, #8B949E);
    }
    :root:not([data-theme="light"]) .ce-footer__legal .ce-footer__link {
      color: var(--mandant-muted-dark, #8B949E);
    }
    :root:not([data-theme="light"]) .ce-footer__legal .ce-footer__link:hover {
      color: var(--mandant-text-dark, #E8ECF0);
    }
    /* Social-Icons */
    :root:not([data-theme="light"]) .lotte-footer-social__link {
      color: var(--mandant-text-dark, #E8ECF0);
      border-color: var(--mandant-border-dark, #2D3640);
    }
    :root:not([data-theme="light"]) .lotte-footer-social__link:hover {
      background: var(--mandant-secondary, #84BD00);
      border-color: var(--mandant-secondary, #84BD00);
      color: #000;
    }
    /* App-Bereich */
    :root:not([data-theme="light"]) .lotte-footer-app {
      background: color-mix(in srgb, var(--mandant-bg-dark, #0F1419) 60%, transparent);
      color: var(--mandant-text-dark, #E8ECF0);
    }
    /* Weather-Widget */
    :root:not([data-theme="light"]) .lotte-footer-weather {
      color: var(--mandant-muted-dark, #8B949E);
    }
  }

  [data-theme="dark"] .ce-footer {
    background: var(--mandant-surface-dark, #1C2128);
    color: var(--mandant-text-dark, #E8ECF0);
  }

  [data-theme="dark"] .ce-footer__logo {
    filter: brightness(0) invert(1);
    opacity: 0.9;
  }

  [data-theme="dark"] .ce-footer__address {
    color: var(--mandant-text-dark, #E8ECF0);
  }

  [data-theme="dark"] .ce-footer__link {
    color: var(--mandant-text-dark, #E8ECF0);
  }

  [data-theme="dark"] .ce-footer__link:hover {
    color: var(--mandant-secondary, #84BD00);
  }

  [data-theme="dark"] .ce-footer__column-title {
    color: var(--mandant-text-dark, #E8ECF0);
  }

  [data-theme="dark"] .ce-footer__bottom {
    background: color-mix(in srgb, var(--mandant-bg-dark, #0F1419) 80%, transparent);
    border-top: 1px solid var(--mandant-border-dark, #2D3640);
  }

  [data-theme="dark"] .ce-footer__copyright {
    color: var(--mandant-muted-dark, #8B949E);
  }

  [data-theme="dark"] .ce-footer__legal .ce-footer__link {
    color: var(--mandant-muted-dark, #8B949E);
  }

  [data-theme="dark"] .ce-footer__legal .ce-footer__link:hover {
    color: var(--mandant-text-dark, #E8ECF0);
  }

  [data-theme="dark"] .lotte-footer-social__link {
    color: var(--mandant-text-dark, #E8ECF0);
    border-color: var(--mandant-border-dark, #2D3640);
  }

  [data-theme="dark"] .lotte-footer-social__link:hover {
    background: var(--mandant-secondary, #84BD00);
    border-color: var(--mandant-secondary, #84BD00);
    color: #000;
  }

  [data-theme="dark"] .lotte-footer-app {
    background: color-mix(in srgb, var(--mandant-bg-dark, #0F1419) 60%, transparent);
    color: var(--mandant-text-dark, #E8ECF0);
  }

  [data-theme="dark"] .lotte-footer-weather {
    color: var(--mandant-muted-dark, #8B949E);
  }

  /* =================================================================
   * DARK MODE – BACK-TO-TOP BUTTON
   * Primärfarbe bleibt, aber Hover dunkler damit er sich abhebt.
   * ================================================================= */

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .back-to-top {
      background: var(--mandant-primary, #145675);
      color: #ffffff;
      box-shadow: 0 2px 12px var(--lotte-shadow-50);
    }
    :root:not([data-theme="light"]) .back-to-top:hover {
      background: color-mix(in srgb, var(--mandant-primary, #145675) 80%, white);
    }
  }

  [data-theme="dark"] .back-to-top {
    background: var(--mandant-primary, #145675);
    color: #ffffff;
    box-shadow: 0 2px 12px var(--lotte-shadow-50);
  }

  [data-theme="dark"] .back-to-top:hover {
    background: color-mix(in srgb, var(--mandant-primary, #145675) 80%, white);
  }

  /* =================================================================
   * DARK MODE – SKIP-LINK
   * Skip-Link ist ein Accessibility-Element – er muss auch im Dark
   * Mode kontraststark und sichtbar sein (WCAG 2.2 AA).
   * ================================================================= */

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) 
  }

  [data-theme="dark"] 

  /* =================================================================
   * DARK MODE – CHATBOT (falls aktiv)
   * .lotte-chatbot ist fixed unten rechts.
   * ================================================================= */

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lotte-chatbot__trigger {
      background: var(--mandant-primary, #145675);
      color: #ffffff;
      box-shadow: 0 4px 16px var(--lotte-shadow-50);
    }
    :root:not([data-theme="light"]) .lotte-chatbot__panel {
      background: var(--mandant-surface-dark, #1C2128);
      border: 1px solid var(--mandant-border-dark, #2D3640);
      box-shadow: 0 8px 32px var(--lotte-shadow-50);
    }
    :root:not([data-theme="light"]) .lotte-chatbot__header {
      background: var(--mandant-primary, #145675);
      color: #ffffff;
    }
    :root:not([data-theme="light"]) .lotte-chatbot__close {
      color: #ffffff;
    }
    :root:not([data-theme="light"]) .lotte-chatbot__body {
      color: var(--mandant-text-dark, #E8ECF0);
    }
  }

  [data-theme="dark"] .lotte-chatbot__trigger {
    background: var(--mandant-primary, #145675);
    color: #ffffff;
    box-shadow: 0 4px 16px var(--lotte-shadow-50);
  }

  [data-theme="dark"] .lotte-chatbot__panel {
    background: var(--mandant-surface-dark, #1C2128);
    border: 1px solid var(--mandant-border-dark, #2D3640);
    box-shadow: 0 8px 32px var(--lotte-shadow-50);
  }

  [data-theme="dark"] .lotte-chatbot__header {
    background: var(--mandant-primary, #145675);
    color: #ffffff;
  }

  [data-theme="dark"] .lotte-chatbot__close {
    color: #ffffff;
  }

  [data-theme="dark"] .lotte-chatbot__body {
    color: var(--mandant-text-dark, #E8ECF0);
  }

  /* =================================================================
   * DARK MODE – SMOOTH TRANSITIONS fuer alle Farbwechsel
   * border-color ebenfalls mit Transition damit Borders nicht
   * abrupt wechseln. Gilt nur fuer interaktive Elemente.
   * ================================================================= */

  .ce-nav,
  .ce-nav__inner,
  .ce-nav__link,
  .ce-nav__sub,
  .ce-footer,
  .ce-footer__link,
  .ce-footer__column-title,
  .ce-footer__bottom,
  .ce-footer__copyright,
  .lotte-footer-social__link,
  .lotte-chatbot__trigger,
  .lotte-chatbot__panel,
  .back-to-top {
    transition:
      background-color 0.3s ease,
      color 0.3s ease,
      border-color 0.3s ease,
      box-shadow 0.3s ease;
  }



/* ==========================================================================
 * TEIL 2: CUSTOM KOMPONENTEN (aus custom.css)
 * Gem-lotte-spezifische Komponenten, die NICHT im ce-* Framework existieren
 * Unterseiten: Page-Header, Breadcrumb, Content-Layout, Sidebar, etc.
 * ========================================================================== */


/* ==========================================================================
 * 1. PAGE HEADER (Unterseiten mit Foto-Header)
 * Verwendet auf: news.php, events.php, rubrik.php, unterseite.php,
 *   themen.php, stellenangebote.php, formulare.php, bekanntmachungen.php,
 *   veranstaltungen.php, maengel.php, termin.php, ratsinformation.php
 * ========================================================================== */

.page-header {
  position: relative;
  background: var(--min-color-surface);
  padding: var(--min-space-xl) 0 var(--min-space-lg);
  overflow: hidden;
}

.page-header--photo {
  position: relative;
  padding: var(--min-space-2xl) 0 var(--min-space-lg);
  color: var(--min-color-text);
}

.page-header__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.12;
  pointer-events: none;
}

.page-header h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: var(--min-font-weight-bold);
  line-height: var(--min-line-height-heading);
  margin-bottom: var(--min-space-sm);
  position: relative;
}

.page-header__subtitle {
  font-size: var(--min-font-size-base);
  color: var(--min-color-muted);
  max-width: 42rem;
  position: relative;
}

.page-header .container {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
 * 2. BREADCRUMB
 * Verwendet auf: allen Unterseiten
 * ========================================================================== */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--min-space-xs);
  font-size: 0.875rem;
  margin-bottom: var(--min-space-md);
}

.breadcrumb__link {
  color: var(--min-color-primary);
  text-decoration: none;
  transition: color var(--min-transition);
}

.breadcrumb__link:hover {
  text-decoration: underline;
}

.breadcrumb__sep {
  color: var(--min-color-muted);
  user-select: none;
}

.breadcrumb__current {
  color: var(--min-color-muted);
}

/* ==========================================================================
 * 3. CONTENT LAYOUT (2-Spalter mit Sidebar)
 * Verwendet auf: news.php, unterseite.php, themen.php, stellenangebote.php,
 *   formulare.php, bekanntmachungen.php, veranstaltungen.php, maengel.php
 * ========================================================================== */

.content-layout,
.ce-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--min-space-xl);
}

@media (min-width: 768px) {
  .content-layout,
  .ce-two-col {
    grid-template-columns: 1fr 320px;
  }
}

.content-main,
.main-content,
.ce-two-col__main {
  min-width: 0;
}

/* ==========================================================================
 * 4. SIDEBAR
 * Verwendet auf: news.php, unterseite.php, themen.php, stellenangebote.php,
 *   formulare.php, bekanntmachungen.php, veranstaltungen.php, maengel.php
 * ========================================================================== */

.sidebar,
.lotte-sidebar,
.content-sidebar,
.ce-two-col__aside {
  display: flex;
  flex-direction: column;
  gap: var(--min-space-lg);
}

/* -- Sidebar Section (news.php, themen.php) -- */
.sidebar-section,
.lotte-sidebar__section {
  background: var(--min-color-surface);
  padding: var(--min-space-lg);
  border-radius: var(--min-radius-md);
}

.sidebar-section__title,
.lotte-sidebar__title {
  font-size: 1rem;
  font-weight: var(--min-font-weight-bold);
  margin-bottom: var(--min-space-md);
  padding-bottom: var(--min-space-sm);
  border-bottom: 2px solid var(--min-color-primary);
}

/* -- Sidebar Card (unterseite.php, stellenangebote.php, etc.) -- */
.sidebar-card,
.lotte-sidebar-card {
  background: var(--min-color-surface);
  padding: var(--min-space-lg);
  border-radius: var(--min-radius-md);
}

.sidebar-card__title {
  font-size: 1rem;
  font-weight: var(--min-font-weight-bold);
  margin-bottom: var(--min-space-md);
  padding-bottom: var(--min-space-sm);
  border-bottom: 2px solid var(--min-color-primary);
}

/* -- Sidebar Navigation -- */
.sidebar-nav,
.lotte-sidebar-nav {
  display: flex;
  flex-direction: column;
}

.sidebar-nav a,
.lotte-sidebar-nav a {
  display: block;
  padding: var(--min-space-sm) 0;
  color: var(--min-color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--min-color-border);
  transition: color var(--min-transition), padding-left var(--min-transition);
}

.sidebar-nav a:hover,
.sidebar-nav a.active,
.lotte-sidebar-nav a:hover,
.lotte-sidebar-nav a.active {
  color: var(--min-color-primary);
  padding-left: var(--min-space-sm);
}

.sidebar-nav a.active,
.lotte-sidebar-nav a.active {
  font-weight: var(--min-font-weight-bold);
}

.sidebar-nav a:last-child,
.lotte-sidebar-nav a:last-child {
  border-bottom: none;
}

/* -- Sidebar Hint -- */
.sidebar-hint,
.lotte-sidebar__hint {
  font-size: 0.875rem;
  color: var(--min-color-muted);
  margin-top: var(--min-space-md);
}

/* -- Related Links -- */
.related-links {
  display: flex;
  flex-direction: column;
}

.related-links li {
  border-bottom: 1px solid var(--min-color-border);
}

.related-links li:last-child {
  border-bottom: none;
}

.related-links a {
  display: block;
  padding: var(--min-space-sm) 0;
  color: var(--min-color-primary);
  text-decoration: none;
  transition: padding-left var(--min-transition);
}

.related-links a:hover {
  padding-left: var(--min-space-sm);
  text-decoration: underline;
}

/* ==========================================================================
 * 5. NEWS COMPONENTS (Startseite + news.php)
 * ========================================================================== */

/* -- Featured News Layout (index.php) -- */
.news-featured-layout,
.lotte-news-featured-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--min-space-lg);
}

@media (min-width: 768px) {
  .news-featured-layout,
  .lotte-news-featured-layout {
    grid-template-columns: 1fr 1fr;
  }
}

/* -- Featured News Card (index.php) -- */
.news-featured,
.lotte-news-featured {
  position: relative;
  border-radius: var(--min-radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
}

.news-featured img,
.lotte-news-featured img,
.lotte-news-featured__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-featured__overlay,
.lotte-news-featured__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--min-space-lg);
  background: linear-gradient(to top, var(--lotte-overlay-dark-strong) 0%, transparent 60%);
  color: white;
}

.news-featured__category,
.lotte-news-featured__category {
  display: inline-block;
  background: var(--min-color-secondary);
  color: white;
  padding: 2px 0.75rem;
  border-radius: var(--min-radius-full);
  font-size: 0.875rem;
  font-weight: var(--min-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--min-space-sm);
  width: fit-content;
}

.news-featured__title,
.lotte-news-featured__title {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: var(--min-line-height-heading);
  margin-bottom: var(--min-space-xs);
  text-shadow: 0 1px 4px var(--lotte-textshadow-dark);
}

.news-featured__title a,
.lotte-news-featured__title a {
  color: white;
  text-decoration: none;
}

.news-featured__title a:hover,
.lotte-news-featured__title a:hover {
  text-decoration: underline;
}

.news-featured__date,
.lotte-news-featured__date {
  font-size: 0.875rem;
  opacity: 0.85;
}

/* -- News Stack (index.php - rechte Spalte) -- */
.news-stack,
.lotte-news-stack {
  display: flex;
  flex-direction: column;
  gap: var(--min-space-md);
}

/* -- Compact News (index.php) -- */
.news-compact,
.lotte-news-compact {
  display: flex;
  gap: var(--min-space-md);
  padding-bottom: var(--min-space-md);
  border-bottom: 1px solid var(--min-color-border);
}

.news-compact:last-child,
.lotte-news-compact:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.news-compact__image,
.lotte-news-compact__image {
  flex-shrink: 0;
  width: 100px;
  height: 75px;
  border-radius: var(--min-radius-sm);
  overflow: hidden;
}

.news-compact__image img,
.lotte-news-compact__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-compact__content,
.lotte-news-compact__content {
  min-width: 0;
}

.news-compact__date,
.lotte-news-compact__date {
  font-size: 0.875rem;
  color: var(--min-color-muted);
  display: block;
  margin-bottom: 2px;
}

.news-compact__title,
.lotte-news-compact__title {
  font-size: 0.9375rem;
  line-height: var(--min-line-height-heading);
  margin-bottom: 4px;
}

.news-compact__title a,
.lotte-news-compact__title a {
  color: var(--min-color-text);
  text-decoration: none;
}

.news-compact__title a:hover,
.lotte-news-compact__title a:hover {
  color: var(--min-color-primary);
}

.news-compact__excerpt,
.lotte-news-compact__excerpt {
  font-size: 0.875rem;
  color: var(--min-color-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -- News List (news.php) -- */
.news-list,
.lotte-news-list {
  display: flex;
  flex-direction: column;
  gap: var(--min-space-lg);
}

.news-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--min-space-md);
  padding-bottom: var(--min-space-lg);
  border-bottom: 1px solid var(--min-color-border);
}

@media (min-width: 480px) {
  .news-item {
    grid-template-columns: 180px 1fr;
  }
}

.news-item:last-child {
  border-bottom: none;
}

.news-item__image {
  border-radius: var(--min-radius-md);
  overflow: hidden;
  aspect-ratio: 16/10;
}

.news-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-item__date {
  font-size: 0.875rem;
  color: var(--min-color-muted);
}

.news-item__title {
  font-size: 1.125rem;
  line-height: var(--min-line-height-heading);
  margin-bottom: var(--min-space-xs);
}

.news-item__title a {
  color: var(--min-color-text);
  text-decoration: none;
}

.news-item__title a:hover {
  color: var(--min-color-primary);
}

.news-item__excerpt {
  font-size: 0.9375rem;
  color: var(--min-color-muted);
  margin-bottom: var(--min-space-sm);
}

/* -- News Card (stellenangebote.php, bekanntmachungen.php, veranstaltungen.php) -- */
.news-card h3 {
  margin-bottom: var(--min-space-sm);
}

.news-card p {
  margin-bottom: var(--min-space-sm);
}

/* ==========================================================================
 * 6. EVENTS TIMELINE (index.php)
 * ========================================================================== */

.events-timeline,
.lotte-events-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.event-timeline-item,
.lotte-event-item {
  display: flex;
  gap: var(--min-space-lg);
  padding: var(--min-space-md) 0;
  border-bottom: 1px solid var(--min-color-border);
  transition: background var(--min-transition);
}

.event-timeline-item:last-child,
.lotte-event-item:last-child {
  border-bottom: none;
}

.event-timeline-item:hover,
.lotte-event-item:hover {
  background: var(--min-color-surface);
  margin-inline: calc(-1 * var(--min-space-md));
  padding-inline: var(--min-space-md);
  border-radius: var(--min-radius-md);
}

.event-timeline-item__date,
.lotte-event-item__date {
  flex-shrink: 0;
  width: 72px;
  text-align: center;
  background: var(--min-color-primary);
  color: white;
  border-radius: var(--min-radius-md);
  padding: var(--min-space-sm) var(--min-space-sm);
  line-height: 1.2;
  align-self: flex-start;
}

.event-timeline-item__date strong,
.lotte-event-item__day {
  display: block;
  font-size: 1rem;
}

.event-timeline-item__date span,
.lotte-event-item__month {
  display: block;
  font-size: 0.875rem;
  opacity: 0.85;
}

.event-timeline-item__content,
.lotte-event-item__content {
  min-width: 0;
}

.event-timeline-item__title,
.lotte-event-item__title {
  font-size: 1.0625rem;
  line-height: var(--min-line-height-heading);
  margin-bottom: 4px;
}

.event-timeline-item__title a,
.lotte-event-item__title a {
  color: var(--min-color-text);
  text-decoration: none;
}

.event-timeline-item__title a:hover,
.lotte-event-item__title a:hover {
  color: var(--min-color-primary);
}

.event-timeline-item__meta,
.lotte-event-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--min-space-md);
  font-size: 0.875rem;
  color: var(--min-color-muted);
}

/* ==========================================================================
 * 7. TOPIC CARDS (index.php - Themen im Fokus + landing.php)
 * Overlay-Karten mit Bild und Text
 * ========================================================================== */

.topic-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--min-space-md);
}

@media (min-width: 640px) {
  .topic-cards {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

.topic-card,
.lotte-topic-card {
  position: relative;
  border-radius: var(--min-radius-md);
  overflow: hidden;
  aspect-ratio: 16/10;
  cursor: pointer;
}

.topic-card img,
.lotte-topic-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.topic-card:hover img,
.lotte-topic-card:hover img {
  transform: scale(1.04);
}

.topic-card__overlay,
.lotte-topic-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--min-space-lg);
  background: linear-gradient(to top, var(--lotte-overlay-dark) 0%, transparent 70%);
  color: white;
}

.topic-card__tag,
.lotte-topic-card__tag {
  display: inline-block;
  background: var(--min-color-secondary);
  color: white;
  padding: 2px 0.625rem;
  border-radius: var(--min-radius-full);
  font-size: 0.875rem;
  font-weight: var(--min-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--min-space-xs);
  width: fit-content;
}

.topic-card__title,
.ce-cards__card-title {
  font-size: 1.125rem;
  line-height: var(--min-line-height-heading);
  text-shadow: 0 1px 4px var(--lotte-textshadow-dark);
}

.topic-card__title a,
.ce-cards__card-title a {
  color: white;
  text-decoration: none;
}

.topic-card__title a:hover,
.ce-cards__card-title a:hover {
  text-decoration: underline;
}

.topic-card__overlay p,
.lotte-topic-card__overlay p {
  font-size: 0.875rem;
  opacity: 0.9;
  margin-top: var(--min-space-xs);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
 * 8. ORTSTEIL CARD (index.php - Swiper)
 * ========================================================================== */

.ortsteil-card,
.lotte-ortsteil-card {
  position: relative;
  border-radius: var(--min-radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
}

.ortsteil-card img,
.lotte-ortsteil-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ortsteil-card__content,
.lotte-ortsteil-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--min-space-md) var(--min-space-lg);
  background: linear-gradient(to top, var(--lotte-overlay-dark) 0%, transparent 100%);
  color: white;
}

.ortsteil-card__content h3,
.lotte-ortsteil-card__content h3 {
  font-size: 1.125rem;
  margin-bottom: 2px;
  text-shadow: 0 1px 4px var(--lotte-textshadow-dark);
}

.ortsteil-card__content p,
.lotte-ortsteil-card__content p {
  font-size: 0.875rem;
  opacity: 0.85;
}

/* ==========================================================================
 * 9. RUBRIK CARDS (rubrik.php, landing.php)
 * Kategorie-Kacheln mit Icon + Links
 * ========================================================================== */

.rubrik-grid,
.lotte-rubrik-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--min-space-md);
}

@media (min-width: 480px) {
  .rubrik-grid,
  .lotte-rubrik-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .rubrik-grid,
  .lotte-rubrik-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.rubrik-card,
.lotte-rubrik-card {
  background: var(--min-color-surface);
  border: 1px solid var(--min-color-border);
  border-radius: var(--min-radius-md);
  padding: var(--min-space-lg);
  transition: box-shadow var(--min-transition), transform var(--min-transition);
  text-decoration: none;
  color: inherit;
  display: block;
}

.rubrik-card:hover,
.lotte-rubrik-card:hover {
  box-shadow: var(--min-shadow-md);
  transform: translateY(-2px);
}

.rubrik-card__icon,
.lotte-rubrik-card__icon {
  width: 40px;
  height: 40px;
  color: var(--min-color-primary);
  margin-bottom: var(--min-space-md);
}

.rubrik-card__title,
.lotte-rubrik-card__title {
  font-size: 1.125rem;
  font-weight: var(--min-font-weight-bold);
  line-height: var(--min-line-height-heading);
  margin-bottom: var(--min-space-sm);
  color: var(--min-color-text);
}

.rubrik-card__desc,
.lotte-rubrik-card__desc {
  font-size: 0.9375rem;
  color: var(--min-color-muted);
  margin-bottom: var(--min-space-md);
}

.rubrik-card__links,
.lotte-rubrik-card__links {
  display: flex;
  flex-direction: column;
  gap: var(--min-space-xs);
}

.rubrik-card__links a,
.rubrik-card__links span,
.lotte-rubrik-card__links a,
.lotte-rubrik-card__links span {
  font-size: 0.875rem;
  color: var(--min-color-primary);
  text-decoration: none;
  transition: padding-left var(--min-transition);
}

.rubrik-card__links a:hover,
.lotte-rubrik-card__links a:hover {
  padding-left: var(--min-space-xs);
  text-decoration: underline;
}

/* ==========================================================================
 * 10. SERVICE SEARCH (rubrik.php)
 * ========================================================================== */

.service-search-section,
.lotte-service-search-section {
  text-align: center;
}

.service-search-form,
.lotte-service-search-form {
  margin: var(--min-space-lg) auto;
  max-width: 600px;
}

.service-search-form__wrapper,
.lotte-service-search-form__wrapper {
  display: flex;
  border-radius: var(--min-radius-md);
  overflow: hidden;
  box-shadow: var(--min-shadow-md);
}

.service-search-form__input,
.lotte-service-search-form__input {
  flex: 1;
  padding: var(--min-space-md) var(--min-space-lg);
  border: 1px solid var(--min-color-border);
  border-right: none;
  border-radius: var(--min-radius-md) 0 0 var(--min-radius-md);
  font-size: var(--min-font-size-base);
  outline: none;
  transition: border-color var(--min-transition);
}

.service-search-form__input:focus,
.lotte-service-search-form__input:focus {
  border-color: var(--min-color-primary);
}

.service-search-form__button,
.lotte-service-search-form__button {
  display: flex;
  align-items: center;
  gap: var(--min-space-sm);
  border-radius: 0 var(--min-radius-md) var(--min-radius-md) 0;
}

.service-search-hints,
.lotte-service-search-hints {
  margin-top: var(--min-space-md);
}

.service-search-hints ul,
.lotte-service-search-hints ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--min-space-sm);
  margin-top: var(--min-space-sm);
}

.service-search-hints a,
.lotte-service-search-hints a {
  display: inline-block;
  padding: 4px var(--min-space-md);
  background: var(--min-color-surface);
  border: 1px solid var(--min-color-border);
  border-radius: var(--min-radius-full);
  font-size: 0.875rem;
  color: var(--min-color-text);
  text-decoration: none;
  transition: background var(--min-transition), border-color var(--min-transition);
}

.service-search-hints a:hover,
.lotte-service-search-hints a:hover {
  background: color-mix(in srgb, var(--min-color-primary) 10%, transparent);
  border-color: var(--min-color-primary);
  color: var(--min-color-primary);
}

/* ==========================================================================
 * 11. DOWNLOAD LIST (unterseite.php, formulare.php, bekanntmachungen.php)
 * ========================================================================== */

.download-list,
.lotte-download-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.download-list li,
.lotte-download-list li {
  border-bottom: 1px solid var(--min-color-border);
}

.download-list li:last-child,
.lotte-download-list li:last-child {
  border-bottom: none;
}

.download-list a,
.lotte-download-list a {
  display: flex;
  align-items: center;
  gap: var(--min-space-md);
  padding: var(--min-space-md) var(--min-space-sm);
  text-decoration: none;
  color: var(--min-color-text);
  transition: background var(--min-transition);
  border-radius: var(--min-radius-sm);
}

.download-list a:hover,
.lotte-download-list a:hover {
  background: var(--min-color-surface);
}

.download-list a svg,
.lotte-download-list a svg {
  flex-shrink: 0;
  color: var(--min-color-primary);
}

.download-list__meta,
.lotte-download-list__meta {
  display: block;
  font-size: 0.875rem;
  color: var(--min-color-muted);
}

/* ==========================================================================
 * 12. HOURS TABLE (unterseite.php)
 * ========================================================================== */

.hours-table,
.lotte-hours-table {
  width: 100%;
}

.hours-table td,
.lotte-hours-table td {
  padding: var(--min-space-sm) 0;
  border-bottom: 1px solid var(--min-color-border);
  vertical-align: top;
}

.hours-table tr:last-child td,
.lotte-hours-table tr:last-child td {
  border-bottom: none;
}

.hours-table td:first-child,
.lotte-hours-table td:first-child {
  font-weight: var(--min-font-weight-medium);
  padding-right: var(--min-space-md);
  white-space: nowrap;
}

.hours-table td:last-child,
.lotte-hours-table td:last-child {
  text-align: right;
}

/* ==========================================================================
 * 13. CONTACT CARD (unterseite.php, stellenangebote.php, etc.)
 * ========================================================================== */

.contact-card,
.lotte-contact-card {
  display: flex;
  gap: var(--min-space-md);
}

.contact-card__avatar,
.lotte-contact-card__avatar {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--min-radius-full);
  background: color-mix(in srgb, var(--min-color-primary) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--min-color-primary);
}

.contact-card__info,
.lotte-contact-card__info {
  min-width: 0;
}

.contact-card__name,
.lotte-contact-card__name {
  font-weight: var(--min-font-weight-bold);
  margin-bottom: 2px;
}

.contact-card__role,
.lotte-contact-card__role {
  font-size: 0.875rem;
  color: var(--min-color-muted);
  margin-bottom: var(--min-space-sm);
}

.contact-card__contact,
.lotte-contact-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--min-space-xs);
}

.contact-detail,
.lotte-contact-card__detail {
  display: flex;
  align-items: center;
  gap: var(--min-space-sm);
  font-size: 0.875rem;
}

.contact-detail svg,
.lotte-contact-card__detail svg {
  flex-shrink: 0;
  color: var(--min-color-muted);
}

.contact-detail a,
.lotte-contact-card__detail a {
  color: var(--min-color-primary);
  text-decoration: none;
}

.contact-detail a:hover,
.lotte-contact-card__detail a:hover {
  text-decoration: underline;
}

/* ==========================================================================
 * 14. INFO BOX + NOTICE (unterseite.php)
 * ========================================================================== */

.info-box {
  background: var(--min-color-surface);
  border: 1px solid var(--min-color-border);
  border-left: 4px solid var(--min-color-primary);
  border-radius: var(--min-radius-md);
  padding: var(--min-space-lg);
  margin: var(--min-space-lg) 0;
}

.info-box h3 {
  margin-bottom: var(--min-space-sm);
}

.info-box--info {
  border-left-color: var(--min-color-secondary);
  background: color-mix(in srgb, var(--min-color-secondary) 6%, white);
}

.notice {
  background: color-mix(in srgb, var(--min-color-accent) 8%, white);
  border: 1px solid color-mix(in srgb, var(--min-color-accent) 20%, transparent);
  border-radius: var(--min-radius-md);
  padding: var(--min-space-md);
  margin: var(--min-space-md) 0;
}

.notice--info {
  background: color-mix(in srgb, var(--min-color-primary) 8%, white);
  border-color: color-mix(in srgb, var(--min-color-primary) 20%, transparent);
}

/* ==========================================================================
 * 15. CONTENT FIGURE (unterseite.php)
 * ========================================================================== */

.content-figure {
  margin: var(--min-space-lg) 0;
}

.content-figure img {
  border-radius: var(--min-radius-md);
  width: 100%;
}

.content-figure figcaption {
  font-size: 0.875rem;
  color: var(--min-color-muted);
  margin-top: var(--min-space-sm);
}

/* ==========================================================================
 * 16. FEATURE CARDS (landing.php)
 * Kacheln mit Icon, Titel und Text
 * ========================================================================== */

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--min-space-lg);
  margin-top: var(--min-space-lg);
}

@media (min-width: 640px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.feature-card {
  padding: var(--min-space-lg);
  background: var(--min-color-surface);
  border-radius: var(--min-radius-md);
  transition: box-shadow var(--min-transition);
}

.feature-card:hover {
  box-shadow: var(--min-shadow-md);
}

.feature-card__icon,
.lotte-feature-icon {
  width: 40px;
  height: 40px;
  color: var(--min-color-primary);
  margin-bottom: var(--min-space-md);
}

.feature-card__title {
  font-size: 1.125rem;
  font-weight: var(--min-font-weight-bold);
  margin-bottom: var(--min-space-sm);
}

.feature-card__text {
  font-size: 0.9375rem;
  color: var(--min-color-muted);
  line-height: var(--min-line-height);
}

/* ==========================================================================
 * 17. STATS BAR (landing.php)
 * ========================================================================== */

.stats-bar,
.lotte-stats-bar {
  background: var(--min-color-primary);
  color: white;
  padding: var(--min-space-xl) 0;
}

.stat-item__number,
.lotte-stat-item__number {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--min-font-weight-bold);
  line-height: 1.1;
  margin-bottom: 4px;
}

.stat-item__label,
.lotte-stat-item__label {
  font-size: 0.875rem;
  opacity: 0.85;
}

/* ==========================================================================
 * 18. LANDING HERO (landing.php)
 * Heller Hero mit Hintergrundbild
 * ========================================================================== */

.landing-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
}

.landing-hero__content {
  max-width: 700px;
  padding: var(--min-space-xl);
}

.landing-hero__content h1 {
  color: white;
  font-size: clamp(2rem, 5vw, 3rem);
}

.landing-hero__content .lead {
  color: var(--lotte-white-90);
}

/* ==========================================================================
 * 19. PARALLAX DIVIDER (index.php)
 * ========================================================================== */

.parallax-divider {
  position: relative;
  height: 200px;
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
}

.parallax-divider__overlay {
  position: absolute;
  inset: 0;
  background: var(--lotte-overlay-dark-medium);
}

/* ==========================================================================
 * 20. HERO (index.php - Startseite)
 * Ergaenzungen fuer Startseiten-Hero: Overlay + Suchfeld
 * Nutzt ce-hero aus dem Framework fuer die Basisstruktur
 * ========================================================================== */

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

.hero__overlay {
  position: absolute;
  inset: 0;
}

.hero__overlay--gradient {
  background: linear-gradient(to top, var(--lotte-overlay-dark) 0%, var(--lotte-overlay-dark-faint) 100%);
}

.hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: white;
  padding: var(--min-space-3xl) var(--min-space-md);
  max-width: 700px;
  margin: 0 auto;
}

.hero__title {
  font-size: clamp(2rem, 5vw, 3rem);
  color: white;
  margin-bottom: var(--min-space-sm);
  text-shadow: 0 2px 8px var(--lotte-textshadow-dark-med);
}

.hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  opacity: 0.9;
  margin-bottom: var(--min-space-lg);
}

.hero__search {
  display: flex;
  max-width: 480px;
  margin: 0 auto;
  border-radius: var(--min-radius-md);
  overflow: hidden;
  box-shadow: 0 4px 20px var(--lotte-shadow-20);
}

.hero__search input {
  flex: 1;
  padding: var(--min-space-md) var(--min-space-lg);
  border: none;
  font-size: var(--min-font-size-base);
  outline: none;
  background: white;
  color: var(--min-color-text);
}

.hero__search button {
  padding: var(--min-space-md) var(--min-space-lg);
  background: var(--min-color-primary);
  color: white;
  border: none;
  cursor: pointer;
  transition: background var(--min-transition);
}

.hero__search button:hover {
  background: color-mix(in srgb, var(--min-color-primary) 85%, black);
}

/* ==========================================================================
 * 21. UTILITY CLASSES
 * Benoetigte Hilfsklassen (container, flex, text, etc.)
 * ========================================================================== */

/* Container (falls nicht im Framework enthalten) */
/* Nutzt Token statt hardcoded 1200px – konsistent mit @layer layout */
.container {
  width: 100%;
  max-width: var(--min-container-max, 1280px);
  margin-inline: auto;
  padding-inline: var(--min-container-padding, var(--min-space-md, 1.5rem));
}

/* Section Spacing */
.section {
  padding: var(--min-space-section) 0;
}

.section--sm {
  padding: var(--min-space-md) 0;
}

.section--alt {
  background: var(--min-color-surface);
}

/* Flexbox Helpers */
.flex { display: flex; }
.flex--col { flex-direction: column; }
.flex--center { justify-content: center; }
.flex--between { justify-content: space-between; }
.flex--wrap { flex-wrap: wrap; }

.gap-2 { gap: var(--min-space-sm); }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: var(--min-space-md); }

/* Text Helpers */
.text-center { text-align: center; }
.text-muted { color: var(--min-color-muted); }
.small { font-size: 0.875rem; }
.lead {
  font-size: 1.125rem;
  color: var(--min-color-muted);
  margin-bottom: var(--min-space-lg);
  line-height: var(--min-line-height);
}

/* Spacing Helpers */
.mb-2 { margin-bottom: var(--min-space-sm); }
.mb-4 { margin-bottom: var(--min-space-md); }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: var(--min-space-lg); }
.mt-4 { margin-top: var(--min-space-md); }
.mt-8 { margin-top: var(--min-space-lg); }

/* Visibility */
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
 * 22. BUTTONS
 * Nur falls nicht ausreichend im ce-btn des Frameworks
 * ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--min-space-sm);
  padding: 0.625rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: var(--min-font-weight-medium);
  line-height: 1.4;
  border: 2px solid transparent;
  border-radius: var(--min-radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--min-transition);
  white-space: nowrap;
}

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

.btn--primary:hover {
  background: color-mix(in srgb, var(--min-color-primary) 85%, black);
}

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

.btn--secondary:hover {
  background: color-mix(in srgb, var(--min-color-secondary) 80%, black);
}

.btn--outline {
  background: transparent;
  border-color: var(--min-color-primary);
  color: var(--min-color-primary);
}

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

.btn--ghost {
  background: transparent;
  color: var(--min-color-text);
  border-color: var(--min-color-border);
}

.btn--ghost:hover {
  background: var(--min-color-surface);
  border-color: var(--min-color-primary);
  color: var(--min-color-primary);
}

.btn--sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
}

.btn--lg {
  padding: 0.75rem 1.75rem;
  font-size: 1.0625rem;
}

.btn--full {
  width: 100%;
}

/* ==========================================================================
 * 23. FORM ELEMENTS
 * ========================================================================== */

.form-input,
.form-select {
  display: block;
  width: 100%;
  padding: var(--min-space-sm) 0.75rem;
  font-size: var(--min-font-size-base);
  border: 1px solid var(--min-color-border);
  border-radius: var(--min-radius-md);
  background: white;
  transition: border-color var(--min-transition);
  outline: none;
}

.form-input:focus,
.form-select:focus {
  border-color: var(--min-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--min-color-primary) 15%, transparent);
}

/* ==========================================================================
 * 24. CARD (Generic - news.php featured, events.php)
 * ========================================================================== */

.card {
  background: white;
  border: 1px solid var(--min-color-border);
  border-radius: var(--min-radius-md);
  overflow: hidden;
}

.card__image {
  overflow: hidden;
}

.card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__body {
  padding: var(--min-space-lg);
}

.card__title {
  font-size: 1.25rem;
  font-weight: var(--min-font-weight-bold);
  line-height: var(--min-line-height-heading);
  margin-bottom: var(--min-space-sm);
}

.card__text {
  color: var(--min-color-muted);
  margin-bottom: var(--min-space-md);
}

/* ==========================================================================
 * 25. QUICK ACCESS (index.php - Schnellzugriffe)
 * Falls im HTML noch alte Klassen vorhanden sind
 * ========================================================================== */

.quick-access__icon {
  color: var(--min-color-primary);
}

.quick-access__label {
  font-weight: var(--min-font-weight-bold);
}

.quick-access__desc {
  font-size: 0.875rem;
  color: var(--min-color-muted);
}

/* ==========================================================================
 * 26. STYLE SWITCHER (head.php)
 * ========================================================================== */





.style-switcher__btn:hover,
.style-switcher__btn.is-active {
  background: var(--min-color-primary);
  color: white;
}

/* ==========================================================================
 * 27. SKIP LINK (head.php)
 * ========================================================================== */



.skip-link:focus {
  top: 0;
}

/* ==========================================================================
 * 28. BACK TO TOP (footer.php)
 * ========================================================================== */

.back-to-top {
  position: fixed;
  bottom: var(--min-space-lg);
  right: var(--min-space-lg);
  width: 44px;
  height: 44px;
  background: var(--min-color-primary);
  color: white;
  border: none;
  border-radius: var(--min-radius-full);
  cursor: pointer;
  box-shadow: var(--min-shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--min-transition), background var(--min-transition);
  z-index: 100;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.back-to-top:hover {
  background: color-mix(in srgb, var(--min-color-primary) 85%, black);
}

/* ==========================================================================
 * 29. NEWSLETTER (news.php sidebar)
 * ========================================================================== */

/* Newsletter form already handled via sidebar-section + form-input + btn */

/* ==========================================================================
 * 30. RESPONSIVE ADJUSTMENTS
 * ========================================================================== */

@media (max-width: 767px) {
  .page-header--photo {
    padding: var(--min-space-xl) 0 var(--min-space-md);
  }

  .news-featured,
  .lotte-news-featured {
    aspect-ratio: 16/9;
  }

  .event-timeline-item,
  .lotte-event-item {
    gap: var(--min-space-md);
  }

  .event-timeline-item__date,
  .lotte-event-item__date {
    width: 56px;
    font-size: 0.875rem;
  }

  .hero__content {
    padding: var(--min-space-2xl) var(--min-space-md);
  }
}

@media (max-width: 479px) {
  .rubrik-grid,
  .lotte-rubrik-grid {
    grid-template-columns: 1fr;
  }

  .hero__search {
    flex-direction: column;
    border-radius: var(--min-radius-md);
  }

  .hero__search input {
    border-radius: var(--min-radius-md) var(--min-radius-md) 0 0;
    border-right: none;
  }

  .hero__search button {
    border-radius: 0 0 var(--min-radius-md) var(--min-radius-md);
    justify-content: center;
  }
}

/* ==========================================================================
 * 31. MOSAIC DASHBOARD (index-v3.php – Bento-Grid Layout)
 * ========================================================================== */

.lotte-mosaic-dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--min-space-md);
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--min-space-lg) var(--min-space-md);
}

/* Base Tile */
.lotte-mosaic-tile {
  background: white;
  border-radius: var(--min-radius-lg);
  padding: var(--min-space-lg);
  border: 1px solid var(--min-color-border);
  overflow: hidden;
}

/* Tile shared elements */
.lotte-mosaic-tile__eyebrow {
  display: block;
  font-size: 0.875rem;
  font-weight: var(--min-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--min-color-primary);
  margin-bottom: var(--min-space-sm);
}

.lotte-mosaic-tile__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--min-font-weight-bold);
  line-height: var(--min-line-height-heading);
  color: var(--min-color-text);
  margin: 0 0 var(--min-space-sm);
}

.lotte-mosaic-tile__text {
  font-size: var(--min-font-size-base);
  color: var(--min-color-muted);
  margin: 0;
}

.lotte-mosaic-tile__subtitle {
  font-size: 1rem;
  font-weight: var(--min-font-weight-bold);
  color: var(--min-color-text);
  margin: 0;
}

.lotte-mosaic-tile__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--min-space-md);
}

.lotte-mosaic-tile__more {
  font-size: 0.875rem;
  color: var(--min-color-primary);
  text-decoration: none;
  font-weight: var(--min-font-weight-medium);
}

.lotte-mosaic-tile__more:hover {
  text-decoration: underline;
}

/* Welcome Tile */
.lotte-mosaic-tile--welcome {
  background: var(--min-color-surface);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Search Tile */
.lotte-mosaic-tile--search {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.lotte-mosaic-search {
  display: flex;
  align-items: center;
  gap: var(--min-space-sm);
  background: var(--min-color-surface);
  border: 1px solid var(--min-color-border);
  border-radius: var(--min-radius-full);
  padding: 0.625rem 1rem;
}

.lotte-mosaic-search svg {
  flex-shrink: 0;
  color: var(--min-color-muted);
}

.lotte-mosaic-search input {
  border: none;
  background: transparent;
  outline: none;
  font-size: var(--min-font-size-base);
  width: 100%;
  color: var(--min-color-text);
}

.lotte-mosaic-search input::placeholder {
  color: var(--min-color-muted);
}

.lotte-mosaic-search-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--min-space-xs);
  margin-top: var(--min-space-sm);
}

.lotte-mosaic-search-tags a {
  font-size: 0.875rem;
  padding: 0.25rem 0.625rem;
  background: var(--min-color-surface);
  border-radius: var(--min-radius-full);
  color: var(--min-color-muted);
  text-decoration: none;
  transition: all var(--min-transition);
}

.lotte-mosaic-search-tags a:hover {
  background: var(--min-color-primary);
  color: white;
}

/* Quick Links Tile */
.lotte-mosaic-quicklinks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--min-space-xs);
}

.lotte-mosaic-qlink {
  display: flex;
  align-items: center;
  gap: var(--min-space-sm);
  padding: 0.5rem 0.625rem;
  border-radius: var(--min-radius-md);
  color: var(--min-color-text);
  text-decoration: none;
  font-size: 0.875rem;
  transition: background var(--min-transition);
}

.lotte-mosaic-qlink:hover {
  background: var(--min-color-surface);
}

.lotte-mosaic-qlink svg {
  flex-shrink: 0;
  color: var(--min-color-primary);
}

/* Featured Tile */
.lotte-mosaic-tile--featured {
  grid-column: span 2;
  position: relative;
  padding: 0;
  min-height: 280px;
}

.lotte-mosaic-tile--featured img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.lotte-mosaic-tile--featured__content {
  position: relative;
  z-index: 1;
  padding: var(--min-space-lg);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  background: linear-gradient(to top, var(--lotte-overlay-dark) 0%, transparent 60%);
  color: white;
}

.lotte-mosaic-tile--featured__content h3 {
  font-size: 1.25rem;
  font-weight: var(--min-font-weight-bold);
  margin: var(--min-space-sm) 0 0.25rem;
  text-shadow: 0 1px 4px var(--lotte-textshadow-dark);
}

.lotte-mosaic-tile--featured__content h3 a {
  color: white;
  text-decoration: none;
}

.lotte-mosaic-tile--featured__content h3 a:hover {
  text-decoration: underline;
}

.lotte-mosaic-tile--featured__content time {
  font-size: 0.875rem;
  opacity: 0.8;
}

/* Events Tile */
.lotte-mosaic-events-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.lotte-mosaic-event {
  display: flex;
  align-items: center;
  gap: var(--min-space-md);
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--min-color-border);
  text-decoration: none;
  color: var(--min-color-text);
  transition: background var(--min-transition);
}

.lotte-mosaic-event:last-child {
  border-bottom: none;
}

.lotte-mosaic-event:hover {
  background: var(--min-color-surface);
  margin: 0 calc(var(--min-space-sm) * -1);
  padding-left: var(--min-space-sm);
  padding-right: var(--min-space-sm);
  border-radius: var(--min-radius-md);
}

.lotte-mosaic-event__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
  text-align: center;
}

.lotte-mosaic-event__date strong {
  font-size: 1.25rem;
  font-weight: var(--min-font-weight-bold);
  color: var(--min-color-primary);
  line-height: 1;
}

.lotte-mosaic-event__date span {
  font-size: 0.875rem;
  text-transform: uppercase;
  color: var(--min-color-muted);
}

.lotte-mosaic-event__info {
  flex: 1;
  min-width: 0;
}

.lotte-mosaic-event__title {
  font-size: 0.875rem;
  font-weight: var(--min-font-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lotte-mosaic-event__meta {
  font-size: 0.875rem;
  color: var(--min-color-muted);
}

/* News Tiles */
.lotte-mosaic-tile--news {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.lotte-mosaic-tile--news__img {
  height: 140px;
  overflow: hidden;
}

.lotte-mosaic-tile--news__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lotte-mosaic-tile--news__body {
  padding: var(--min-space-md);
}

.lotte-mosaic-tile--news__body time {
  font-size: 0.875rem;
  color: var(--min-color-muted);
}

.lotte-mosaic-tile--news__body h3 {
  font-size: 0.9375rem;
  font-weight: var(--min-font-weight-bold);
  margin: 0.25rem 0;
  line-height: var(--min-line-height-heading);
}

.lotte-mosaic-tile--news__body h3 a {
  color: var(--min-color-text);
  text-decoration: none;
}

.lotte-mosaic-tile--news__body h3 a:hover {
  color: var(--min-color-primary);
}

.lotte-mosaic-tile--news__body p {
  font-size: 0.875rem;
  color: var(--min-color-muted);
  margin: 0;
}

/* Accent colors for news tiles */
.lotte-mosaic-tile--news[data-accent="teal"] {
  border-top: 3px solid var(--lotte-accent-teal);
}

.lotte-mosaic-tile--news[data-accent="amber"] {
  border-top: 3px solid var(--lotte-accent-amber);
}

/* Service Tile */
.lotte-mosaic-tile--service {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Topic Tiles */
.lotte-mosaic-tile--topic {
  position: relative;
  padding: 0;
  text-decoration: none;
  color: white;
  min-height: 180px;
  display: flex;
  align-items: flex-end;
}

.lotte-mosaic-tile--topic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.lotte-mosaic-tile--topic:hover img {
  transform: scale(1.05);
}

.lotte-mosaic-tile--topic__content {
  position: relative;
  z-index: 1;
  padding: var(--min-space-md);
  width: 100%;
  background: linear-gradient(to top, var(--lotte-overlay-dark) 0%, transparent 100%);
}

.lotte-mosaic-tile--topic__content h3 {
  font-size: 1rem;
  font-weight: var(--min-font-weight-bold);
  color: white;
  margin: var(--min-space-xs) 0 0;
  text-shadow: 0 1px 4px var(--lotte-textshadow-dark);
}

/* Topic accent borders */
.lotte-mosaic-tile--topic[data-accent="teal"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--lotte-accent-teal);
  z-index: 2;
}

.lotte-mosaic-tile--topic[data-accent="amber"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--lotte-accent-amber);
  z-index: 2;
}

.lotte-mosaic-tile--topic[data-accent="slate"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--lotte-accent-slate);
  z-index: 2;
}

/* Stats Tile */
.lotte-mosaic-tile--stats {
  grid-column: span 3;
  background: var(--min-color-primary);
  color: white;
  text-align: center;
}

.lotte-mosaic-tile--stats .lotte-mosaic-tile__subtitle {
  color: white;
}

.lotte-mosaic-stats {
  display: flex;
  justify-content: space-around;
}

/* Ortsteile Band */
.lotte-mosaic-tile--ortsteile {
  grid-column: span 3;
}

.lotte-mosaic-ortsteile {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--min-space-sm);
}

.lotte-mosaic-ort {
  position: relative;
  border-radius: var(--min-radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  text-decoration: none;
}

.lotte-mosaic-ort img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.lotte-mosaic-ort:hover img {
  transform: scale(1.08);
}

.lotte-mosaic-ort__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--min-space-sm) var(--min-space-md);
  background: linear-gradient(to top, var(--lotte-overlay-dark-soft) 0%, transparent 100%);
  color: white;
  font-size: 0.875rem;
  font-weight: var(--min-font-weight-bold);
  text-shadow: 0 1px 3px var(--lotte-textshadow-dark-soft);
}

/* Mosaic Responsive */
@media (max-width: 1023px) {
  .lotte-mosaic-dashboard {
    grid-template-columns: repeat(2, 1fr);
  }

  .lotte-mosaic-tile--featured {
    grid-column: span 2;
  }

  .lotte-mosaic-tile--stats {
    grid-column: span 2;
  }

  .lotte-mosaic-tile--ortsteile {
    grid-column: span 2;
  }

  .lotte-mosaic-ortsteile {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 639px) {
  .lotte-mosaic-dashboard {
    grid-template-columns: 1fr;
    padding: var(--min-space-md);
  }

  .lotte-mosaic-tile--featured {
    grid-column: span 1;
    min-height: 220px;
  }

  .lotte-mosaic-tile--stats {
    grid-column: span 1;
  }

  .lotte-mosaic-tile--ortsteile {
    grid-column: span 1;
  }

  .lotte-mosaic-ortsteile {
    grid-template-columns: repeat(2, 1fr);
  }

  .lotte-mosaic-quicklinks {
    grid-template-columns: 1fr;
  }

  .lotte-mosaic-stats {
    flex-wrap: wrap;
    gap: var(--min-space-md);
  }

  .lotte-mosaic-stats .lotte-stat-item {
    flex: 0 0 45%;
  }
}

/* ==========================================================================
 * 32. DESIGN-FIXES - 2026-02-18 LILY
 * Behebt: Bild-Layout, Sticky-Nav-Overflow, Border-Radius-Chaos
 * ========================================================================== */

/* --- Fix A: ce-page-header__image als Hintergrundbild ---
 * In den Templates wird das Bild als .ce-page-header__image direkt
 * in .ce-page-header--image eingebettet (kein .ce-page-header__bg Wrapper).
 * Dieses CSS macht .ce-page-header__image zu einem absoluten Hintergrundbild,
 * kompatibel mit der --image Variante.
 *
 * R4-Fix 2026-05-05 (Bug 1+2):
 * TYPO3-Template rendert <picture class="ce-page-header__picture"> als
 * Zwischenlayer. ">" direktes-Kind-Selector greift nicht auf img darin.
 * Fix: position:relative + min-height auf Container; picture+img absolut.
 */
.ce-page-header--image {
  position: relative;
  overflow: hidden;
  min-height: 450px;
}

.ce-page-header--image > .ce-page-header__image,
.ce-page-header--image > img,
.ce-page-header--image > .ce-page-header__picture,
.ce-page-header--image > picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.ce-page-header--image > .ce-page-header__picture img,
.ce-page-header--image > picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay ueber dem Foto-Header-Bild (via ::before auf dem Container) */
.ce-page-header--image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--lotte-overlay-dark-25) 0%,
    var(--lotte-overlay-dark-12) 40%,
    var(--lotte-overlay-dark-08) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Content des page-header muss ueber dem Overlay liegen */
.ce-page-header--image > .ce-page-header__content,
.ce-page-header--image .container {
  position: relative;
  z-index: 2;
}

/* --- Fix B: Einheitliche Schriftfarbe im photo page-header ---
 * Text muss lesbar bleiben auf dem Foto-Hintergrund
 */
.ce-page-header--image .ce-page-header__title,
.ce-page-header--image .ce-page-header__subtitle,
.ce-page-header--image .ce-breadcrumb__link,
.ce-page-header--image .ce-breadcrumb__sep,
.ce-page-header--image .ce-breadcrumb__current {
  color: #ffffff;
  text-shadow: 0 1px 6px var(--lotte-textshadow-dark);
}

/* Staerkerer Text-Shadow fuer den Haupttitel – lesbar auch bei hellen Fotos */
.ce-page-header--image .ce-page-header__title {
  text-shadow: 0 2px 12px var(--lotte-shadow-35), 0 1px 4px var(--lotte-shadow-25);
}

.ce-page-header--image .ce-breadcrumb__link {
  opacity: 0.85;
}

.ce-page-header--image .ce-breadcrumb__link:hover {
  opacity: 1;
  text-decoration: underline;
}

/* --- Fix C: Style-Switcher Position ---
 * Ueberlagert keinen Content mehr, positioniert sich korrekt
 * neben der fixed Navigation (links oben, unter der Nav).
 * Ueberschreibt Sektion 26 (top:50%, right:0, transform).
 */


/* --- Fix D: Konsistente News-Featured Karte in news.php ---
 * lotte-news-featured__image ohne feste aspect-ratio Probleme
 */
.lotte-news-featured__image {
  overflow: hidden;
  border-radius: var(--min-radius-md);
}

.lotte-news-featured__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lotte-news-featured__body {
  padding: var(--min-space-lg) 0;
}

/* --- Fix E: Tag/Badge Einheitlichkeit ---
 * Alle Kategorie-Tags auf denselben Radius (behördengerecht)
 * Kein pill/rund mehr (war 9999px)
 */
.lotte-news-featured__category,
.news-featured__category,
.topic-card__tag,
.lotte-topic-card__tag {
  border-radius: var(--min-radius-sm);
}

/* Suche-Tags in Mosaic: minimal gerundet */
.lotte-mosaic-search-tags a,
.service-search-hints a,
.lotte-service-search-hints a {
  border-radius: var(--min-radius-sm);
}

/* Suchfeld-Wrapper: leicht gerundet statt pill */
.lotte-mosaic-search {
  border-radius: var(--min-radius-md);
}

/* Back-to-Top: darf quadratisch bleiben, leicht gerundet */
.back-to-top {
  border-radius: var(--min-radius-md);
}

/* --- Fix F: Hero Ueberlappung mit fixed Nav ---
 * ce-hero streckt sich bis zum Viewport-Top.
 * Mit body padding-top bekommt er extra Raum - das nehmen wir zurueck
 * und nutzen den margin-top aus mandant.css.
 * Zusaetzlich: min-height korrigieren damit der Hero
 * immer noch gut aussieht.
 */
:is(.ce-hero, .min-hero),
.hero,
.page-hero {
  /* Volle Viewport-Hoehe MINUS Nav-Hoehe = sichtbarer Hero */
  min-height: calc(var(--min-hero-height, 75vh) - 0px);
}

/* --- Fix G: Parallax-Divider Bild-Fix ---
 * background-attachment: fixed funktioniert nicht auf mobilen Geraeten
 */
@media (max-width: 768px) {
  .parallax-divider {
    background-attachment: scroll;
  }
}

/* --- Fix H: ce-two-col Layout-Konflikt ---
 * In custom.css und style.css gibt es beide .ce-two-col Definitionen.
 * Die aus custom.css ist breiter definiert (1fr 320px) und passt fuer
 * Unterseiten (Hauptinhalt + Sidebar).
 * Stellen wir sicher dass sie nicht von .ce-two-col aus layout.css
 * (1fr 1fr) ueberschrieben wird.
 */
.ce-content-section .ce-two-col {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .ce-content-section .ce-two-col {
    grid-template-columns: 1fr 320px;
    align-items: start;
  }
}

/* ==========================================================================
 * 22. NEWS GRID (Startseite - 2x3 mit Foto)
 * Kundenvorgabe: 6 Meldungen im 2x3 Grid, jeweils mit Foto
 * ========================================================================== */

.lotte-news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--min-space-md, 1rem);
}

@media (min-width: 640px) {
  .lotte-news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .lotte-news-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.lotte-news-card {
  background: var(--mandant-bg, #fff);
  border: 1px solid var(--mandant-border, #ccc);
  border-radius: var(--mandant-radius-md, 4px);
  overflow: hidden;
  transition: box-shadow var(--mandant-transition, 250ms ease), transform var(--mandant-transition, 250ms ease);
}

.lotte-news-card:hover {
  box-shadow: 0 4px 16px var(--lotte-shadow-10);
  transform: translateY(-2px);
}

.lotte-news-card__image {
  aspect-ratio: 16/10;
  overflow: hidden;
}

.lotte-news-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.lotte-news-card:hover .lotte-news-card__image img {
  transform: scale(1.04);
}

.lotte-news-card__body {
  padding: var(--min-space-md, 1rem);
}

.lotte-news-card__date {
  font-size: 0.875rem;
  color: var(--mandant-muted, #4a4a4a);
  margin-bottom: var(--min-space-xs, 0.25rem);
}

.lotte-news-card__title {
  font-size: 1rem;
  font-weight: var(--min-font-weight-bold, 700);
  line-height: var(--min-line-height-heading, 1.3);
  margin-bottom: var(--min-space-xs, 0.25rem);
}

.lotte-news-card__title a {
  color: var(--mandant-text, #1a1a1a);
  text-decoration: none;
}

.lotte-news-card__title a:hover {
  color: var(--mandant-primary, #145675);
}

.lotte-news-card__excerpt {
  font-size: 0.875rem;
  color: var(--mandant-muted, #4a4a4a);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
 * 23. EVENT GRID (Startseite - mit Foto)
 * Kundenvorgabe: Events mit Foto optimiert
 * ========================================================================== */

.lotte-event-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--min-space-md, 1rem);
}

@media (min-width: 640px) {
  .lotte-event-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .lotte-event-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.lotte-event-card {
  background: var(--mandant-bg, #fff);
  border: 1px solid var(--mandant-border, #ccc);
  border-radius: var(--mandant-radius-md, 4px);
  overflow: hidden;
  transition: box-shadow var(--mandant-transition, 250ms ease), transform var(--mandant-transition, 250ms ease);
}

.lotte-event-card:hover {
  box-shadow: 0 4px 16px var(--lotte-shadow-10);
  transform: translateY(-2px);
}

.lotte-event-card__image {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
}

.lotte-event-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lotte-event-card__date-badge {
  position: absolute;
  top: var(--min-space-sm, 0.5rem);
  left: var(--min-space-sm, 0.5rem);
  background: var(--mandant-primary, #145675);
  color: #fff;
  border-radius: var(--mandant-radius-md, 4px);
  padding: var(--min-space-xs, 0.25rem) var(--min-space-sm, 0.5rem);
  text-align: center;
  line-height: 1.2;
}

.lotte-event-card__date-day {
  display: block;
  font-size: 1.125rem;
  font-weight: var(--min-font-weight-bold, 700);
}

.lotte-event-card__date-month {
  display: block;
  font-size: 0.875rem;
  text-transform: uppercase;
}

.lotte-event-card__body {
  padding: var(--min-space-md, 1rem);
}

.lotte-event-card__title {
  font-size: 1rem;
  font-weight: var(--min-font-weight-bold, 700);
  line-height: var(--min-line-height-heading, 1.3);
  margin-bottom: var(--min-space-xs, 0.25rem);
}

.lotte-event-card__title a {
  color: var(--mandant-text, #1a1a1a);
  text-decoration: none;
}

.lotte-event-card__title a:hover {
  color: var(--mandant-primary, #145675);
}

.lotte-event-card__meta {
  font-size: 0.875rem;
  color: var(--mandant-muted, #4a4a4a);
}

/* ==========================================================================
 * 24. SECTION HEADING (Shared: alle Varianten)
 * ========================================================================== */

.lotte-section-heading {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--min-font-weight-bold, 700);
  line-height: var(--min-line-height-heading, 1.3);
  margin-bottom: var(--min-space-lg, 2rem);
}

/* ==========================================================================
 * 25. STATS BAR (Shared)
 * ========================================================================== */

.lotte-stats {
  padding: var(--min-space-2xl, 3rem) 0;
  background: var(--mandant-primary, #145675);
  color: #fff;
}

.lotte-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--min-space-md, 1rem);
}

@media (min-width: 768px) {
  .lotte-stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.lotte-stats .lotte-stat__number {
  color: #fff;
}

.lotte-stats .lotte-stat__label {
  color: var(--lotte-white-85);
}

.lotte-stat {
  text-align: center;
  padding: var(--min-space-lg, 2rem) var(--min-space-md, 1rem);
}

.lotte-stat__number {
  display: block;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--min-font-weight-bold, 700);
  color: var(--mandant-primary, #145675);
  line-height: 1;
  margin-bottom: var(--min-space-xs, 0.25rem);
}

.lotte-stat__label {
  font-size: 0.875rem;
  color: var(--mandant-muted, #4a4a4a);
}

/* ==========================================================================
 * 26. CTA BAR (Startseite)
 * ========================================================================== */

.lotte-cta-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--min-space-md, 1rem);
  padding: var(--min-space-lg, 2rem);
  text-align: center;
}

.lotte-cta-bar p {
  font-size: 1.125rem;
  font-weight: var(--min-font-weight-medium, 500);
}

/* ==========================================================================
 * 27. FOOTER EXTRAS (Social, App, A11y, ChatBot, Weather)
 * ========================================================================== */

.lotte-footer-social {
  display: flex;
  gap: var(--min-space-md, 1rem);
  margin-bottom: var(--min-space-lg, 1.5rem);
}

.lotte-footer-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--mandant-radius-md, 4px);
  background: var(--lotte-white-10);
  color: var(--lotte-white-85);
  transition: background var(--mandant-transition, 250ms ease), color var(--mandant-transition, 250ms ease);
}

.lotte-footer-social__link:hover {
  background: var(--lotte-white-20);
  color: #fff;
}

.lotte-footer-app {
  margin-top: var(--min-space-md, 1rem);
}

.lotte-footer-app__label {
  font-size: 0.875rem;
  font-weight: var(--min-font-weight-bold, 700);
  margin-bottom: var(--min-space-xs, 0.25rem);
}

.lotte-footer-app__links {
  display: flex;
  gap: var(--min-space-md, 1rem);
}

.lotte-footer-app__links a {
  display: inline-flex;
  align-items: center;
  gap: var(--min-space-xs, 0.25rem);
}

.lotte-footer-a11y {
  display: flex;
  flex-direction: column;
  gap: var(--min-space-sm, 0.5rem);
  margin-top: var(--min-space-lg, 1.5rem);
  padding-top: var(--min-space-md, 1rem);
  border-top: 1px solid var(--lotte-white-15);
}

.lotte-footer-a11y a {
  display: inline-flex;
  align-items: center;
  gap: var(--min-space-xs, 0.25rem);
  font-size: 0.875rem;
}

.lotte-footer-weather {
  display: inline-flex;
  align-items: center;
  gap: var(--min-space-xs, 0.25rem);
  font-size: 0.875rem;
  opacity: 0.75;
}

/* ==========================================================================
 * 28. CHATBOT (fixed, unten rechts)
 * ========================================================================== */

.lotte-chatbot {
  position: fixed;
  bottom: var(--min-space-lg, 2rem);
  right: var(--min-space-lg, 2rem);
  z-index: 1000;
}

.lotte-chatbot__trigger {
  width: 56px;
  height: 56px;
  border-radius: var(--mandant-radius-lg, 6px);
  background: var(--mandant-primary, #145675);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px var(--lotte-shadow-20);
  transition: background var(--mandant-transition, 250ms ease), transform var(--mandant-transition, 250ms ease);
}

.lotte-chatbot__trigger:hover {
  background: color-mix(in srgb, var(--mandant-primary, #145675) 80%, black);
  transform: scale(1.05);
}

.lotte-chatbot__panel {
  position: absolute;
  bottom: calc(100% + var(--min-space-md, 1rem));
  right: 0;
  width: 320px;
  max-height: 400px;
  background: var(--mandant-bg, #fff);
  border: 1px solid var(--mandant-border, #ccc);
  border-radius: var(--mandant-radius-md, 4px);
  box-shadow: 0 8px 32px var(--lotte-shadow-15);
  overflow: hidden;
}

.lotte-chatbot__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--min-space-md, 1rem);
  background: var(--mandant-primary, #145675);
  color: #fff;
  font-weight: var(--min-font-weight-bold, 700);
}

.lotte-chatbot__close {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1;
}

.lotte-chatbot__body {
  padding: var(--min-space-lg, 1.5rem);
  font-size: 0.9375rem;
  color: var(--mandant-text, #1a1a1a);
}

/* Mobile: ChatBot kleinere Position */
@media (max-width: 479px) {
  .lotte-chatbot {
    bottom: var(--min-space-md, 1rem);
    right: var(--min-space-md, 1rem);
  }

  .lotte-chatbot__trigger {
    width: 48px;
    height: 48px;
  }

  .lotte-chatbot__panel {
    width: calc(100vw - 2rem);
    right: calc(-1 * var(--min-space-md, 1rem));
  }
}

/* ==========================================================================
 * 29. LOTTE BUTTON (Shared)
 * ========================================================================== */

.lotte-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--min-space-sm, 0.5rem);
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: var(--min-font-weight-medium, 500);
  text-decoration: none;
  border-radius: var(--mandant-radius-md, 4px);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--mandant-transition, 250ms ease), color var(--mandant-transition, 250ms ease), border-color var(--mandant-transition, 250ms ease);
}

.lotte-btn--primary {
  background: var(--mandant-primary, #145675);
  color: #fff;
  border-color: var(--mandant-primary, #145675);
}

.lotte-btn--primary:hover {
  background: color-mix(in srgb, var(--mandant-primary, #145675) 80%, black);
  border-color: color-mix(in srgb, var(--mandant-primary, #145675) 80%, black);
}

.lotte-btn--outline {
  background: transparent;
  color: var(--mandant-primary, #145675);
  border-color: var(--mandant-primary, #145675);
}

.lotte-btn--outline:hover {
  background: var(--mandant-primary, #145675);
  color: #fff;
}

.lotte-btn--secondary {
  background: var(--mandant-secondary, #84BD00);
  /* A11y fix C3: dark text on green (#84BD00) for WCAG AA contrast >= 4.5:1 */
  /* #0a3a4a on #84BD00 = ~5.04:1 (PASS). Previous #fff = ~2.26:1 (FAIL) */
  color: var(--mandant-btn-secondary-text, #0a3a4a);
  border-color: var(--mandant-secondary, #84BD00);
}

.lotte-btn--secondary:hover {
  background: color-mix(in srgb, var(--mandant-secondary, #84BD00) 80%, black);
  border-color: color-mix(in srgb, var(--mandant-secondary, #84BD00) 80%, black);
  color: var(--mandant-btn-secondary-text, #0a3a4a);
}

.lotte-btn--white {
  background: #fff;
  color: var(--mandant-primary, #145675);
  border-color: #fff;
}

.lotte-btn--white:hover {
  background: var(--mandant-surface, #f5f8fa);
  border-color: var(--mandant-surface, #f5f8fa);
}


/* ==========================================================================
 * DARK MODE – custom.css
 * Gemeinsame Lotte-Komponenten: Page-Header, Sidebar, Cards, Forms,
 * Chatbot, Style-Switcher, Mosaic-Dashboard, News/Event-Karten.
 * Aktivierung: prefers-color-scheme:dark ODER [data-theme="dark"]
 *
 * Strategie: Komponenten die --min-color-* Variablen nutzen,
 * greifen automatisch via style.css Dark-Mode-Block.
 * Nur hardcodierte white/black/Hex-Farben müssen überschrieben werden.
 * ========================================================================== */

/* Smooth Body-Transition */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Wir nutzen einen kombinierten Selektor-Ansatz via :is() für DRY-Code */

/* --- Page-Header --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .page-header {
    background: var(--min-color-surface);
  }
}

[data-theme="dark"] .page-header {
  background: var(--min-color-surface);
}

/* --- Sidebar-Elemente --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sidebar-section,
  :root:not([data-theme="light"]) .lotte-sidebar__section,
  :root:not([data-theme="light"]) .sidebar-card,
  :root:not([data-theme="light"]) .lotte-sidebar-card {
    background: var(--min-color-surface);
  }
}

[data-theme="dark"] .sidebar-section,
[data-theme="dark"] .lotte-sidebar__section,
[data-theme="dark"] .sidebar-card,
[data-theme="dark"] .lotte-sidebar-card {
  background: var(--min-color-surface);
}

/* --- Generische Card --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card {
    background: var(--min-color-surface);
    border-color: var(--min-color-border);
  }
}

[data-theme="dark"] .card {
  background: var(--min-color-surface);
  border-color: var(--min-color-border);
}

/* --- Form-Inputs: background: white --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .form-input,
  :root:not([data-theme="light"]) .form-select {
    background: var(--min-color-surface);
    color: var(--min-color-text);
    border-color: var(--min-color-border);
  }
  :root:not([data-theme="light"]) .service-search-form__input,
  :root:not([data-theme="light"]) .lotte-service-search-form__input {
    background: var(--min-color-surface);
    color: var(--min-color-text);
    border-color: var(--min-color-border);
  }
}

[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select {
  background: var(--min-color-surface);
  color: var(--min-color-text);
  border-color: var(--min-color-border);
}

[data-theme="dark"] .service-search-form__input,
[data-theme="dark"] .lotte-service-search-form__input {
  background: var(--min-color-surface);
  color: var(--min-color-text);
  border-color: var(--min-color-border);
}

/* --- Rubrik-Cards --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rubrik-card,
  :root:not([data-theme="light"]) .lotte-rubrik-card {
    background: var(--min-color-surface);
    border-color: var(--min-color-border);
  }
}

[data-theme="dark"] .rubrik-card,
[data-theme="dark"] .lotte-rubrik-card {
  background: var(--min-color-surface);
  border-color: var(--min-color-border);
}

/* --- Feature-Cards --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .feature-card {
    background: var(--min-color-surface);
  }
}

[data-theme="dark"] .feature-card {
  background: var(--min-color-surface);
}

/* --- Info-Box / Notice: white hintergrund --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .info-box {
    background: var(--min-color-surface);
    border-color: var(--min-color-border);
  }
  :root:not([data-theme="light"]) .info-box--info {
    background: color-mix(in srgb, var(--min-color-secondary) 8%, var(--min-color-surface));
  }
  :root:not([data-theme="light"]) .notice {
    background: color-mix(in srgb, var(--min-color-accent) 8%, var(--min-color-surface));
    border-color: color-mix(in srgb, var(--min-color-accent) 20%, transparent);
  }
  :root:not([data-theme="light"]) .notice--info {
    background: color-mix(in srgb, var(--min-color-primary) 8%, var(--min-color-surface));
  }
}

[data-theme="dark"] .info-box {
  background: var(--min-color-surface);
  border-color: var(--min-color-border);
}

[data-theme="dark"] .info-box--info {
  background: color-mix(in srgb, var(--min-color-secondary) 8%, var(--min-color-surface));
}

[data-theme="dark"] .notice {
  background: color-mix(in srgb, var(--min-color-accent) 8%, var(--min-color-surface));
  border-color: color-mix(in srgb, var(--min-color-accent) 20%, transparent);
}

[data-theme="dark"] .notice--info {
  background: color-mix(in srgb, var(--min-color-primary) 8%, var(--min-color-surface));
}

/* --- Style-Switcher: background: white --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) 
  :root:not([data-theme="light"]) 
}

[data-theme="dark"] 

[data-theme="dark"] 

/* --- Hero-Suchfeld: background: white --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero__search input {
    background: var(--lotte-white-15);
    color: #ffffff;
  }
  :root:not([data-theme="light"]) .hero__search input::placeholder {
    color: var(--lotte-white-55);
  }
}

[data-theme="dark"] .hero__search input {
  background: var(--lotte-white-15);
  color: #ffffff;
}

[data-theme="dark"] .hero__search input::placeholder {
  color: var(--lotte-white-55);
}

/* --- Chatbot-Panel: background: white/var(--mandant-bg) --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lotte-chatbot__panel {
    background: var(--min-color-surface);
    border-color: var(--min-color-border);
    box-shadow: 0 8px 32px var(--lotte-shadow-50);
  }
  :root:not([data-theme="light"]) .lotte-chatbot__body {
    color: var(--min-color-text);
  }
}

[data-theme="dark"] .lotte-chatbot__panel {
  background: var(--min-color-surface);
  border-color: var(--min-color-border);
  box-shadow: 0 8px 32px var(--lotte-shadow-50);
}

[data-theme="dark"] .lotte-chatbot__body {
  color: var(--min-color-text);
}

/* --- Mosaic-Dashboard-Tiles: background: white --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lotte-mosaic-tile {
    background: var(--min-color-surface);
    border-color: var(--min-color-border);
  }
  :root:not([data-theme="light"]) .lotte-mosaic-tile--welcome {
    background: var(--min-color-bg);
  }
  :root:not([data-theme="light"]) .lotte-mosaic-search {
    background: var(--min-color-bg);
    border-color: var(--min-color-border);
  }
  :root:not([data-theme="light"]) .lotte-mosaic-search input {
    color: var(--min-color-text);
  }
}

[data-theme="dark"] .lotte-mosaic-tile {
  background: var(--min-color-surface);
  border-color: var(--min-color-border);
}

[data-theme="dark"] .lotte-mosaic-tile--welcome {
  background: var(--min-color-bg);
}

[data-theme="dark"] .lotte-mosaic-search {
  background: var(--min-color-bg);
  border-color: var(--min-color-border);
}

[data-theme="dark"] .lotte-mosaic-search input {
  color: var(--min-color-text);
}

/* --- News-Karten (lotte-news-card) --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lotte-news-card {
    background: var(--min-color-surface);
    border-color: var(--min-color-border);
  }
}

[data-theme="dark"] .lotte-news-card {
  background: var(--min-color-surface);
  border-color: var(--min-color-border);
}

/* --- Event-Karten (lotte-event-card) --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lotte-event-card {
    background: var(--min-color-surface);
    border-color: var(--min-color-border);
  }
}

[data-theme="dark"] .lotte-event-card {
  background: var(--min-color-surface);
  border-color: var(--min-color-border);
}

/* --- Weißer Lotte-Button --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lotte-btn--white {
    background: var(--min-color-surface);
    color: var(--min-color-text);
    border-color: var(--min-color-border);
  }
  :root:not([data-theme="light"]) .lotte-btn--white:hover {
    background: var(--min-color-bg);
    border-color: var(--min-color-primary);
    color: var(--min-color-primary);
  }
}

[data-theme="dark"] .lotte-btn--white {
  background: var(--min-color-surface);
  color: var(--min-color-text);
  border-color: var(--min-color-border);
}

[data-theme="dark"] .lotte-btn--white:hover {
  background: var(--min-color-bg);
  border-color: var(--min-color-primary);
  color: var(--min-color-primary);
}

/* --- Btn --outline (transparent auf hell): auf dunkel Farbe anpassen --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn--outline {
    color: #7ec8e3;
    border-color: #7ec8e3;
  }
  :root:not([data-theme="light"]) .btn--outline:hover {
    background: #145675;
    color: #ffffff;
  }
  :root:not([data-theme="light"]) .btn--ghost {
    color: var(--min-color-muted);
    border-color: var(--min-color-border);
  }
  :root:not([data-theme="light"]) .btn--ghost:hover {
    background: var(--min-color-surface);
  }
}

[data-theme="dark"] .btn--outline {
  color: #7ec8e3;
  border-color: #7ec8e3;
}

[data-theme="dark"] .btn--outline:hover {
  background: #145675;
  color: #ffffff;
}

[data-theme="dark"] .btn--ghost {
  color: var(--min-color-muted);
  border-color: var(--min-color-border);
}

[data-theme="dark"] .btn--ghost:hover {
  background: var(--min-color-surface);
}



/* ==========================================================================
 * TEIL 3: ENTWURF 1 (aus mandant-entwurf1.css)
 * V6 Farbstark + Kundenfeedback Korrekturschleife 1
 * ========================================================================== */


  /* ==========================================================================
   * TOKEN OVERRIDES - Entwurf 1
   * Basis: V6. ENTFERNT: --lotte-accent. NEU: --lotte-gradient-ac, --lotte-transition
   * ========================================================================== */

  :root {
    /* Core colors (unchanged from V6) */
    --lotte-primary:       #145675;
    --lotte-primary-dark:  #0D3D55;
    --lotte-green:         #84BD00;
    --lotte-green-dark:    #5A8500;
    --lotte-green-light:   #A8D84A;
    --lotte-text:          #000000;
    --lotte-text-body:     #1A1A1A;
    --lotte-bg:            #FFFFFF;
    --lotte-surface:       #F2F7F0;
    --lotte-surface-blue:  #EDF4F8;
    --lotte-border:        #D4DDD0;

    /* --lotte-accent (#CC0019) is REMOVED. No red anywhere in Entwurf 1. */

    /* Typography */
    --lotte-font:          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --lotte-font-size:     1.25rem;

    /* Border radii */
    --lotte-radius:        6px;
    --lotte-radius-sm:     4px;
    --lotte-radius-lg:     8px;

    /* Spacing */
    --lotte-space-section: clamp(3.5rem, 7vw, 5rem);
    --lotte-nav-height:         6.5rem;
    --lotte-logo-height:        calc(var(--lotte-nav-height) - 1.5rem); /* = 5rem desktop */
    --lotte-logo-height-mobile: calc(var(--lotte-nav-height) - 2rem);   /* = 4.5rem mobile */

    /* Transition (updated: 200ms per brief) */
    --lotte-transition:      200ms ease;
    --lotte-transition-slow: 600ms ease;

    /* Green gradient (kept from V6 for misc usage) */
    --lotte-gradient-green: linear-gradient(105deg,
      #84BD00 0%,
      #7AB300 20%,
      #6FA600 45%,
      #5A8F00 70%,
      #4A7A00 100%
    );

    /* NEW: A&C gradient strong (green-to-blue) — customer request from Farbverlauf.jpg */
    /* Static fallback first, then color-mix version */
    --lotte-gradient-ac: linear-gradient(105deg,
      #84BD00 0%,
      #4A8F2A 50%,
      #145675 100%
    );
    --lotte-gradient-ac: linear-gradient(105deg,
      var(--lotte-green) 0%,
      color-mix(in srgb, var(--lotte-green) 60%, var(--lotte-primary)) 50%,
      var(--lotte-primary) 100%
    );

    /* NEW: A&C soft gradient — pale version for Aktuelles section background */
    /* Static fallback first, then color-mix version */
    --lotte-gradient-ac-soft: linear-gradient(105deg,
      #EEF7E0 0%,
      #EDF4F8 100%
    );
    --lotte-gradient-ac-soft: linear-gradient(105deg,
      color-mix(in srgb, var(--lotte-green) 15%, var(--lotte-bg)) 0%,
      color-mix(in srgb, var(--lotte-primary) 12%, var(--lotte-bg)) 100%
    );
    /* Map minCore tokens to Lotte tokens — fixes buttons, links, CEs */
    /* @fix 2026-04-24 (Bug 8 ε1): --min-color-accent war auf --lotte-green (#84BD00) gemapped,
       widersprach design-tokens.json colors.accent.usage ("Akzente, wichtige CTAs" = institutional-blue).
       Korrektur: auf --lotte-primary (#145675) — konsistent mit Block-Muster und Brand-Rolle. */
    --min-color-primary: var(--lotte-primary);
    --min-color-accent: var(--lotte-primary);
    --min-color-bg: #FFFFFF;
    --min-color-text: var(--lotte-text-body);
    --min-color-surface: var(--lotte-surface);
    --min-color-border: var(--lotte-border);
    --min-radius-md: var(--lotte-radius);
    --min-radius-lg: var(--lotte-radius-lg);
    --min-transition: var(--lotte-transition);
    --min-font-body: var(--lotte-font);

    /* Overlay & Transparency Tokens */
    /* Mosaic-Kachel Topic-Akzente (2026-04-17: tokenisiert) */
    --lotte-accent-teal:          #0d9488;
    --lotte-accent-amber:         #d97706;
    --lotte-accent-slate:         #64748b;

    --lotte-overlay-dark:         rgba(0, 40, 80, 0.40);
    --lotte-overlay-dark-light:   rgba(0, 40, 80, 0.15);
    --lotte-overlay-dark-medium:  rgba(0, 40, 80, 0.20);
    --lotte-overlay-dark-strong:  rgba(0, 40, 80, 0.45);
    --lotte-overlay-dark-soft:    rgba(0, 40, 80, 0.35);
    --lotte-overlay-dark-faint:   rgba(0, 40, 80, 0.10);
    --lotte-overlay-dark-12:      rgba(0, 40, 80, 0.12);
    --lotte-overlay-dark-25:      rgba(0, 40, 80, 0.25);
    --lotte-overlay-dark-30:      rgba(0, 40, 80, 0.30);
    --lotte-overlay-dark-08:      rgba(0, 40, 80, 0.08);
    --lotte-overlay-deep:         rgba(0, 20, 40, 0.75);
    --lotte-overlay-deep-light:   rgba(0, 20, 40, 0.30);

    /* Text-shadow dark tokens */
    --lotte-textshadow-dark:      rgba(0, 20, 50, 0.55);
    --lotte-textshadow-dark-soft: rgba(0, 20, 50, 0.50);
    --lotte-textshadow-dark-med:  rgba(0, 20, 50, 0.60);
    --lotte-textshadow-deep:      rgba(0, 20, 60, 0.35);
    --lotte-textshadow-deep-alt:  rgba(0, 20, 60, 0.40);

    /* Primary color transparency tokens */
    --lotte-primary-04:           rgba(26, 82, 118, 0.04);
    --lotte-primary-06:           rgba(26, 82, 118, 0.06);
    --lotte-primary-08:           rgba(26, 82, 118, 0.08);
    --lotte-primary-15:           rgba(26, 82, 118, 0.15);
    --lotte-primary-a90:          rgba(20, 86, 117, 0.90);
    --lotte-primary-a92:          rgba(20, 86, 117, 0.92);
    --lotte-primary-a88:          rgba(20, 86, 117, 0.88);

    /* White transparency tokens */
    --lotte-white-05:             rgba(255, 255, 255, 0.05);
    --lotte-white-08:             rgba(255, 255, 255, 0.08);
    --lotte-white-10:             rgba(255, 255, 255, 0.10);
    --lotte-white-15:             rgba(255, 255, 255, 0.15);
    --lotte-white-20:             rgba(255, 255, 255, 0.20);
    --lotte-white-22:             rgba(255, 255, 255, 0.22);
    --lotte-white-25:             rgba(255, 255, 255, 0.25);
    --lotte-white-40:             rgba(255, 255, 255, 0.40);
    --lotte-white-55:             rgba(255, 255, 255, 0.55);
    --lotte-white-60:             rgba(255, 255, 255, 0.60);
    --lotte-white-70:             rgba(255, 255, 255, 0.70);
    --lotte-white-85:             rgba(255, 255, 255, 0.85);
    --lotte-white-90:             rgba(255, 255, 255, 0.90);
    --lotte-white-95:             rgba(255, 255, 255, 0.95);

    /* Black shadow tokens */
    --lotte-shadow-xs:            rgba(0, 0, 0, 0.05);
    --lotte-shadow-sm:            rgba(0, 0, 0, 0.06);
    --lotte-shadow-md:            rgba(0, 0, 0, 0.08);
    --lotte-shadow-10:            rgba(0, 0, 0, 0.10);
    --lotte-shadow-12:            rgba(0, 0, 0, 0.12);
    --lotte-shadow-15:            rgba(0, 0, 0, 0.15);
    --lotte-shadow-18:            rgba(0, 0, 0, 0.18);
    --lotte-shadow-20:            rgba(0, 0, 0, 0.20);
    --lotte-shadow-25:            rgba(0, 0, 0, 0.25);
    --lotte-shadow-30:            rgba(0, 0, 0, 0.30);
    --lotte-shadow-35:            rgba(0, 0, 0, 0.35);
    --lotte-shadow-40:            rgba(0, 0, 0, 0.40);
    --lotte-shadow-50:            rgba(0, 0, 0, 0.50);
    --lotte-shadow-60:            rgba(0, 0, 0, 0.60);

    /* mmenu border tokens */
    --lotte-mm-border-light:      rgba(0, 0, 0, 0.05);
    --lotte-mm-border:            rgba(0, 0, 0, 0.06);
    --lotte-mm-border-dark:       rgba(0, 0, 0, 0.08);

    /* Blue accent light tokens */
    --lotte-accent-light-08:      rgba(96, 165, 250, 0.08);
  }

  /* Global button fix: white text on primary buttons — higher specificity instead of !important */
  html body .ce-btn--primary,
  html body .btn--primary {
    color: #FFFFFF;
  }

  /* ==========================================================================
   * BASE
   * ========================================================================== */

  body {
    padding-top: var(--lotte-nav-height);
    background: var(--lotte-bg);
    color: var(--lotte-text-body);
    font-family: var(--lotte-font);
    font-size: var(--lotte-font-size);
    line-height: 1.65;
  }

  p, li, td, th, dd, dt, address, blockquote {
    color: var(--lotte-text-body);
  }

  a {
    color: var(--lotte-primary);
    transition: color var(--lotte-transition);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }

  a:hover {
    color: var(--lotte-green-dark);
  }

  /* Hide all section kickers globally in Entwurf 1 — customer feedback */
  .lotte-section__kicker {
    display: none;
  }

  /* ==========================================================================
   * HERO
   * Changes vs V6: kicker is white (not green), subtitle = welcome text
   * ========================================================================== */

  .lotte-hero {
    position: relative;
    min-height: clamp(520px, 75vh, 800px);
    display: grid;
    align-items: end;
    overflow: hidden;
    background: var(--lotte-primary-dark);
  }

  .lotte-hero__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .lotte-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    display: block;
    animation: lotte-hero-zoom 20s ease-in-out infinite alternate;
  }

  @keyframes lotte-hero-zoom {
    0%   { transform: scale(1); }
    100% { transform: scale(1.06); }
  }

  .lotte-hero__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      var(--lotte-overlay-dark-30) 0%,
      var(--lotte-overlay-dark-08) 50%,
      transparent 100%
    );
    pointer-events: none;
  }

  .lotte-hero__panel {
    position: relative;
    z-index: 2;
    width: fit-content;
    max-width: min(640px, 55%);
    margin: 0 0 3rem clamp(1.5rem, 5vw, 4rem);
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem);
    /* Static fallback, then color-mix */
    background: var(--lotte-primary-a92);
    background: color-mix(in srgb, var(--lotte-primary) 92%, transparent);
    border-radius: var(--lotte-radius-lg);
    backdrop-filter: blur(4px);
  }

  /* Kicker: WHITE, not green — customer request: no colored text */
  .lotte-hero__kicker {
    display: inline-block;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-bottom: 0.75rem;
  }

  .lotte-hero__title {
    font-size: clamp(2.25rem, 5.5vw, 4rem);
    font-weight: 800;
    line-height: 1.08;
    color: #FFFFFF;
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 12px var(--lotte-textshadow-deep);
  }

  .lotte-hero__subtitle {
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    color: var(--lotte-white-90);
    margin: 0 0 1.5rem;
    line-height: 1.55;
    max-width: 44ch;
  }

  /* Search field */
  .lotte-hero__search {
    display: flex;
    max-width: 28rem;
    border-radius: var(--lotte-radius);
    overflow: hidden;
    box-shadow: 0 4px 20px var(--lotte-shadow-30);
  }

  .lotte-hero__search input[type="search"] {
    flex: 1;
    padding: 0.875rem 1.25rem;
    font-size: 1.0625rem;
    font-family: var(--lotte-font);
    border: none;
    background: #FFFFFF;
    color: var(--lotte-text-body);
    outline: none;
    min-height: 52px;
  }

  .lotte-hero__search input[type="search"]::placeholder {
    color: #808080;
  }

  .lotte-hero__search button {
    padding: 0.875rem 1.5rem;
    background: var(--min-brand-accent);
    color: var(--min-brand-on-accent);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--lotte-transition);
    min-height: 52px;
    min-width: 52px;
  }

  .lotte-hero__search button:hover {
    background: var(--min-brand-accent-hover);
  }

  @media (max-width: 599px) {
    .lotte-hero__panel {
      max-width: 90%;
      margin: 0 0 1.5rem 1rem;
    }
  }

  /* ==========================================================================
   * SECTIONS
   * ========================================================================== */

  .lotte-section {
    padding-block: var(--lotte-space-section);
  }

  .lotte-section--white {
    background: var(--lotte-bg);
  }

  /* Section 2: Schnellzugriffe — compact padding */
  .lotte-section--schnellzugriffe {
    background: var(--lotte-bg);
    padding-block: clamp(2rem, 4vw, 3rem);
  }

  /* Section 3: Aktuelles — A&C soft gradient */
  .lotte-section--gradient-soft {
    /* Static fallback */
    background: #EEF7E0;
    background: var(--lotte-gradient-ac-soft);
  }

  /* Section 4: Antraege-Leiste — full-width gradient on the section itself */
  .lotte-section--service-bar {
    background: var(--lotte-gradient-ac);
    padding-block: clamp(1.5rem, 3vw, 2.5rem);
  }

  /* Section 6: Fokusthemen — A&C strong gradient */
  .lotte-section--gradient-strong {
    /* Static fallback */
    background: #145675;
    background: var(--lotte-gradient-ac);
    color: #FFFFFF;
  }

  .lotte-section__header {
    margin-bottom: 2.5rem;
  }

  .lotte-section__title {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--lotte-text);
    margin: 0 0 0.75rem;
    letter-spacing: -0.015em;
  }

  .lotte-section--gradient-strong .lotte-section__title {
    color: #FFFFFF;
  }

  .lotte-section--gradient-strong .lotte-section__label {
    color: #FFFFFF;
    opacity: 0.85;
  }

  .lotte-section__subtitle {
    font-size: 1.125rem;
    color: var(--lotte-text-body);
    max-width: 65ch;
    line-height: 1.6;
    margin: 0;
  }

  .lotte-section__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--lotte-primary);
    text-decoration: none;
    transition: gap var(--lotte-transition), color var(--lotte-transition);
  }

  .lotte-section__cta:hover {
    color: var(--lotte-green-dark);
    gap: 0.75rem;
  }

  .lotte-section--gradient-strong .lotte-section__cta {
    color: var(--lotte-green-light);
  }

  .lotte-section--gradient-strong .lotte-section__cta:hover {
    color: #FFFFFF;
  }

  /* ==========================================================================
   * SCHNELLZUGRIFFE — Entwurf 1
   * Quadratisch (aspect-ratio: 1:1), blue vertical bar left, no section header
   * ========================================================================== */

  .lotte-services {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Tablet: 3 per row */
  @media (max-width: 899px) {
    .lotte-services {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* Mobile: 2 per row */
  @media (max-width: 599px) {
    .lotte-services {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .lotte-services > li {
    /* Pass through for aspect-ratio on child */
    display: block;
  }

  .lotte-service {
    /* Customer requirement: 1:1 square */
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 1rem;
    background: var(--lotte-bg);
    border-radius: var(--lotte-radius);
    text-decoration: none;
    color: var(--lotte-text-body);
    text-align: center;
    /* Brand element: blue vertical bar left */
    border-left: 4px solid var(--lotte-primary);
    border-top: 1px solid var(--lotte-border);
    border-right: 1px solid var(--lotte-border);
    border-bottom: 1px solid var(--lotte-border);
    width: 100%;
    transition:
      border-left-color var(--lotte-transition),
      background var(--lotte-transition);
  }

  .lotte-service:hover {
    border-left-color: var(--lotte-green);
    /* Static fallback */
    background: #F5F9FC;
    background: color-mix(in srgb, var(--lotte-primary) 4%, var(--lotte-bg));
  }

  .lotte-service:hover .lotte-service__icon {
    color: var(--lotte-green);
  }

  .lotte-service:focus-visible {
    outline: 3px solid var(--lotte-primary);
    outline-offset: 2px;
  }

  /* Icon: primary blue, no background box */
  .lotte-service__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lotte-primary);
    transition: color var(--lotte-transition);
    flex-shrink: 0;
  }

  .lotte-service__label {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--lotte-text-body);
  }

  /* ==========================================================================
   * AKTUELLES + BEKANNTMACHUNGEN — Tab navigation
   * ========================================================================== */

  /* Tab bar */
  .lotte-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--lotte-border);
    margin-bottom: 2rem;
    overflow: inherit;
  }

  /* Kill rogue scrollbar on news section — every element */
  .lotte-section--gradient-soft *,
  .lotte-section--gradient-soft {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .lotte-section--gradient-soft *::-webkit-scrollbar,
  .lotte-section--gradient-soft::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .lotte-tab-btn {
    padding: 0.875rem 1.5rem;
    font-size: 1.0625rem;
    font-weight: 400;
    font-family: var(--lotte-font);
    color: var(--lotte-text-body);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color var(--lotte-transition), border-bottom-color var(--lotte-transition);
    white-space: nowrap;
    flex-shrink: 0;
  }

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

  .lotte-tab-btn[aria-selected="true"] {
    color: var(--lotte-primary);
    font-weight: 700;
    border-bottom-color: var(--lotte-primary);
  }

  .lotte-tab-btn:focus-visible {
    outline: 3px solid var(--lotte-primary);
    outline-offset: 2px;
    border-radius: var(--lotte-radius-sm);
  }

  /* Tab panels */
  .lotte-tab-panel {
    display: none;
    /* Fix: hide ALL scrollbars — no visible scrollbar anywhere */
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .lotte-tab-panel::-webkit-scrollbar {
    display: none;
  }

  .lotte-tab-panel[aria-hidden="false"] {
    display: block;
  }

  /* News grid: featured + compact list */
  .lotte-news-grid {
    display: grid;
    gap: 1.5rem;
  }

  @media (min-width: 768px) {
    .lotte-news-grid {
      display: flex;
      gap: 1.5rem;
      height: 520px;
    }
    .lotte-news-grid > .lotte-news-featured {
      flex: 1.3;
      height: 100%;
    }
    .lotte-news-grid > div:last-child {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      height: 100%;
    }
    .lotte-news-grid > div:last-child .lotte-news-compact {
      flex: 1;
      border-radius: 0;
      border-left: 4px solid var(--lotte-green, #84BD00);
      border-bottom: none;
      align-content: center;
      border-radius: var(--lotte-radius);
    }
  }

  .lotte-news-featured {
    position: relative;
    border-radius: var(--lotte-radius);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--lotte-primary-dark);
  }

  @media (min-width: 768px) {
    .lotte-news-featured {
      aspect-ratio: auto;
    }
  }

  .lotte-news-featured img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--lotte-transition-slow);
  }

  .lotte-news-featured:hover img {
    transform: scale(1.04);
  }

  .lotte-news-featured__panel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: fit-content;
    max-width: 80%;
    padding: 1.5rem 2rem 1.5rem 1.5rem;
    /* Static fallback */
    background: var(--lotte-primary-a90);
    background: color-mix(in srgb, var(--lotte-primary) 90%, transparent);
    border-radius: 0 var(--lotte-radius-lg) 0 0;
    backdrop-filter: blur(4px);
  }

  .lotte-news-featured__title {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.375rem;
  }

  .lotte-news-featured__title a {
    color: #FFFFFF;
    text-decoration: none;
  }

  .lotte-news-featured__title a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }

  .lotte-news-featured__date {
    font-size: 0.875rem;
    color: var(--lotte-white-70);
  }

  /* Compact news cards: thumbnail + text, green accent border (like V6) */
  .lotte-news-compact {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 1rem;
    align-items: stretch; /* stretch so image and text column are same height */
    padding: 1rem;
    background: var(--lotte-bg);
    border-radius: var(--lotte-radius);
    border-left: 4px solid var(--lotte-green, #84BD00);
    transition: box-shadow var(--lotte-transition), transform var(--lotte-transition);
  }

  .lotte-news-compact:hover {
    box-shadow: 0 4px 16px var(--lotte-mm-border-dark);
    transform: translateY(-2px);
  }

  .lotte-news-compact__image {
    aspect-ratio: 1;
    border-radius: var(--lotte-radius-sm);
    overflow: hidden;
  }

  .lotte-news-compact__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* News compact text body: flex column so meta is pushed to bottom */
  .lotte-news-compact__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .lotte-news-compact__excerpt {
    margin-top: auto;
  }

  .lotte-news-compact__date {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--lotte-green-dark, #5A8500);
    margin-bottom: 0.25rem;
  }

  .lotte-news-compact__title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.25rem;
  }

  .lotte-news-compact__title a {
    color: var(--lotte-text-body);
    text-decoration: none;
  }

  .lotte-news-compact__title a:hover {
    color: var(--lotte-primary);
  }

  .lotte-news-compact__excerpt {
    font-size: 1rem;
    color: var(--lotte-text-body);
    line-height: 1.5;
    margin: 0;
  }

  /* Bekanntmachungen list */
  .lotte-bekannt-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .lotte-bekannt-item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--lotte-border);
  }

  .lotte-bekannt-item:last-child {
    border-bottom: none;
  }

  .lotte-bekannt-item__icon {
    flex-shrink: 0;
    color: var(--lotte-primary);
    display: flex;
    align-items: center;
    margin-top: 0.125rem;
  }

  .lotte-bekannt-item__body {
    flex: 1;
    min-width: 0;
  }

  .lotte-bekannt-item__title {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 0.125rem;
  }

  .lotte-bekannt-item__title a {
    color: var(--lotte-text-body);
    text-decoration: none;
  }

  .lotte-bekannt-item__title a:hover {
    color: var(--lotte-primary);
  }

  .lotte-bekannt-item__date {
    display: block;
    font-size: 0.875rem;
    /* Static fallback */
    color: #666666;
    color: color-mix(in srgb, var(--lotte-text-body) 60%, transparent);
  }

  /* ==========================================================================
   * ANTRAEGE-LEISTE — Section 4
   * Single row: text left, CTA button right. Clean, no decoration.
   * ========================================================================== */

  .lotte-service-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem 2rem;
    padding: 0;
    background: none;
  }

  .lotte-service-bar__text {
    font-size: var(--lotte-font-size);
    font-weight: 400;
    color: #FFFFFF;
    margin: 0;
    flex: 1 1 280px;
  }

  .lotte-service-bar__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #FFFFFF;
    color: var(--lotte-primary-dark);
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--lotte-font);
    text-decoration: none;
    border-radius: var(--lotte-radius);
    transition: background var(--lotte-transition);
    flex-shrink: 0;
  }

  .lotte-service-bar__btn:hover {
    background: var(--lotte-white-85);
    color: var(--lotte-primary-dark);
  }

  .lotte-service-bar__btn:focus-visible {
    outline: 3px solid var(--lotte-primary);
    outline-offset: 2px;
  }

  @media (max-width: 599px) {
    .lotte-service-bar {
      flex-direction: column;
      align-items: stretch;
    }

    .lotte-service-bar__btn {
      justify-content: center;
    }
  }

  /* ==========================================================================
   * VERANSTALTUNGEN — 2x2 grid with green date badges (like V6)
   * ========================================================================== */

  .lotte-event-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  @media (min-width: 768px) {
    .lotte-event-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .lotte-event-card {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.25rem;
    background: var(--lotte-bg);
    border-radius: var(--lotte-radius);
    transition: box-shadow var(--lotte-transition);
  }

  .lotte-event-card:hover {
    box-shadow: 0 4px 16px var(--lotte-shadow-sm);
  }

  /* Date badge: primary blue default */
  .lotte-event-card__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 0.5rem 0.625rem;
    background: var(--lotte-primary);
    color: #FFFFFF;
    border-radius: var(--lotte-radius);
    text-align: center;
    flex-shrink: 0;
  }

  /* Color variants for event date badges — visual distinction by category */
  .lotte-event-card__date--blue {
    background: var(--lotte-primary, #1a5276);
  }
  .lotte-event-card__date--green {
    background: var(--lotte-green, #84BD00);
  }
  .lotte-event-card__date--teal {
    background: #2a9d8f;
  }
  .lotte-event-card__date--amber {
    background: #e76f51;
  }

  .lotte-event-card__day {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
  }

  .lotte-event-card__month {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.125rem;
    opacity: 0.85;
  }

  .lotte-event-card__body {
    flex: 1;
    min-width: 0;
  }

  .lotte-event-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.375rem;
  }

  .lotte-event-card__title a {
    color: var(--lotte-text-body);
    text-decoration: none;
  }

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

  .lotte-event-card__meta {
    font-size: 0.9375rem;
    color: #666666;
    color: color-mix(in srgb, var(--lotte-text-body) 60%, transparent);
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    align-items: center;
    margin: 0;
  }

  .lotte-event-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }

  /* App hint below events */
  .lotte-events-app-hint {
    margin-top: 1.25rem;
    font-size: 0.9375rem;
    /* Static fallback */
    color: #666666;
    color: color-mix(in srgb, var(--lotte-text-body) 60%, transparent);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
  }

  .lotte-events-app-hint a {
    color: var(--lotte-primary);
    font-weight: 600;
    text-decoration: none;
  }

  .lotte-events-app-hint a:hover {
    color: var(--lotte-green-dark);
    text-decoration: underline;
  }

  /* Mobile: hide location column */
  @media (max-width: 767px) {
    .lotte-col-location {
      display: none;
    }
  }

  /* Mobile: compact table */
  @media (max-width: 599px) {
    .lotte-events-table td {
      padding: 0.75rem 0.5rem;
    }
  }

  /* ==========================================================================
   * FOKUSTHEMEN — Strong A&C gradient bg, no Buergerservice CTA
   * ========================================================================== */

  .lotte-topics {
    display: grid;
    gap: 1.5rem;
  }

  @media (min-width: 600px) {
    .lotte-topics { grid-template-columns: repeat(2, 1fr); }
  }

  @media (min-width: 900px) {
    .lotte-topics { grid-template-columns: repeat(3, 1fr); }
  }

  .lotte-topic-card {
    position: relative;
    border-radius: var(--lotte-radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--lotte-primary-dark);
    display: block;
    text-decoration: none;
  }

  .lotte-topic-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--lotte-transition-slow);
  }

  .lotte-topic-card:hover img {
    transform: scale(1.06);
  }

  .lotte-topic-card:focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: 2px;
  }

  .lotte-topic-card__panel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: fit-content;
    max-width: 85%;
    padding: 1rem 1.5rem 1rem 1.25rem;
    /* Static fallback */
    background: var(--lotte-primary-a88);
    background: color-mix(in srgb, var(--lotte-primary) 88%, transparent);
    border-radius: 0 var(--lotte-radius-lg) 0 0;
    backdrop-filter: blur(3px);
  }

  /* Tag: green-light (Ebene 2) */
  .lotte-topic-card__tag {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lotte-green-light);
    margin-bottom: 0.25rem;
  }

  .lotte-topic-card__title {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
    color: #FFFFFF;
    margin: 0;
  }

  /* ==========================================================================
   * FOOTER — V1 content structure, V6 form language, A&C gradient band
   * ========================================================================== */

  /* ==========================================================================
   * FOOTER — Full-width, unified fonts, WCAG AA contrast
   * Font scale: 1rem (base), 0.875rem (small/meta), 0.8125rem (uppercase titles)
   * ========================================================================== */

  .lotte-footer {
    background: var(--lotte-primary-dark);
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
  }

  /* Gradient band: 6px, A&C strong */
  .lotte-footer::before {
    content: "";
    display: block;
    height: 6px;
    background: #84BD00;
    background: var(--lotte-gradient-ac);
    position: relative;
    z-index: 2;
  }

  /* Kleeblatt watermark entfernt (2026-03-21) */

  /* Footer main container — FULL WIDTH, no max-width */
  .lotte-footer__main {
    position: relative;
    z-index: 1;
    padding: 3rem clamp(1.5rem, 5vw, 4rem) 2rem;
  }

  /* Bottom bar also above overlay */
  .lotte-footer__bottom {
    position: relative;
    z-index: 1;
  }

  /* 3-column grid: Logo+Contact | Öffnungszeiten | Service+Social (Meeting 10.03) */
  .lotte-footer__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  @media (min-width: 640px) {
    .lotte-footer__row {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (min-width: 1024px) {
    .lotte-footer__row {
      grid-template-columns: 1.4fr 1fr 1fr;
      gap: 3rem;
    }
  }

  .lotte-footer__brand {
    padding: 0;
  }

  .lotte-footer__brand img {
    max-width: 180px;
    height: auto;
  }

  .lotte-footer__claim {
    margin: 0.75rem 0 0.375rem;
    font-weight: 600;
    font-size: 1rem;
    color: var(--lotte-white-90);
  }

  .lotte-footer__text {
    color: var(--lotte-white-85);
    line-height: 1.6;
    font-size: 0.875rem;
  }

  /* Column titles: green, uppercase, unified size */
  .lotte-footer__col-title {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lotte-green);
    margin: 0 0 1rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid var(--lotte-white-10);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  /* Link lists */
  .lotte-footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }

  .lotte-footer__link {
    color: var(--lotte-white-85);
    text-decoration: none;
    font-size: 1rem;
    transition: color var(--lotte-transition);
  }

  .lotte-footer__link:hover {
    color: #FFFFFF;
  }

  /* Link with inline icon */
  .lotte-footer__link svg {
    display: inline-block;
    vertical-align: -2px;
    margin-right: 0.375rem;
    opacity: 0.7;
    flex-shrink: 0;
  }

  .lotte-footer__link:hover svg {
    opacity: 1;
  }

  /* Global footer link/text styles — unified */
  .lotte-footer a {
    color: var(--lotte-white-85);
    text-decoration: none;
    font-size: 1rem;
    transition: color var(--lotte-transition);
  }

  .lotte-footer a:hover {
    color: var(--lotte-green-light);
  }

  .lotte-footer p {
    font-size: 1rem;
    color: var(--lotte-white-85);
    line-height: 1.6;
    margin: 0 0 0.5rem;
  }

  .lotte-footer address {
    font-style: normal;
    font-size: 1rem;
    color: var(--lotte-white-85);
    line-height: 1.6;
    margin: 0 0 1rem;
  }

  .lotte-footer__logo {
    height: 56px;
    width: auto;
    display: block;
    margin-bottom: 1.5rem;
  }

  .lotte-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }

  /* Opening hours */
  .lotte-footer__hours {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .lotte-footer__hours li {
    font-size: 1rem;
    color: var(--lotte-white-85);
    line-height: 1.5;
  }

  /* Contact lines: phone/email */
  .lotte-footer__contact-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
    font-size: 1rem;
  }

  .lotte-footer__contact-line svg {
    flex-shrink: 0;
    opacity: 0.85;
  }

  .lotte-footer__contact-line a {
    color: var(--lotte-white-90);
    text-decoration: none;
    border-bottom: 1px solid var(--lotte-white-25);
    transition: border-color var(--lotte-transition);
  }

  .lotte-footer__contact-line a:hover {
    border-color: var(--lotte-white-70);
  }

  /* Social icons — bigger */
  .lotte-footer__social {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
  }

  .lotte-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--lotte-white-10);
    color: var(--lotte-white-85);
    transition: background var(--lotte-transition), color var(--lotte-transition);
  }

  .lotte-footer__social-link:hover {
    background: var(--lotte-green);
    color: #FFFFFF;
  }

  /* App download links */
  .lotte-footer__app-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
  }

  .lotte-footer__app-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--lotte-white-90);
    text-decoration: none;
    padding: 0.5rem 0;
    transition: color var(--lotte-transition);
  }

  .lotte-footer__app-link:hover {
    color: var(--lotte-green-light);
  }

  /* Quick actions bar */
  .lotte-footer__actions-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
    padding: 1.25rem 0 0;
    margin-top: 2rem;
    border-top: 1px solid var(--lotte-white-10);
  }

  .lotte-footer__action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--lotte-radius);
    background: var(--lotte-white-08);
    color: var(--lotte-white-85);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background var(--lotte-transition), color var(--lotte-transition);
  }

  .lotte-footer__action:hover {
    background: var(--lotte-white-15);
    color: #FFFFFF;
  }

  .lotte-footer__action svg {
    opacity: 0.7;
    width: 18px;
    height: 18px;
  }

  /* Emergency numbers */
  .lotte-footer__emergency {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    width: 100%;
  }

  .lotte-footer__emergency-title {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lotte-green);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
  }

  .lotte-footer__emergency-title svg {
    vertical-align: -2px;
    margin-right: 0.25rem;
  }

  .lotte-footer__emergency-item {
    font-size: 0.875rem;
    color: var(--lotte-white-85);
    white-space: nowrap;
  }

  /* Bottom copyright bar — full width.
     No background: let the Kleeblatt watermark show through the entire footer.
     Subtle border-top separates this bar from the main content area. */
  .lotte-footer__bottom {
    border-top: 1px solid var(--lotte-white-10);
    padding: 1.25rem clamp(1.5rem, 5vw, 4rem);
  }

  .lotte-footer__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .lotte-footer__copyright {
    font-size: 0.875rem;
    color: var(--lotte-white-85);
    margin: 0;
  }

  .lotte-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
  }

  .lotte-footer__legal a {
    font-size: 0.875rem;
    color: var(--lotte-white-85);
  }

  .lotte-footer__legal a:hover {
    color: var(--lotte-green-light);
  }

  /* ==========================================================================
   * HEADER
   * ========================================================================== */

  .lotte-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    height: var(--lotte-nav-height);
    background: var(--lotte-bg);
    border-bottom: 2px solid var(--lotte-border);
    transition: box-shadow var(--lotte-transition);
  }

  .lotte-header.scrolled {
    box-shadow: 0 4px 24px var(--lotte-shadow-12);
  }

  .lotte-header__inner {
    height: 100%;
    padding-inline: clamp(1.5rem, 5vw, 4rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }

  .lotte-header__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
  }

  /* Logo: token-driven height + aspect-ratio for CLS prevention */
  .lotte-header__logo img {
    height: var(--lotte-logo-height);
    width: auto;
    aspect-ratio: 700 / 373;
    display: block;
    object-fit: contain;
  }

  .lotte-header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
  }

  .lotte-header__search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: transparent;
    border: 2px solid var(--lotte-border);
    border-radius: var(--lotte-radius);
    color: var(--lotte-primary);
    cursor: pointer;
    transition: all var(--lotte-transition);
  }

  .lotte-header__search-btn:hover {
    background: var(--lotte-surface);
    border-color: var(--lotte-primary);
  }

  .lotte-hamburger {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    background: var(--lotte-primary);
    border: none;
    border-radius: var(--lotte-radius);
    padding: 0.625rem 1rem;
    cursor: pointer;
    transition: background var(--lotte-transition);
    min-height: 48px;
    min-width: 48px;
  }

  .lotte-hamburger:hover {
    background: var(--lotte-primary-dark);
  }

  .lotte-hamburger__bars {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
  }

  .lotte-hamburger__bar {
    display: block;
    width: 2rem;
    height: 3px;
    background: #FFFFFF;
    border-radius: 2px;
    transition: transform var(--lotte-transition), opacity var(--lotte-transition);
  }

  .lotte-hamburger__label {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #FFFFFF;
    line-height: 1;
  }

  .lotte-hamburger[aria-expanded="true"] .lotte-hamburger__bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .lotte-hamburger[aria-expanded="true"] .lotte-hamburger__bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .lotte-hamburger[aria-expanded="true"] .lotte-hamburger__bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .lotte-hamburger[aria-expanded="true"] {
    background: var(--lotte-primary-dark);
  }

  .lotte-hamburger--floating-close {
    position: fixed;
    top: 1.65rem;
    right: clamp(1.5rem, 5vw, 4rem);
    z-index: 1130;
    padding-inline: 0.75rem;
    box-shadow: 0 10px 28px rgba(13, 43, 62, 0.24);
  }

  .lotte-hamburger--floating-close .lotte-hamburger__label {
    display: none;
  }

  @media (max-width: 1023px) {
    .lotte-header__logo img {
      height: var(--lotte-logo-height-mobile);
    }

    .lotte-hamburger__label {
      display: none;
    }

    .lotte-hamburger {
      padding: 0.625rem 0.75rem;
    }
  }

  /* ==========================================================================
   * OFF-CANVAS NAVIGATION
   * Fix V6 bug: overflow-y auto + padding-bottom (last item visible)
   * New: only one accordion panel open at a time (JS handles, CSS styles)
   * ========================================================================== */

  .lotte-offcanvas {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    width: min(380px, 90vw);
    background: var(--lotte-bg);
    box-shadow: -8px 0 32px var(--lotte-shadow-18);
    transform: translateX(100%);
    transition: transform var(--lotte-transition-slow);
    display: flex;
    flex-direction: column;
  }

  .lotte-offcanvas[aria-hidden="false"] {
    transform: translateX(0);
  }

  .lotte-offcanvas__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 2px solid var(--lotte-border);
    flex-shrink: 0;
    background: var(--lotte-primary);
  }

  .lotte-offcanvas__title {
    font-size: 1rem;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
  }

  .lotte-offcanvas__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--lotte-white-10);
    border: 2px solid var(--lotte-white-20);
    border-radius: var(--lotte-radius);
    color: #FFFFFF;
    cursor: pointer;
    transition: background var(--lotte-transition);
  }

  .lotte-offcanvas__close:hover {
    background: var(--lotte-white-20);
  }

  /* Fix: overflow-y auto + padding-bottom ensures last item is reachable */
  .lotte-offcanvas__nav {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 0 4rem;
    -webkit-overflow-scrolling: touch;
  }

  .lotte-offcanvas__item {
    border-bottom: 1px solid var(--lotte-border);
  }

  .lotte-offcanvas__link,
  .lotte-offcanvas__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--lotte-text-body);
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: color var(--lotte-transition), background var(--lotte-transition);
    font-family: var(--lotte-font);
  }

  .lotte-offcanvas__link:hover,
  .lotte-offcanvas__toggle:hover {
    color: var(--lotte-primary);
    background: var(--lotte-surface);
  }

  .lotte-offcanvas__toggle-icon {
    transition: transform var(--lotte-transition);
    color: var(--lotte-primary);
    flex-shrink: 0;
  }

  .lotte-offcanvas__toggle[aria-expanded="true"] .lotte-offcanvas__toggle-icon {
    transform: rotate(180deg);
  }

  /* header-v6.php uses __item-row for the link + toggle row */
  .lotte-offcanvas__item-row {
    display: flex;
    align-items: stretch;
  }

  .lotte-offcanvas__item-row .lotte-offcanvas__link {
    flex: 1;
  }

  /* Submenu: header-v6.php uses .lotte-offcanvas__sub (not __submenu) */
  .lotte-offcanvas__sub {
    display: none;
    background: var(--lotte-surface);
    padding: 0.5rem 0;
  }

  .lotte-offcanvas__sub[aria-hidden="false"] {
    display: block;
  }

  /* Submenu links: header-v6.php uses .lotte-offcanvas__sub-link */
  .lotte-offcanvas__sub-link {
    display: block;
    padding: 0.75rem 1.5rem 0.75rem 2.5rem;
    font-size: 1rem;
    color: var(--lotte-text-body);
    text-decoration: none;
    transition: color var(--lotte-transition), background var(--lotte-transition);
  }

  .lotte-offcanvas__sub-link:hover {
    color: var(--lotte-primary);
    background: var(--lotte-surface-blue);
  }

  /* Meta bar at bottom of offcanvas (phone, a11y links) */
  .lotte-offcanvas__meta {
    flex-shrink: 0;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--lotte-border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
  }

  .lotte-offcanvas__meta-link {
    font-size: 0.9375rem;
    color: var(--lotte-text-body);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: color var(--lotte-transition);
  }

  .lotte-offcanvas__meta-link:hover {
    color: var(--lotte-primary);
  }

  /* Backdrop: styled via JS inline for simplicity */
  .lotte-offcanvas__backdrop {
    display: none;
  }

  /* ==========================================================================
   * UTILITIES
   * ========================================================================== */

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .container {
    max-width: 1300px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
  }

  :focus-visible {
    outline: 3px solid var(--lotte-green);
    outline-offset: 3px;
    border-radius: var(--lotte-radius-sm);
  }

  /* ==========================================================================
   * PAGE HEADER — Shared by all content pages
   * ========================================================================== */

  .lotte-page-header {
    position: relative;
    min-height: clamp(280px, 40vh, 420px);
    display: grid;
    align-items: end;
    overflow: hidden;
    background: var(--lotte-primary-dark);
  }

  .lotte-page-header--compact {
    min-height: clamp(220px, 30vh, 320px);
  }

  .lotte-page-header__media {
    position: absolute;
    inset: 0;
  }

  .lotte-page-header__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .lotte-page-header__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
      var(--lotte-overlay-deep) 0%,
      var(--lotte-overlay-deep-light) 60%,
      transparent 100%
    );
    pointer-events: none;
  }

  .lotte-page-header__content {
    position: relative;
    z-index: 2;
    padding: 2rem 0;
  }

  .lotte-page-header__title {
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 800;
    color: #FFFFFF;
    margin: 0.5rem 0 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 8px var(--lotte-textshadow-deep-alt);
  }

  .lotte-page-header__subtitle {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: var(--lotte-white-85);
    margin: 0.5rem 0 0;
    max-width: 60ch;
  }

  /* Breadcrumb */
  .lotte-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
    font-size: 0.875rem;
  }

  .lotte-breadcrumb__link {
    color: var(--lotte-white-70);
    text-decoration: none;
    transition: color var(--lotte-transition);
  }

  .lotte-breadcrumb__link:hover {
    color: #FFFFFF;
  }

  .lotte-breadcrumb__sep {
    color: var(--lotte-white-40);
    margin-inline: 0.125rem;
  }

  .lotte-breadcrumb__current {
    color: var(--lotte-white-90);
    font-weight: 600;
  }

  /* ==========================================================================
   * CONTENT — Article body, figures, info boxes, lead text
   * ========================================================================== */

  /* WCAG 1.4.8: max 80 chars/line — 67em in relative units (BITV-konform)
   * Higher specificity via html body chain avoids !important */
  html body .lotte-content__body,
  html body .container.ce-content-section,
  html body .ce-content-section {
    max-width: 67em;
  }

  /* Unified typography for ALL content areas (v6 + legacy ce)
   * Higher specificity via html body chain avoids !important */
  html body .lotte-content__lead,
  html body .ce-lead {
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    line-height: 1.65;
    color: var(--lotte-text-body);
    margin: 0 0 2rem;
    font-weight: 400;
    max-width: none;
  }

  .lotte-content__body h2,
  .ce-article h2,
  .ce-content-section h2 {
    font-size: clamp(1.375rem, 2.5vw, 1.75rem);
    font-weight: 800;
    color: var(--lotte-text);
    margin: 2.5rem 0 1rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  .lotte-content__body h3,
  .ce-article h3,
  .ce-content-section h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--lotte-text);
    margin: 2rem 0 0.75rem;
  }

  .lotte-content__body p,
  .ce-article p,
  .ce-content-section p {
    font-size: var(--lotte-font-size, 1.125rem);
    line-height: 1.65;
    color: var(--lotte-text-body);
    margin: 0 0 1.25rem;
  }

  .lotte-content__body ul,
  .lotte-content__body ol,
  .ce-article ul,
  .ce-article ol,
  .ce-content-section ul,
  .ce-content-section ol {
    padding-left: 1.5rem;
    margin: 0 0 1.5rem;
    font-size: var(--lotte-font-size, 1.125rem);
    line-height: 1.65;
  }

  .lotte-content__body li,
  .ce-article li,
  .ce-content-section li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
  }

  .lotte-content__figure {
    margin: 2rem 0;
    border-radius: var(--lotte-radius);
    overflow: hidden;
  }

  .lotte-content__figure img {
    width: 100%;
    height: auto;
    display: block;
  }

  .lotte-content__figure figcaption {
    padding: 0.75rem 0;
    font-size: 0.875rem;
    /* Static fallback */
    color: #999999;
    color: color-mix(in srgb, var(--lotte-text-body) 60%, transparent);
    border-bottom: 1px solid var(--lotte-border);
  }

  .lotte-content__logo-banner {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
  }

  .lotte-content__logo-banner img {
    max-width: 200px;
    height: auto;
  }

  /* Info box */
  .lotte-info-box {
    background: var(--lotte-surface);
    border-left: 4px solid var(--lotte-primary);
    border-radius: 0 var(--lotte-radius) var(--lotte-radius) 0;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
  }

  .lotte-info-box h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--lotte-primary);
    margin: 0 0 0.5rem;
  }

  .lotte-info-box ul {
    padding-left: 1.25rem;
    margin: 0;
  }

  .lotte-info-box li {
    margin-bottom: 0.375rem;
  }

  /* Hours table */
  .lotte-hours-table {
    width: 100%;
    border-collapse: collapse;
  }

  .lotte-hours-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--lotte-border);
    font-size: 1rem;
  }

  .lotte-hours-table tr:last-child td {
    border-bottom: none;
  }

  .lotte-hours-table td:first-child {
    font-weight: 600;
    white-space: nowrap;
    width: 130px;
  }

  /* ==========================================================================
   * ACCORDION — Ferienprogramme etc.
   * ========================================================================== */

  .lotte-accordion {
    margin: 1rem 0 2rem;
  }

  .lotte-accordion__item {
    border: 1px solid var(--lotte-border);
    border-radius: var(--lotte-radius);
    margin-bottom: 0.5rem;
    overflow: hidden;
  }

  .lotte-accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--lotte-text-body);
    cursor: pointer;
    list-style: none;
    transition: background var(--lotte-transition);
  }

  .lotte-accordion__trigger::-webkit-details-marker {
    display: none;
  }

  .lotte-accordion__trigger:hover {
    background: var(--lotte-surface);
  }

  .lotte-accordion__icon {
    flex-shrink: 0;
    transition: transform var(--lotte-transition);
    color: var(--lotte-primary);
  }

  details[open] .lotte-accordion__icon {
    transform: rotate(180deg);
  }

  .lotte-accordion__content {
    padding: 0 1.25rem 1.25rem;
  }

  .lotte-accordion__content p {
    margin: 0 0 0.5rem;
  }

  /* ==========================================================================
   * ORTSTEILE GRID — Lotte im Portrait
   * ========================================================================== */

  .lotte-ortsteile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
  }

  .lotte-ortsteil-card {
    border-radius: var(--lotte-radius);
    overflow: hidden;
    border: 1px solid var(--lotte-border);
    transition: box-shadow var(--lotte-transition);
  }

  .lotte-ortsteil-card:hover {
    box-shadow: 0 4px 16px var(--lotte-mm-border-dark);
  }

  .lotte-ortsteil-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
  }

  .lotte-ortsteil-card__body {
    padding: 1rem 1.25rem;
  }

  .lotte-ortsteil-card__body h3 {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 0.375rem;
    color: var(--lotte-text);
  }

  .lotte-ortsteil-card__body p {
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0;
  }

  /* ==========================================================================
   * RUBRIK TILES — Kachelmenü-Optik (Protokoll §2.1)
   * ========================================================================== */

  .lotte-rubrik-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
  }

  .lotte-rubrik-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.5rem;
    background: var(--lotte-bg);
    border: 1px solid var(--lotte-border);
    border-left: 4px solid var(--lotte-primary);
    border-radius: var(--lotte-radius);
    text-decoration: none;
    color: var(--lotte-text-body);
    transition:
      border-left-color var(--lotte-transition),
      box-shadow var(--lotte-transition),
      transform var(--lotte-transition);
  }

  .lotte-rubrik-tile:hover {
    border-left-color: var(--lotte-green);
    box-shadow: 0 6px 20px var(--lotte-mm-border-dark);
    transform: translateY(-2px);
  }

  .lotte-rubrik-tile:focus-visible {
    outline: 3px solid var(--lotte-primary);
    outline-offset: 2px;
  }

  .lotte-rubrik-tile__icon {
    width: 48px;
    height: 48px;
    color: var(--lotte-primary);
    margin-bottom: 1rem;
    transition: color var(--lotte-transition);
  }

  .lotte-rubrik-tile:hover .lotte-rubrik-tile__icon {
    color: var(--lotte-green);
  }

  .lotte-rubrik-tile__icon svg {
    width: 100%;
    height: 100%;
  }

  .lotte-rubrik-tile__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--lotte-text);
    margin: 0 0 0.5rem;
  }

  .lotte-rubrik-tile__desc {
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0;
    opacity: 0.8;
  }

  /* Photo variant: image at top, text below */
  .lotte-rubrik-tile--photo {
    padding: 0;
    overflow: hidden;
    align-items: stretch;
    text-align: left;
    border-left: none;
    border-bottom: 4px solid var(--lotte-primary);
  }

  .lotte-rubrik-tile--photo:hover {
    border-left: none;
    border-bottom-color: var(--lotte-green);
  }

  .lotte-rubrik-tile__img {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
  }

  .lotte-rubrik-tile__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }

  .lotte-rubrik-tile--photo:hover .lotte-rubrik-tile__img img {
    transform: scale(1.06);
  }

  .lotte-rubrik-tile--photo .lotte-rubrik-tile__title,
  .lotte-rubrik-tile--photo .lotte-rubrik-tile__desc {
    padding: 0 1.25rem;
  }

  .lotte-rubrik-tile--photo .lotte-rubrik-tile__title {
    padding-top: 1.25rem;
  }

  .lotte-rubrik-tile--photo .lotte-rubrik-tile__desc {
    padding-bottom: 1.25rem;
  }

  [data-theme="dark"] .lotte-rubrik-tile--photo {
    border-left: none;
    border-bottom: 4px solid var(--lotte-primary);
  }

  [data-theme="dark"] .lotte-rubrik-tile--photo:hover {
    border-left: none;
    border-bottom-color: var(--lotte-green);
  }

  /* ==========================================================================
   * JUGEND CARDS — Overview page (Protokoll §3)
   * ========================================================================== */

  .lotte-jugend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
  }

  .lotte-jugend-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--lotte-radius);
    overflow: hidden;
    background: var(--lotte-bg);
    text-decoration: none;
    color: var(--lotte-text-body);
    transition: box-shadow var(--lotte-transition), transform var(--lotte-transition);
  }

  .lotte-jugend-card:hover {
    box-shadow: 0 8px 24px var(--lotte-shadow-10);
    transform: translateY(-3px);
  }

  .lotte-jugend-card:focus-visible {
    outline: 3px solid var(--lotte-primary);
    outline-offset: 2px;
  }

  .lotte-jugend-card__image {
    aspect-ratio: 3 / 2;
    overflow: hidden;
  }

  .lotte-jugend-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--lotte-transition-slow);
  }

  .lotte-jugend-card:hover .lotte-jugend-card__image img {
    transform: scale(1.05);
  }

  .lotte-jugend-card__image--logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lotte-surface);
  }

  .lotte-jugend-card__image--logo img {
    width: auto;
    max-width: 60%;
    max-height: 60%;
    object-fit: contain;
  }

  .lotte-jugend-card__body {
    padding: 1.25rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .lotte-jugend-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--lotte-text);
    margin: 0 0 0.25rem;
  }

  .lotte-jugend-card__location {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--lotte-green-dark);
    margin: 0 0 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .lotte-jugend-card__desc {
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0 0 1rem;
    flex: 1;
  }

  .lotte-jugend-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--lotte-primary);
    transition: gap var(--lotte-transition), color var(--lotte-transition);
  }

  .lotte-jugend-card:hover .lotte-jugend-card__cta {
    color: var(--lotte-green-dark);
    gap: 0.625rem;
  }

  /* ==========================================================================
   * NEWS DETAIL — Article meta, related news (Protokoll §2.4)
   * ========================================================================== */

  .lotte-news-detail__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--lotte-border);
  }

  .lotte-news-detail__date {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.9375rem;
    color: var(--lotte-text-body);
  }

  .lotte-news-detail__category {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    /* Static fallback */
    background: #E8F0F5;
    background: color-mix(in srgb, var(--lotte-primary) 12%, transparent);
    color: var(--lotte-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: var(--lotte-radius-sm);
  }

  .lotte-related-news {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1rem 0 2rem;
  }

  .lotte-related-news__item {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem;
    border-radius: var(--lotte-radius);
    text-decoration: none;
    color: var(--lotte-text-body);
    transition: background var(--lotte-transition);
  }

  .lotte-related-news__item:hover {
    background: var(--lotte-surface);
  }

  .lotte-related-news__item img {
    width: 100px;
    height: 68px;
    object-fit: cover;
    border-radius: var(--lotte-radius-sm);
    flex-shrink: 0;
  }

  .lotte-related-news__item h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    color: var(--lotte-text);
  }

  .lotte-related-news__item time {
    font-size: 0.8125rem;
    /* Static fallback */
    color: #999999;
    color: color-mix(in srgb, var(--lotte-text-body) 60%, transparent);
  }

  /* Section label (small text above section title) */
  .lotte-section__label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #3D6B00;
    margin-bottom: 0.25rem;
  }

  /* Mobile footer adjustments */
  @media (max-width: 768px) {
    .lotte-footer__actions-bar {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  /* ==========================================================================
   * BOXED LAYOUT TOGGLE
   * Applied when <html data-layout="boxed"> is set by the a11y toolbar.
   * Default state is full-width (no data-layout attribute needed).
   * Mobile (<1200px): automatically falls back to full-width (no visible box).
   * ========================================================================== */

  @media (min-width: 1200px) {
    [data-layout="boxed"] body {
      background: #e6e9ec;
    }

    [data-layout="boxed"] body > header.lotte-header,
    [data-layout="boxed"] body > main,
    [data-layout="boxed"] body > footer.lotte-footer {
      max-width: 1300px;
      margin-inline: auto;
      background: var(--lotte-bg, #ffffff);
      box-shadow: 0 0 24px rgba(0, 0, 0, 0.12);
    }

    [data-layout="boxed"] body > header.lotte-header {
      border-radius: 0;
    }

    [data-layout="boxed"] body > main {
      border-left: 1px solid var(--lotte-border, #e0e4e8);
      border-right: 1px solid var(--lotte-border, #e0e4e8);
    }

    /* Dark-mode variant: give the box a darker frame */
    [data-theme="dark"][data-layout="boxed"] body {
      background: #0a0f14;
    }
  }

  [data-layout="boxed"] .lotte-header__inner {
    max-width: 1300px;
    margin-inline: auto;
  }

  [data-layout="boxed"] .lotte-footer__main {
    max-width: 1300px;
    margin-inline: auto;
  }

  [data-layout="boxed"] .lotte-footer__bottom-inner {
    max-width: 1300px;
    margin-inline: auto;
  }

  /* ==========================================================================
   * REDUCED MOTION
   * ========================================================================== */

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

    .lotte-news-featured img,
    .lotte-topic-card img,
    .lotte-jugend-card__image img,
    .lotte-service,
    .lotte-offcanvas,
    .lotte-tab-btn {
      transition: none;
    }
  }


  /* ==========================================================================
   * DARK MODE — [data-theme="dark"]
   * Triggered by a11y.js toolbar: sets data-theme="dark" on <html>.
   * Strategy: Override all --lotte-* tokens + component-level hardcodes.
   * Palette: #0F1A24 base (very dark blue-gray), green stays vibrant.
   * WCAG AA contrast maintained throughout.
   * ========================================================================== */

  /* --------------------------------------------------------------------------
   * 1. TOKEN OVERRIDES — dark palette
   * -------------------------------------------------------------------------- */

  [data-theme="dark"] {
    /* Core colors — dark palette */
    --lotte-primary:       #4FA8D4;   /* lightened for dark bg — WCAG AA on #0F1A24 */
    --lotte-primary-dark:  #3690BC;
    --lotte-green:         #7DB500;   /* slightly desaturated, stays vibrant */
    --lotte-green-dark:    #96D400;   /* lighter for dark bg hover states */
    --lotte-green-light:   #C2F04A;

    /* Text — high contrast on dark bg */
    --lotte-text:          #F0F4F8;
    --lotte-text-body:     #D6DDE5;

    /* Backgrounds */
    --lotte-bg:            #0F1A24;   /* very dark blue-gray */
    --lotte-surface:       #1A2838;   /* surface: +1 level lighter */
    --lotte-surface-blue:  #152232;   /* surface-blue: blue tint on dark */
    --lotte-border:        #2A3F52;   /* subtle border on dark */

    /* Gradients — dark variants.
       gradient-ac stays as-is (used on dark sections already).
       gradient-ac-soft becomes a dark surface gradient. */
    --lotte-gradient-ac-soft: linear-gradient(105deg,
      #1A2D1A 0%,
      #152232 100%
    );
  }

  /* --------------------------------------------------------------------------
   * 2. BASE — body, paragraphs, links
   * -------------------------------------------------------------------------- */

  [data-theme="dark"] body {
    background: var(--lotte-bg);
    color: var(--lotte-text-body);
  }

  [data-theme="dark"] p,
  [data-theme="dark"] li,
  [data-theme="dark"] td,
  [data-theme="dark"] th,
  [data-theme="dark"] dd,
  [data-theme="dark"] dt,
  [data-theme="dark"] address,
  [data-theme="dark"] blockquote {
    color: var(--lotte-text-body);
  }

  [data-theme="dark"] a {
    color: var(--lotte-primary);
  }

  [data-theme="dark"] a:hover {
    color: var(--lotte-green-dark);
  }

  /* --------------------------------------------------------------------------
   * 3. HEADER — dark background, adjusted border
   * -------------------------------------------------------------------------- */

  [data-theme="dark"] .lotte-header {
    background: #0D1820;   /* slightly deeper than --lotte-bg for separation */
    border-bottom-color: var(--lotte-border);
  }

  [data-theme="dark"] .lotte-header.scrolled {
    box-shadow: 0 4px 24px var(--lotte-shadow-50);
  }

  [data-theme="dark"] .lotte-header__search-btn {
    border-color: var(--lotte-border);
    color: var(--lotte-primary);
  }

  [data-theme="dark"] .lotte-header__search-btn:hover {
    background: var(--lotte-surface);
    border-color: var(--lotte-primary);
  }

  /* Hamburger keeps primary blue — fine on dark bg */

  /* --------------------------------------------------------------------------
   * 4. OFF-CANVAS NAVIGATION — dark surfaces
   * -------------------------------------------------------------------------- */

  [data-theme="dark"] .lotte-offcanvas {
    background: #0D1820;
    box-shadow: -8px 0 32px var(--lotte-shadow-60);
  }

  [data-theme="dark"] .lotte-offcanvas__header {
    /* Primary blue header bar stays — already dark enough */
    border-bottom-color: var(--lotte-border);
  }

  [data-theme="dark"] .lotte-offcanvas__item {
    border-bottom-color: var(--lotte-border);
  }

  [data-theme="dark"] .lotte-offcanvas__link,
  [data-theme="dark"] .lotte-offcanvas__toggle {
    color: var(--lotte-text-body);
  }

  [data-theme="dark"] .lotte-offcanvas__link:hover,
  [data-theme="dark"] .lotte-offcanvas__toggle:hover {
    color: var(--lotte-primary);
    background: var(--lotte-surface);
  }

  [data-theme="dark"] .lotte-offcanvas__sub {
    background: var(--lotte-surface);
  }

  [data-theme="dark"] .lotte-offcanvas__sub-link {
    color: var(--lotte-text-body);
  }

  [data-theme="dark"] .lotte-offcanvas__sub-link:hover {
    color: var(--lotte-primary);
    background: var(--lotte-surface-blue);
  }

  [data-theme="dark"] .lotte-offcanvas__meta {
    border-top-color: var(--lotte-border);
  }

  [data-theme="dark"] .lotte-offcanvas__meta-link {
    color: var(--lotte-text-body);
  }

  [data-theme="dark"] .lotte-offcanvas__meta-link:hover {
    color: var(--lotte-primary);
  }

  /* --------------------------------------------------------------------------
   * 5. SECTIONS — gradient-soft, white sections, service-bar
   * gradient-strong already dark (keeps A&C gradient)
   * -------------------------------------------------------------------------- */

  [data-theme="dark"] .lotte-section--white {
    background: var(--lotte-bg);
  }

  [data-theme="dark"] .lotte-section--schnellzugriffe {
    background: var(--lotte-bg);
  }

  /* gradient-soft: dark green-to-blue surface gradient */
  [data-theme="dark"] .lotte-section--gradient-soft {
    background: var(--lotte-gradient-ac-soft);
  }

  /* gradient-strong: A&C gradient unchanged — already full color */

  /* Section text */
  [data-theme="dark"] .lotte-section__title {
    color: var(--lotte-text);
  }

  [data-theme="dark"] .lotte-section__subtitle {
    color: var(--lotte-text-body);
  }

  [data-theme="dark"] .lotte-section__cta {
    color: var(--lotte-primary);
  }

  [data-theme="dark"] .lotte-section__cta:hover {
    color: var(--lotte-green-dark);
  }

  [data-theme="dark"] .lotte-section__label {
    color: var(--lotte-green-dark);
  }

  /* --------------------------------------------------------------------------
   * 6. SCHNELLZUGRIFFE — dark card background, adjusted borders
   * -------------------------------------------------------------------------- */

  [data-theme="dark"] .lotte-service {
    background: var(--lotte-surface);
    border-left-color: var(--lotte-primary);
    border-top-color: var(--lotte-border);
    border-right-color: var(--lotte-border);
    border-bottom-color: var(--lotte-border);
    color: var(--lotte-text-body);
  }

  [data-theme="dark"] .lotte-service:hover {
    border-left-color: var(--lotte-green);
    background: #1F3448;
  }

  [data-theme="dark"] .lotte-service__icon {
    color: var(--lotte-primary);
  }

  [data-theme="dark"] .lotte-service:hover .lotte-service__icon {
    color: var(--lotte-green);
  }

  [data-theme="dark"] .lotte-service__label {
    color: var(--lotte-text-body);
  }

  /* --------------------------------------------------------------------------
   * 7. TABS — dark tab bar and buttons
   * -------------------------------------------------------------------------- */

  [data-theme="dark"] .lotte-tabs {
    border-bottom-color: var(--lotte-border);
  }

  [data-theme="dark"] .lotte-tab-btn {
    color: var(--lotte-text-body);
    background: none;
  }

  [data-theme="dark"] .lotte-tab-btn:hover {
    color: var(--lotte-primary);
  }

  [data-theme="dark"] .lotte-tab-btn[aria-selected="true"] {
    color: var(--lotte-primary);
    border-bottom-color: var(--lotte-primary);
  }

  /* --------------------------------------------------------------------------
   * 8. NEWS CARDS — dark card backgrounds
   * -------------------------------------------------------------------------- */

  [data-theme="dark"] .lotte-news-featured {
    background: var(--lotte-surface);
  }

  /* Featured panel: primary blue with slight transparency — stays */

  [data-theme="dark"] .lotte-news-compact {
    background: var(--lotte-surface);
    border-left-color: var(--lotte-green);
  }

  [data-theme="dark"] .lotte-news-compact:hover {
    box-shadow: 0 4px 16px var(--lotte-shadow-40);
  }

  [data-theme="dark"] .lotte-news-compact__date {
    color: var(--lotte-green-dark);
  }

  [data-theme="dark"] .lotte-news-compact__title a {
    color: var(--lotte-text-body);
  }

  [data-theme="dark"] .lotte-news-compact__title a:hover {
    color: var(--lotte-primary);
  }

  [data-theme="dark"] .lotte-news-compact__excerpt {
    color: var(--lotte-text-body);
  }

  /* Bekanntmachungen list */
  [data-theme="dark"] .lotte-bekannt-item {
    border-bottom-color: var(--lotte-border);
  }

  [data-theme="dark"] .lotte-bekannt-item__icon {
    color: var(--lotte-primary);
  }

  [data-theme="dark"] .lotte-bekannt-item__title a {
    color: var(--lotte-text-body);
  }

  [data-theme="dark"] .lotte-bekannt-item__title a:hover {
    color: var(--lotte-primary);
  }

  [data-theme="dark"] .lotte-bekannt-item__date {
    color: #8A9BB0;
  }

  /* --------------------------------------------------------------------------
   * 9. EVENT CARDS — dark card backgrounds
   * -------------------------------------------------------------------------- */

  [data-theme="dark"] .lotte-event-card {
    background: var(--lotte-surface);
  }

  [data-theme="dark"] .lotte-event-card:hover {
    box-shadow: 0 4px 16px var(--lotte-shadow-40);
  }

  [data-theme="dark"] .lotte-event-card__title a {
    color: var(--lotte-text-body);
  }

  [data-theme="dark"] .lotte-event-card__title a:hover {
    color: var(--lotte-primary);
  }

  [data-theme="dark"] .lotte-event-card__meta {
    color: #8A9BB0;
  }

  [data-theme="dark"] .lotte-events-app-hint {
    color: #8A9BB0;
  }

  [data-theme="dark"] .lotte-events-app-hint a {
    color: var(--lotte-primary);
  }

  [data-theme="dark"] .lotte-events-app-hint a:hover {
    color: var(--lotte-green-dark);
  }

  /* --------------------------------------------------------------------------
   * 10. TOPIC CARDS (Fokusthemen) — image cards, panel already blue
   * -------------------------------------------------------------------------- */

  [data-theme="dark"] .lotte-topic-card {
    background: var(--lotte-surface);
  }

  /* topic-card__panel already primary blue — unchanged */

  /* --------------------------------------------------------------------------
   * 11. FOOTER — already dark (--lotte-primary-dark bg), minimal changes
   * -------------------------------------------------------------------------- */

  /* Footer is inherently dark: no background override needed.
     In dark mode, keep it slightly deeper for clear page separation. */
  [data-theme="dark"] .lotte-footer {
    background: #080F16;
  }

  /* --------------------------------------------------------------------------
   * 12. CONTENT PAGES — page header, article body
   * -------------------------------------------------------------------------- */

  /* Page header: already dark image+overlay — unchanged */

  [data-theme="dark"] .lotte-content__body h2,
  [data-theme="dark"] .lotte-content__body h3 {
    color: var(--lotte-text);
  }

  [data-theme="dark"] .lotte-content__lead {
    color: var(--lotte-text-body);
  }

  [data-theme="dark"] .lotte-content__figure figcaption {
    color: #8A9BB0;
    border-bottom-color: var(--lotte-border);
  }

  [data-theme="dark"] .lotte-info-box {
    background: var(--lotte-surface);
    border-left-color: var(--lotte-primary);
  }

  [data-theme="dark"] .lotte-info-box h3 {
    color: var(--lotte-primary);
  }

  [data-theme="dark"] .lotte-hours-table td {
    border-bottom-color: var(--lotte-border);
  }

  /* --------------------------------------------------------------------------
   * 13. ACCORDION — dark surface
   * -------------------------------------------------------------------------- */

  [data-theme="dark"] .lotte-accordion__item {
    border-color: var(--lotte-border);
  }

  [data-theme="dark"] .lotte-accordion__trigger {
    color: var(--lotte-text-body);
  }

  [data-theme="dark"] .lotte-accordion__trigger:hover {
    background: var(--lotte-surface);
  }

  [data-theme="dark"] .lotte-accordion__icon {
    color: var(--lotte-primary);
  }

  /* --------------------------------------------------------------------------
   * 14. ORTSTEILE GRID — dark card borders
   * -------------------------------------------------------------------------- */

  [data-theme="dark"] .lotte-ortsteil-card {
    border-color: var(--lotte-border);
    background: var(--lotte-surface);
  }

  [data-theme="dark"] .lotte-ortsteil-card:hover {
    box-shadow: 0 4px 16px var(--lotte-shadow-40);
  }

  [data-theme="dark"] .lotte-ortsteil-card__body h3 {
    color: var(--lotte-text);
  }

  /* --------------------------------------------------------------------------
   * 15. RUBRIK TILES — dark card background
   * -------------------------------------------------------------------------- */

  [data-theme="dark"] .lotte-rubrik-tile {
    background: var(--lotte-surface);
    border-color: var(--lotte-border);
    border-left-color: var(--lotte-primary);
    color: var(--lotte-text-body);
  }

  [data-theme="dark"] .lotte-rubrik-tile:hover {
    border-left-color: var(--lotte-green);
    box-shadow: 0 6px 20px var(--lotte-shadow-40);
  }

  [data-theme="dark"] .lotte-rubrik-tile__icon {
    color: var(--lotte-primary);
  }

  [data-theme="dark"] .lotte-rubrik-tile:hover .lotte-rubrik-tile__icon {
    color: var(--lotte-green);
  }

  [data-theme="dark"] .lotte-rubrik-tile__title {
    color: var(--lotte-text);
  }

  /* --------------------------------------------------------------------------
   * 16. JUGEND CARDS — dark card backgrounds
   * -------------------------------------------------------------------------- */

  [data-theme="dark"] .lotte-jugend-card {
    background: var(--lotte-surface);
    color: var(--lotte-text-body);
  }

  [data-theme="dark"] .lotte-jugend-card:hover {
    box-shadow: 0 8px 24px var(--lotte-shadow-50);
  }

  [data-theme="dark"] .lotte-jugend-card__image--logo {
    background: var(--lotte-surface-blue);
  }

  [data-theme="dark"] .lotte-jugend-card__title {
    color: var(--lotte-text);
  }

  [data-theme="dark"] .lotte-jugend-card__location {
    color: var(--lotte-green-dark);
  }

  [data-theme="dark"] .lotte-jugend-card__cta {
    color: var(--lotte-primary);
  }

  [data-theme="dark"] .lotte-jugend-card:hover .lotte-jugend-card__cta {
    color: var(--lotte-green-dark);
  }

  /* --------------------------------------------------------------------------
   * 17. NEWS DETAIL — meta, related articles
   * -------------------------------------------------------------------------- */

  [data-theme="dark"] .lotte-news-detail__meta {
    border-bottom-color: var(--lotte-border);
  }

  [data-theme="dark"] .lotte-news-detail__date {
    color: var(--lotte-text-body);
  }

  [data-theme="dark"] .lotte-news-detail__category {
    background: #1A3248;
    color: var(--lotte-primary);
  }

  [data-theme="dark"] .lotte-related-news__item {
    color: var(--lotte-text-body);
  }

  [data-theme="dark"] .lotte-related-news__item:hover {
    background: var(--lotte-surface);
  }

  [data-theme="dark"] .lotte-related-news__item h3 {
    color: var(--lotte-text);
  }

  [data-theme="dark"] .lotte-related-news__item time {
    color: #8A9BB0;
  }

  /* --------------------------------------------------------------------------
   * 18. HERO SEARCH — dark input field
   * -------------------------------------------------------------------------- */

  [data-theme="dark"] .lotte-hero__search input[type="search"] {
    background: #1A2838;
    color: var(--lotte-text-body);
    border: 1px solid var(--lotte-border);
  }

  [data-theme="dark"] .lotte-hero__search input[type="search"]::placeholder {
    color: #6A7E92;
  }

  /* --------------------------------------------------------------------------
   * 19. FOCUS VISIBLE — same outline color in dark mode (green works on dark)
   * -------------------------------------------------------------------------- */

  [data-theme="dark"] :focus-visible {
    outline-color: var(--lotte-green);
  }

  /* ==========================================================================
   * HIGH CONTRAST MODE — [data-high-contrast="true"]
   * WCAG AAA (7:1+): pure black on white, strong link blue, thick borders.
   * Works in both light and dark modes (combined selectors below).
   * ========================================================================== */

  [data-high-contrast="true"] {
    /* Override Lotte tokens for maximum contrast in light mode */
    --lotte-text:           #000000;
    --lotte-text-body:      #000000;
    --lotte-text-muted:     #1a1a1a;
    --lotte-bg:             #ffffff;
    --lotte-bg-alt:         #ffffff;
    --lotte-surface:        #ffffff;
    --lotte-border:         #000000;
    --lotte-primary:        #003a5a;   /* dark, strong, accessible link blue */
    --lotte-green:          #1f5200;   /* dark green for accents */
    --mandant-text:         #000000;
    --mandant-bg:           #ffffff;
    --mandant-border:       #000000;
    --mandant-primary:      #003a5a;
    --min-color-text:       #000000;
    --min-color-bg:         #ffffff;
    --min-color-border:     #000000;
    --min-color-primary:    #003a5a;
  }

  [data-high-contrast="true"] body {
    background: #ffffff;
    color: #000000;
    font-weight: 500;
  }

  [data-high-contrast="true"] h1,
  [data-high-contrast="true"] h2,
  [data-high-contrast="true"] h3,
  [data-high-contrast="true"] h4,
  [data-high-contrast="true"] h5,
  [data-high-contrast="true"] h6 {
    color: #000000;
    font-weight: 900;
  }

  [data-high-contrast="true"] a {
    color: #003a5a;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
  }

  [data-high-contrast="true"] a:hover,
  [data-high-contrast="true"] a:focus-visible {
    background: #ffeb3b;   /* yellow highlight = classic HC focus */
    color: #000000;
    outline: 3px solid #000000;
    outline-offset: 2px;
  }

  [data-high-contrast="true"] button,
  [data-high-contrast="true"] .button,
  [data-high-contrast="true"] .lotte-btn {
    border: 3px solid #000000 !important;
    color: #000000 !important;
    background: #ffffff !important;
    font-weight: 700 !important;
  }

  [data-high-contrast="true"] button:hover,
  [data-high-contrast="true"] .button:hover,
  [data-high-contrast="true"] .lotte-btn:hover,
  [data-high-contrast="true"] button:focus-visible,
  [data-high-contrast="true"] .lotte-btn:focus-visible {
    background: #000000 !important;
    color: #ffeb3b !important;
  }

  /* Kill decorative low-contrast styling: opacity, gradients on text, shadows */
  [data-high-contrast="true"] *:not(img):not(picture):not(video) {
    opacity: 1 !important;
    text-shadow: none !important;
    box-shadow: none !important;
  }

  /* Preserve images — but force a solid border so they're clearly framed */
  [data-high-contrast="true"] img {
    border: 2px solid #000000;
  }

  [data-high-contrast="true"] .lotte-service {
    border-left-width: 6px;
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 2px;
  }

  [data-high-contrast="true"] .lotte-news-compact {
    border-left-width: 6px;
  }

  [data-high-contrast="true"] .lotte-rubrik-tile {
    border-left-width: 6px;
    border-width: 2px;
  }

  [data-high-contrast="true"] .lotte-accordion__item {
    border-width: 2px;
  }

  [data-high-contrast="true"] .lotte-info-box {
    border-left-width: 6px;
  }

  [data-high-contrast="true"] .lotte-tabs {
    border-bottom-width: 3px;
  }

  [data-high-contrast="true"] .lotte-tab-btn[aria-selected="true"] {
    border-bottom-width: 4px;
    font-weight: 800;
  }

  [data-high-contrast="true"] .lotte-section__title {
    font-weight: 900;
  }

  [data-high-contrast="true"] .lotte-header {
    border-bottom-width: 3px;
  }

  [data-high-contrast="true"] .lotte-offcanvas__item {
    border-bottom-width: 2px;
  }

  /* High contrast + dark: even stronger contrast */
  [data-theme="dark"][data-high-contrast="true"] {
    --lotte-text:      #FFFFFF;
    --lotte-text-body: #F0F4F8;
    --lotte-border:    #4A6A82;
    --lotte-primary:   #5DBDE8;   /* brighter primary for HC dark */
    --lotte-green:     #8FCC00;
  }

  [data-theme="dark"][data-high-contrast="true"] .lotte-header {
    border-bottom-color: var(--lotte-border);
  }

  /* ==========================================================================
   * FONT SIZE SCALING — [data-font-size="large"] / [data-font-size="xlarge"]
   * Set by a11y.js toolbar. Scales body font and fluid text tokens.
   * Base: 1.25rem (20px). Large: 1.375rem (22px). XLarge: 1.5rem (24px).
   * ========================================================================== */

  [data-font-size="large"] {
    --lotte-font-size: 1.375rem;
  }

  [data-font-size="large"] body {
    font-size: var(--lotte-font-size);
  }

  [data-font-size="large"] .lotte-news-compact__title {
    font-size: 1.25rem;
  }

  [data-font-size="large"] .lotte-event-card__title {
    font-size: 1.1875rem;
  }

  [data-font-size="large"] .lotte-service__label {
    font-size: 1.0625rem;
  }

  [data-font-size="large"] .lotte-tab-btn {
    font-size: 1.125rem;
  }

  [data-font-size="large"] .lotte-offcanvas__link,
  [data-font-size="large"] .lotte-offcanvas__toggle {
    font-size: 1.0625rem;
  }

  [data-font-size="large"] .lotte-footer a,
  [data-font-size="large"] .lotte-footer p,
  [data-font-size="large"] .lotte-footer address,
  [data-font-size="large"] .lotte-footer__link,
  [data-font-size="large"] .lotte-footer__hours li {
    font-size: 1.0625rem;
  }

  [data-font-size="xlarge"] {
    --lotte-font-size: 1.5rem;
  }

  [data-font-size="xlarge"] body {
    font-size: var(--lotte-font-size);
  }

  [data-font-size="xlarge"] .lotte-news-compact__title {
    font-size: 1.375rem;
  }

  [data-font-size="xlarge"] .lotte-event-card__title {
    font-size: 1.3125rem;
  }

  [data-font-size="xlarge"] .lotte-service__label {
    font-size: 1.125rem;
  }

  [data-font-size="xlarge"] .lotte-tab-btn {
    font-size: 1.25rem;
  }

  [data-font-size="xlarge"] .lotte-offcanvas__link,
  [data-font-size="xlarge"] .lotte-offcanvas__toggle {
    font-size: 1.1875rem;
  }

  [data-font-size="xlarge"] .lotte-footer a,
  [data-font-size="xlarge"] .lotte-footer p,
  [data-font-size="xlarge"] .lotte-footer address,
  [data-font-size="xlarge"] .lotte-footer__link,
  [data-font-size="xlarge"] .lotte-footer__hours li {
    font-size: 1.1875rem;
  }

  /* Compact news list items: larger hit targets at bigger font sizes */
  [data-font-size="large"] .lotte-bekannt-item,
  [data-font-size="xlarge"] .lotte-bekannt-item {
    padding-block: 1rem;
  }

  [data-font-size="xlarge"] .lotte-bekannt-item__title {
    font-size: 1.1875rem;
  }

  /* ==========================================================================
   * DARK MODE — html.mn-dark (global toggle class)
   * Parallel to [data-theme="dark"] system. Triggered by dark mode toggle.
   * Token overrides + component-level adjustments.
   * ========================================================================== */

  html.mn-dark {
    --lotte-bg:            #1a1a2e;
    --lotte-bg-surface:    #16213e;
    --lotte-bg-card:       #1f2b47;
    --lotte-text-body:     #e0e0e0;
    --lotte-text-heading:  #ffffff;
    --lotte-primary:       #4a90d9;
    --lotte-primary-dark:  #0f1629;
    --lotte-green:         #9dd65c;
    --lotte-border:        var(--lotte-white-10);
  }

  html.mn-dark .lotte-section--white {
    background: var(--lotte-bg);
    color: var(--lotte-text-body);
  }

  html.mn-dark .lotte-section--light {
    background: var(--lotte-bg-surface);
    color: var(--lotte-text-body);
  }

  html.mn-dark .lotte-news-card,
  html.mn-dark .lotte-news-compact,
  html.mn-dark .lotte-event-card,
  html.mn-dark .lotte-info-box,
  html.mn-dark .lotte-content {
    background: var(--lotte-bg-card);
    color: var(--lotte-text-body);
  }

  html.mn-dark .lotte-page-header__content {
    color: #fff;
  }

  html.mn-dark h1,
  html.mn-dark h2,
  html.mn-dark h3,
  html.mn-dark h4,
  html.mn-dark h5,
  html.mn-dark h6 {
    color: var(--lotte-text-heading);
  }

  html.mn-dark a {
    color: var(--lotte-primary);
  }

  html.mn-dark .lotte-header {
    background: var(--lotte-primary-dark);
  }

  html.mn-dark .lotte-schnellzugriff__item {
    background: var(--lotte-bg-card);
    color: var(--lotte-text-body);
    border-color: var(--lotte-border);
  }

  html.mn-dark img {
    opacity: 0.9;
  }

  /* ==========================================================================
   * FONT SIZE STEPS — html.font-size-N (a11y toolbar, +0.5 increments)
   * Applies rem-based scaling to the root element.
   * 1 = 16px (default), 2 = 18px, 3 = 20px, 4 = 22px, 5 = 24px
   * ========================================================================== */

  html.font-size-1 { font-size: 100%; }    /* 16px — default */
  html.font-size-2 { font-size: 112.5%; }  /* 18px */
  html.font-size-3 { font-size: 125%; }    /* 20px */
  html.font-size-4 { font-size: 137.5%; }  /* 22px */
  html.font-size-5 { font-size: 150%; }    /* 24px */




  /* ============================================================
   * CTA-Button Color-Ownership (F1 Fix, Variante N, 2026-04-24)
   *
   * Ohne diesen Block gewinnt die globale a { color: var(--lotte-primary) }
   * Regel (Z.5150) gegen die @layer-components CE-Regel
   * .ce-cta__button--primary { color: #fff } via Layer-Dominanz
   * (@layer mandant > @layer components).
   *
   * Die Mandant-Schicht muss deshalb selbst die Button-Color-Semantik
   * respektieren. Rollen-Variable --min-brand-on-accent kommt aus der
   * ζ2-generierten Step-2-Bridge in mandant-tokens.css.
   *
   * A13-Backlog-Kandidat: Architektur-Hybrid mit @layer protected fuer
   * A11y-kritische CE-Contracts. Dieser Block waere dann obsolet.
   * ============================================================ */
  .min-cta__button,
  .min-cta__button span {
    color: var(--min-brand-on-accent);
  }

} /* end @layer mandant */


/* ==========================================================================
 * STYLEGUIDE CHROME — aus custom.css
 * AUSSERHALB @layer mandant — muss unlayered style.css sg-* überschreiben
 * ========================================================================== */

/* ==========================================================================
 * STYLEGUIDE CHROME – Gemeinde Lotte Design
 * AUSSERHALB @layer mandant — muss unlayered style.css sg-* überschreiben
 *
 * SCHRIFT-REGEL: 1.25rem (20px) als EINHEITLICHE Basis.
 * Kein Größen-Chaos: Absätze, Listen, Beschreibungen = alle 1.25rem.
 * Code-Bloecke duerfen auf 1rem reduziert sein (Lesbarkeit).
 * Tabellen-Header: klein + uppercase = Label-Charakter, nicht Fliesstext.
 * KEINE opacity-Tricks — Farbe statt Opacity, Text IMMER voll sichtbar.
 * Textfarbe: #1a1a1a (vollfarbig schwarz), keine ausgegrauten Absätze.
 * ========================================================================== */

/* -- Styleguide Sub-Navigation -------------------------------------------- */

.sg-nav {
  display: flex;
  gap: 0;
  padding: 0;
  background: var(--cone, #145675);
  border-bottom: 3px solid var(--ctwo, #84BD00);
  flex-wrap: wrap;
  align-items: stretch;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px var(--lotte-shadow-15);
}

.sg-nav__brand {
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
  color: #fff;
  padding: 0.75rem 1.25rem;
  margin-right: 0;
  background: var(--lotte-shadow-15);
  display: flex;
  align-items: center;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.sg-nav__link {
  text-decoration: none;
  color: var(--lotte-white-85);
  padding: 0.75rem 1.125rem;
  border-radius: 0;
  font-size: 1rem;
  font-weight: 500;
  transition: background 200ms ease, color 200ms ease;
  display: flex;
  align-items: center;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
}

.sg-nav__link:hover {
  background: var(--lotte-white-10);
  color: #fff;
  border-bottom-color: var(--lotte-white-40);
}

.sg-nav__link--active {
  background: var(--lotte-white-15);
  color: #fff;
  font-weight: 700;
  border-bottom-color: var(--ctwo, #84BD00);
}

/* -- Styleguide Main Container -------------------------------------------- */

.sg-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 2rem 4rem;
  font-size: 1.25rem;
  line-height: 1.7;
  color: #1a1a1a;
}

/* Alle Fliesstext-Elemente: einheitlich 1.25rem, kein Größen-Chaos */
.sg-main p,
.sg-main li,
.sg-main ul,
.sg-main ol {
  font-size: 1.25rem;
  line-height: 1.7;
  color: #1a1a1a;
}

.sg-main > h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--cone, #145675);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.sg-main section {
  margin-bottom: 2.5rem;
}

.sg-main h2 a {
  text-decoration: none;
  color: var(--cone, #145675);
  transition: color 200ms ease;
}

.sg-main h2 a:hover {
  color: var(--ctwo, #84BD00);
}

.sg-main ul {
  padding-left: 1.25rem;
  list-style: none;
}

.sg-main li {
  margin-bottom: 0.5rem;
  position: relative;
  padding-left: 1rem;
}

.sg-main li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--ctwo, #84BD00);
  border-radius: 50%;
}

.sg-main li a {
  color: var(--cone, #145675);
  text-decoration: none;
  font-weight: 500;
  font-size: 1.25rem;
}

.sg-main li a:hover {
  text-decoration: underline;
  text-decoration-color: var(--ctwo, #84BD00);
  text-underline-offset: 3px;
}

/* -- Element Block -------------------------------------------------------- */

.sg-element {
  margin-bottom: 3.5rem;
  border-bottom: none;
  padding-bottom: 3rem;
  position: relative;
}

.sg-element::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--cone, #145675) 0%,
    var(--ctwo, #84BD00) 30%,
    transparent 100%
  );
}

.sg-element > h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--cone, #145675);
  margin-bottom: 0.75rem;
  padding-left: 1rem;
  border-left: 4px solid var(--ctwo, #84BD00);
}

/* -- Description ---------------------------------------------------------- */

.sg-description {
  font-size: 1.25rem;
  color: #1a1a1a;
  margin-bottom: 1.5rem;
  line-height: 1.7;
  max-width: 72ch;
}

.sg-description code {
  background: color-mix(in srgb, var(--cone, #145675) 8%, transparent);
  color: var(--cone, #145675);
  padding: 0.15em 0.4em;
  border-radius: 3px;
  font-size: 0.85em;
  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  font-weight: 500;
}

/* -- Variant -------------------------------------------------------------- */

.sg-variant {
  margin-bottom: 2.5rem;
}

.sg-variant h3 {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--cone, #145675);
  margin-bottom: 0.5rem;
}

/* Variant-Beschreibungs-Absatz: einheitlich, vollfarbig */
.sg-variant > h3 + p,
.sg-variant > h3 + .sg-description {
  font-size: 1.25rem;
  color: #1a1a1a;
  margin-bottom: 1rem;
}

/* -- Preview Container ---------------------------------------------------- */

.sg-preview {
  border: 1px solid color-mix(in srgb, var(--cone, #145675) 15%, transparent);
  border-radius: var(--min-radius-sm, 2px);
  overflow: hidden;
  margin-bottom: 0.75rem;
  position: relative;
  /* Animations-Ausgangsstate (wird per IntersectionObserver gesteuert) */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 450ms ease, transform 450ms ease;
}

.sg-preview--visible {
  opacity: 1;
  transform: translateY(0);
}

.sg-preview::before {
  content: "Vorschau";
  position: absolute;
  top: 0;
  right: 0;
  background: var(--cone, #145675);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.6rem;
  border-radius: 0 0 0 var(--min-radius-sm, 2px);
  z-index: 2;
}

/* Reduced motion: sofort sichtbar, keine Animation */
@media (prefers-reduced-motion: reduce) {
  .sg-preview {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* -- Code Block ----------------------------------------------------------- */

.sg-code {
  margin-top: 0.75rem;
}

.sg-code summary {
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--cone, #145675);
  padding: 0.5rem 0.875rem;
  background: color-mix(in srgb, var(--cone, #145675) 6%, transparent);
  border-radius: var(--min-radius-sm, 2px);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: background 200ms ease;
  user-select: none;
}

.sg-code summary:hover {
  background: color-mix(in srgb, var(--cone, #145675) 12%, transparent);
}

.sg-code summary::marker {
  color: var(--ctwo, #84BD00);
}

.sg-code[open] summary {
  border-radius: var(--min-radius-sm, 2px) var(--min-radius-sm, 2px) 0 0;
  margin-bottom: 0;
}

.sg-code pre {
  background: #1a2332;
  color: #e0e8f0;
  padding: 1.25rem 1rem;
  overflow-x: auto;
  /* Code darf kleiner sein – bessere Lesbarkeit langer Zeilen */
  font-size: 1rem;
  margin-top: 0;
  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  line-height: 1.6;
  border-radius: 0 0 var(--min-radius-sm, 2px) var(--min-radius-sm, 2px);
  border: 1px solid var(--lotte-white-08);
  border-top: none;
}

.sg-code pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

/* -- Properties Table ----------------------------------------------------- */

.sg-props {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  margin-top: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--cone, #145675) 12%, transparent);
  border-radius: var(--min-radius-sm, 2px);
  overflow: hidden;
}

.sg-props th,
.sg-props td {
  padding: 0.625rem 0.875rem;
  border: 1px solid color-mix(in srgb, var(--cone, #145675) 8%, transparent);
  text-align: left;
}

.sg-props th {
  background: color-mix(in srgb, var(--cone, #145675) 8%, transparent);
  color: var(--cone, #145675);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Tabellen-Zellen: 1.125rem — etwas kleiner als Fliesstext, aber gut lesbar */
.sg-props td {
  font-size: 1.125rem;
  color: #1a1a1a;
}

.sg-props td code {
  background: color-mix(in srgb, var(--cone, #145675) 6%, transparent);
  color: var(--cone, #145675);
  padding: 0.1em 0.35em;
  border-radius: 2px;
  font-size: 0.9em;
  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
}

.sg-props tr:nth-child(even) td {
  background: color-mix(in srgb, var(--cone, #145675) 3%, transparent);
}

/* -- Styleguide Overview (styleguide.php) Sections ------------------------ */

.sg-main > section > h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--cone, #145675);
}

.sg-main > section > h2 a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.sg-main > section > h2 a::after {
  content: "\2192";
  font-size: 0.875em;
  color: var(--ctwo, #84BD00);
  transition: transform 200ms ease;
}

.sg-main > section > h2 a:hover::after {
  transform: translateX(4px);
}

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

@media (max-width: 768px) {
  .sg-nav {
    gap: 0;
  }

  .sg-nav__brand {
    width: 100%;
    padding: 0.625rem 1rem;
    font-size: 1rem;
  }

  .sg-nav__link {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }

  .sg-main {
    padding: 1.5rem 1rem 3rem;
    font-size: 1.125rem;
  }

  .sg-main p,
  .sg-main li,
  .sg-main ul,
  .sg-main ol,
  .sg-description,
  .sg-variant > h3 + p,
  .sg-variant > h3 + .sg-description,
  .sg-main li a {
    font-size: 1.125rem;
  }

  .sg-element > h2 {
    font-size: 1.5rem;
  }

  .sg-variant h3 {
    font-size: 1.25rem;
  }
}

/* -- Verfuegbare Bilder Grid (Styleguide Overview) ------------------------ */

.sg-main section:last-child figure img {
  border-color: color-mix(in srgb, var(--cone, #145675) 15%, transparent);
}

.sg-main section:last-child figcaption {
  color: var(--cone, #145675);
  font-weight: 500;
}


/* ==========================================================================
 * MMENU + SONSTIGE OVERRIDES — aus mandant-entwurf1.css
 * unlayered um mmenu.min.css und andere zu überschreiben
 * ========================================================================== */


/* ==========================================================================
 * MMENU OVERRIDES — unlayered to beat mmenu.min.css specificity
 * Only practical styles for municipality navigation
 * ========================================================================== */

/* Hide nav source + meta bar before mmenu initializes — prevents FOUC.
 * Belt-and-braces: visibility:hidden + height:0 keeps reserved space at
 * zero until mmenu rewrites the DOM. The body gains .lotte-mm-ready in
 * mmenu-init.js once the library has run, but the library also strips
 * #mm-nav of any rogue "mm-menu"-less state by adding the class itself,
 * so :not(.mm-menu) keeps working as the primary guard.
 * Brief 61 (2026-05-12). */
#mm-nav:not(.mm-menu) {
  display: none !important;
}
body:not(.lotte-mm-ready) #mm-nav,
body:not(.lotte-mm-ready) #mm-meta-bar {
  visibility: hidden;
  height: 0;
  overflow: hidden;
}
#mm-meta-bar[hidden] {
  display: none !important;
}

/* Menü-Start and close buttons injected by mmenu-init.js. Home sits between the
 * ‹ prev arrow and title in sub-panels; close sits at the end of every panel
 * navbar. This separates "back to root" from "close menu".
 * Brief 61 (2026-05-12). */
.mm-navbar .lotte-mm-home,
.mm-navbar .lotte-mm-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
}
.mm-navbar .lotte-mm-home svg,
.mm-navbar .lotte-mm-close span {
  display: block;
}
.mm-navbar .lotte-mm-close {
  margin-left: auto;
  font-size: 1.75rem;
  line-height: 1;
}
.mm-navbar .lotte-mm-home:hover,
.mm-navbar .lotte-mm-home:focus-visible,
.mm-navbar .lotte-mm-close:hover,
.mm-navbar .lotte-mm-close:focus-visible {
  background: var(--lotte-white-10, rgba(255, 255, 255, 0.15));
  outline: none;
}
.mm-navbar .lotte-mm-home:focus-visible,
.mm-navbar .lotte-mm-close:focus-visible {
  box-shadow: inset 0 0 0 2px #fff;
}

/* Close controls are injected per panel for keyboard continuity, but only the
 * active panel may expose one visually. */
.mm-panel:not(.mm-panel--opened) > .mm-navbar .lotte-mm-close {
  display: none;
}

/* Off-canvas: Let the library handle positioning + transitions.
 * We use position: 'right-front' in mmenu-init.js which natively
 * slides the menu in from the right via transform.
 * Only override: width + top offset for header clearance. */
/* mmenu size + position overrides.
 * position: right-front handles transform natively.
 * We only adjust width, z-index and the .mm-page wrapper. */
:root {
  --mm-size: 85%;
  --mm-max-size: 420px;
}

/* Fix: .mm-page wrapper must not create extra whitespace.
 * The library sets min-height: 100vh on .mm-page which pushes
 * content down when combined with a sticky header. */
.mm-page {
  min-height: 0;
  overflow-x: clip;
}

body.mm-wrapper {
  overflow-x: hidden;
}

/* Slidemenü as real offcanvas panel: it sits above the fixed header and uses
 * the full viewport. The close control lives inside the mmenu navbar; the
 * sticky page header must not reserve vertical space for the open panel. */
.mm-menu--offcanvas {
  z-index: 1100;
  top: 0;
  height: 100vh;
  height: 100dvh;
}

/* Blocker overlay belongs to the open Slidemenü and covers the fixed header too. */
.mm-blocker {
  z-index: 1090;
  top: 0;
}
/* Close button in navbar: white × on dark background */
.mm-navbar .mm-btn--close {
  cursor: pointer;
  flex-shrink: 0;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mm-navbar .mm-btn--close::before {
  content: "×";
  font-size: 1.75rem;
  line-height: 1;
  color: #fff;
  border: none;
}
.mm-navbar .mm-btn--close::after {
  display: none;
}

/* Blocker overlay: library handles display, we just style it */
.mm-blocker {
  z-index: 1090;
  background: rgba(0, 0, 0, 0.4);
  transition: opacity 0.3s ease;
}
/* Library handles .mm-blocker visibility via its own JS */

/* Panel background and font */
.mm-menu {
  --mm-color-background: #fff;
  --mm-color-text: var(--lotte-text-body, #1a1a1a);
  --mm-color-border: var(--lotte-mm-border-dark);
  font-family: var(--lotte-font, 'Inter', sans-serif);
}

/* Navbar header: municipality blue gradient */
.mm-navbar {
  background: linear-gradient(135deg, var(--lotte-primary, #1a5276) 0%, var(--lotte-primary-dark, #0d2b3e) 100%);
  color: #fff;
  min-height: 64px;
  border-bottom: none;
  box-shadow: inset 0 -3px 0 rgba(132, 189, 0, 0.32);
}
.mm-navbar__title {
  color: #fff;
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.01em;
}
/* Navbar close/back arrows: white on dark navbar */
.mm-navbar .mm-btn::after,
.mm-navbar .mm-btn::before {
  border-color: #fff;
}
/* Listview submenu arrows: dark on white panel background */
.mm-listitem .mm-btn--next::after {
  border-color: var(--lotte-text-body, #1a1a1a);
  opacity: 0.5;
}
.mm-listitem .mm-btn--next:hover::after {
  opacity: 0.8;
}

/* List items: comfortable touch targets, larger type */
.mm-listitem {
  min-height: 52px;
  border-bottom: 1px solid var(--lotte-shadow-xs);
}
.mm-listitem:last-child {
  border-bottom: none;
}
.mm-listitem__text {
  padding: 1rem 1.5rem;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--lotte-text-body, #1a1a1a);
  transition: color 0.2s ease, background-color 0.2s ease;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  line-height: 1.35;
}
.mm-listitem__text:hover {
  color: var(--lotte-primary, #1a5276);
  background-color: var(--lotte-primary-04);
}
.mm-listitem__btn {
  border-left-color: var(--lotte-border, var(--lotte-mm-border-dark));
}

.mm-panel {
  background: #fff;
}

.mm-panel:not(:first-child) {
  background: #f6f9fb;
}

.mm-panel:not(:first-child) > .mm-listview {
  background: #fff;
  border-top: 1px solid rgba(20, 86, 117, 0.08);
}

/* Counter badges (hidden, kept for potential re-enable) */
.mm-counter {
  display: none;
}

/* Divider group headers: sticky labels for navigation sections
   (Bürgerservice, Rathaus, Politik & Gremien etc.) */
.mm-divider {
  background: var(--lotte-primary, #1a5276);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem 1.5rem;
  min-height: auto;
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: none;
}
.mm-divider::after {
  display: none;
}

/* Custom live search above the menu items. The built-in mmenu searchfield stays
   unused because this build does not search nested panels reliably enough. */
.lotte-mm-search {
  padding: 1.15rem 1.25rem 1rem;
  background: linear-gradient(180deg, #f8fbfd 0%, #fff 100%);
  border-bottom: 1px solid rgba(20, 86, 117, 0.14);
}
.mm-panel:not(:first-child) .lotte-mm-search {
  background: linear-gradient(180deg, #eef5f8 0%, #f8fbfd 100%);
}
.lotte-mm-search__label {
  display: block;
  margin: 0 0 0.45rem;
  color: var(--lotte-primary, #145675);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lotte-mm-search__field {
  position: relative;
}
.lotte-mm-search__icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  display: inline-flex;
  transform: translateY(-50%);
  color: var(--lotte-primary, #145675);
  opacity: 0.75;
  pointer-events: none;
}
.lotte-mm-search input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem 0.75rem 2.7rem;
  border: 1px solid rgba(20, 86, 117, 0.22);
  border-radius: 8px;
  background: #fff;
  color: var(--lotte-text-body, #1a1a1a);
  font: inherit;
  font-size: 1rem;
  box-shadow: 0 6px 18px rgba(20, 86, 117, 0.08);
}
.lotte-mm-search input:focus {
  border-color: var(--lotte-primary, #145675);
  box-shadow: 0 0 0 3px rgba(20, 86, 117, 0.14);
  outline: none;
}
.lotte-mm-search__status {
  margin-top: 0.55rem;
  min-height: 1.1rem;
  color: var(--lotte-text-muted, #64748b);
  font-size: 0.875rem;
}
.lotte-mm-search__results {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.65rem;
}
.lotte-mm-search__result {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(20, 86, 117, 0.12);
  border-radius: 8px;
  background: #fff;
  color: var(--lotte-text-body, #1a1a1a);
  text-decoration: none;
}
.lotte-mm-search__result:hover,
.lotte-mm-search__result:focus-visible {
  border-color: rgba(20, 86, 117, 0.35);
  background: rgba(20, 86, 117, 0.05);
  color: var(--lotte-primary, #145675);
  outline: none;
}
.lotte-mm-search__result-title {
  min-width: 0;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
}
.lotte-mm-search__result-context {
  min-width: 0;
  color: var(--lotte-text-muted, #64748b);
  font-size: 0.8125rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
  white-space: normal;
}
/* No-results message */
.mm-panel__noresults {
  font-size: 1rem;
  color: var(--lotte-text-muted, #6b7280);
}

/* Submenu panel items: slightly smaller but still readable */
.mm-panel:not(:first-child) .mm-listitem__text {
  font-size: 1rem;
  font-weight: 400;
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Focus-visible for keyboard navigation */
.mm-listitem__text:focus-visible,
.mm-listitem__btn:focus-visible,
.mm-navbar__title:focus-visible {
  outline: 3px solid var(--lotte-primary, #1a5276);
  outline-offset: -3px;
  border-radius: 2px;
}

/* Meta bar at bottom of mmenu panel */
.mm-meta-bar {
  display: flex;
  flex-direction: column;
  padding: 0;
  border-top: 1px solid var(--lotte-border, var(--lotte-mm-border-dark));
  background: var(--lotte-bg-alt, #f8f9fa);
  margin-top: auto;
}
.mm-meta-bar__links {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
}
.mm-meta-bar__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--lotte-primary, #1a5276);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.mm-meta-bar__link svg {
  flex-shrink: 0;
  opacity: 0.7;
}
.mm-meta-bar__link:hover {
  background-color: var(--lotte-primary-06);
}
.mm-meta-bar__link:focus-visible {
  outline: 3px solid var(--lotte-primary, #1a5276);
  outline-offset: -3px;
  border-radius: 2px;
}
.mm-meta-bar__logo {
  display: flex;
  justify-content: center;
  padding: 1.25rem 1.5rem 1.5rem;
  border-top: 1px solid var(--lotte-shadow-sm);
}
.mm-meta-bar__logo img {
  max-width: 120px;
  height: auto;
  opacity: 0.6;
}

/* Reduced motion */
.mm-no-motion .mm-menu,
.mm-no-motion .mm-panel,
.mm-no-motion .mm-blocker {
  transition: none !important;
}

/* Dark mode */
[data-theme="dark"] .mm-menu {
  --mm-color-background: var(--lotte-bg-body, #1a1a1a);
  --mm-color-text: var(--lotte-text-body, #e5e7eb);
  --mm-color-border: var(--lotte-white-10);
}
[data-theme="dark"] .mm-listitem__text {
  color: var(--lotte-text-body, #e5e7eb);
}
[data-theme="dark"] .mm-divider {
  background: var(--lotte-primary-dark, #0d2b3e);
}
[data-theme="dark"] .mm-panel,
[data-theme="dark"] .mm-panel:not(:first-child) {
  background: var(--lotte-bg-body, #1a1a1a);
}
[data-theme="dark"] .lotte-mm-search {
  background: var(--lotte-white-05);
}
[data-theme="dark"] .lotte-mm-search input,
[data-theme="dark"] .lotte-mm-search__result {
  background: var(--lotte-white-08);
  border-color: var(--lotte-white-10);
  color: var(--lotte-text-body, #e5e7eb);
}
[data-theme="dark"] .lotte-mm-search__label,
[data-theme="dark"] .lotte-mm-search__icon {
  color: var(--lotte-primary-light, #60a5fa);
}
[data-theme="dark"] .mm-meta-bar {
  background: var(--lotte-white-05);
  border-top-color: var(--lotte-white-10);
}
[data-theme="dark"] .mm-meta-bar__link {
  color: var(--lotte-primary-light, #60a5fa);
}
[data-theme="dark"] .mm-meta-bar__link:hover {
  background-color: var(--lotte-accent-light-08);
}
[data-theme="dark"] .mm-meta-bar__logo {
  border-top-color: var(--lotte-white-08);
}
[data-theme="dark"] .mm-meta-bar__logo img {
  filter: brightness(1.8);
  opacity: 0.5;
}


/* ==========================================================================
 * SERVICE PORTAL — Dienstleistungen A-Z
 * ========================================================================== */

.lotte-service-search-wrap {
  max-width: 36rem;
  margin: 0 auto 2rem;
  position: relative;
}
.lotte-service-search {
  width: 100%;
  padding: 0.875rem 1.25rem 0.875rem 3rem;
  font-size: 1rem;
  font-family: var(--lotte-font, 'Inter', sans-serif);
  border: 2px solid var(--lotte-border, #d1d5db);
  border-radius: var(--lotte-radius, 6px);
  background: var(--lotte-bg-body, #fff);
  color: var(--lotte-text-body, #1a1a1a);
  transition: border-color 0.15s;
}
.lotte-service-search:focus {
  outline: none;
  border-color: var(--lotte-primary, #1a5276);
  box-shadow: 0 0 0 3px var(--lotte-primary-15);
}
.lotte-service-search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--lotte-text-muted, #6b7280);
  pointer-events: none;
}
.lotte-service-counter {
  text-align: center;
  font-size: 0.875rem;
  color: var(--lotte-text-muted, #6b7280);
  margin-bottom: 2rem;
}

/* Category filter pills */
.lotte-service-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 2rem;
}
.lotte-service-filter-btn {
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  font-family: var(--lotte-font, 'Inter', sans-serif);
  border: 1px solid var(--lotte-border, #d1d5db);
  border-radius: 99px;
  background: transparent;
  color: var(--lotte-text-body, #1a1a1a);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.lotte-service-filter-btn:hover,
.lotte-service-filter-btn[aria-pressed="true"] {
  background: var(--lotte-primary, #1a5276);
  color: #fff;
  border-color: var(--lotte-primary, #1a5276);
}
.lotte-service-filter-btn:focus-visible {
  outline: 3px solid var(--lotte-primary, #1a5276);
  outline-offset: 2px;
}

/* A-Z letter groups */
.lotte-service-letter {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--lotte-primary, #1a5276);
  margin: 2rem 0 0.75rem;
  padding-bottom: 0.375rem;
  border-bottom: 2px solid var(--lotte-primary, #1a5276);
}
.lotte-service-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.lotte-service-item {
  border-bottom: 1px solid var(--lotte-border, var(--lotte-shadow-sm));
}
.lotte-service-item__link {
  display: block;
  padding: 0.75rem 0.25rem;
  color: var(--lotte-text-body, #1a1a1a);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color 0.15s;
}
.lotte-service-item__link:hover {
  color: var(--lotte-primary, #1a5276);
}
.lotte-service-item__link:focus-visible {
  outline: 3px solid var(--lotte-primary, #1a5276);
  outline-offset: 2px;
  border-radius: 2px;
}
.lotte-service-item__desc {
  display: block;
  font-size: 0.8125rem;
  color: var(--lotte-text-muted, #6b7280);
  margin-top: 0.125rem;
}

/* Service detail */
.lotte-service-detail {
  display: grid;
  gap: 2rem;
}
@media (min-width: 900px) {
  .lotte-service-detail {
    grid-template-columns: 1fr 20rem;
  }
}
.lotte-service-detail__sidebar {
  background: var(--lotte-bg-alt, #f8f9fa);
  padding: 1.5rem;
  border-radius: var(--lotte-radius, 6px);
  height: fit-content;
}
@media (min-width: 900px) {
  .lotte-service-detail__sidebar {
    position: sticky;
    top: calc(var(--lotte-nav-height, 88px) + 1rem);
  }
}

/* Dark mode for service portal */
[data-theme="dark"] .lotte-service-search {
  background: var(--lotte-bg-body, #1a1a1a);
  border-color: var(--lotte-white-15);
  color: var(--lotte-text-body, #e5e7eb);
}
[data-theme="dark"] .lotte-service-letter {
  color: var(--lotte-primary-light, #60a5fa);
  border-bottom-color: var(--lotte-primary-light, #60a5fa);
}
[data-theme="dark"] .lotte-service-item {
  border-bottom-color: var(--lotte-white-08);
}
[data-theme="dark"] .lotte-service-item__link {
  color: var(--lotte-text-body, #e5e7eb);
}
[data-theme="dark"] .lotte-service-item__link:hover {
  color: var(--lotte-primary-light, #60a5fa);
}
[data-theme="dark"] .lotte-service-filter-btn {
  border-color: var(--lotte-white-15);
  color: var(--lotte-text-body, #e5e7eb);
}
[data-theme="dark"] .lotte-service-detail__sidebar {
  background: var(--lotte-white-05);
}

/* ==========================================================================
 * BACK TO TOP BUTTON
 * ========================================================================== */

.lotte-back-to-top {
  position: fixed;
  /* Stacked above the chatbot (56px trigger + 2rem bottom + 0.75rem gap) */
  bottom: calc(var(--min-space-lg, 2rem) + 56px + 0.75rem);
  right: var(--min-space-lg, 2rem);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--lotte-primary, #145675);
  color: #FFFFFF;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px var(--lotte-shadow-20);
  transition: background-color 0.2s ease, transform 0.2s ease, opacity 0.3s ease;
  opacity: 0.9;
}
/* Mobile: stack above the smaller chatbot (48px trigger + 1rem bottom + 0.5rem gap) */
@media (max-width: 479px) {
  .lotte-back-to-top {
    bottom: calc(var(--min-space-md, 1rem) + 48px + 0.5rem);
    right: var(--min-space-md, 1rem);
  }
}
.lotte-back-to-top:hover {
  background: var(--lotte-primary-dark, #0D3D55);
  transform: translateY(-2px);
  opacity: 1;
}
.lotte-back-to-top:focus-visible {
  outline: 3px solid var(--lotte-green, #84BD00);
  outline-offset: 2px;
}
.lotte-back-to-top[hidden] {
  display: none;
}
[data-theme="dark"] .lotte-back-to-top {
  background: var(--lotte-green, #84BD00);
  color: #1a1a1a;
}
[data-theme="dark"] .lotte-back-to-top:hover {
  background: var(--lotte-green-dark, #5A8500);
}

/* ==========================================================================
 * CE Textmedia — Core position class coverage
 * Migrated from min_mandant_gs_lotte/mandant-gs.css 2026-05-07
 * textmedia BEM sub-elements + ce-position layout classes
 *
 * TYPO3 Core renders ce-{gallery.position.horizontal} and ce-{gallery.position.vertical}
 * on the root article element (alongside .ce-textpic and .min-textmedia).
 * These selectors bridge Core CSS conventions to the mandant grid layout.
 *
 * Core class matrix:
 *   horizontal: ce-left | ce-right | ce-center
 *   vertical:   ce-above | ce-below
 *   wrap:       ce-nowrap
 *
 * Grid strategy: 2-column grid for left/right, 1-column for above/below/nowrap.
 * Media width controlled by --ce-textmedia-media-width (default 50%).
 * ========================================================================== */

@layer mandant {

  /* -- Side-by-side: media left (default) ------------------------------------ */

  .ce-textpic.ce-left {
    display: grid;
    grid-template-columns: var(--ce-textmedia-media-width, 50%) 1fr;
    gap: var(--ce-textmedia-gap, clamp(1.5rem, 3vw, 2.5rem));
    align-items: center;
  }

  .ce-textpic.ce-left .ce-textmedia__media,
  .ce-textpic.ce-left .ce-gallery {
    order: 1;
  }

  .ce-textpic.ce-left .ce-textmedia__content,
  .ce-textpic.ce-left .ce-bodytext {
    order: 2;
  }

  /* -- Side-by-side: media right --------------------------------------------- */

  .ce-textpic.ce-right {
    display: grid;
    grid-template-columns: 1fr var(--ce-textmedia-media-width, 50%);
    gap: var(--ce-textmedia-gap, clamp(1.5rem, 3vw, 2.5rem));
    align-items: center;
  }

  .ce-textpic.ce-right .ce-textmedia__media,
  .ce-textpic.ce-right .ce-gallery {
    order: 2;
  }

  .ce-textpic.ce-right .ce-textmedia__content,
  .ce-textpic.ce-right .ce-bodytext {
    order: 1;
  }

  /* -- Stacked: media above (default vertical) -------------------------------- */

  .ce-textpic.ce-above {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ce-textmedia-gap, clamp(1.5rem, 3vw, 2.5rem));
  }

  .ce-textpic.ce-above .ce-textmedia__media,
  .ce-textpic.ce-above .ce-gallery {
    order: 1;
  }

  .ce-textpic.ce-above .ce-textmedia__content,
  .ce-textpic.ce-above .ce-bodytext {
    order: 2;
  }

  /* -- Stacked: media below --------------------------------------------------- */

  .ce-textpic.ce-below {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ce-textmedia-gap, clamp(1.5rem, 3vw, 2.5rem));
  }

  .ce-textpic.ce-below .ce-textmedia__media--below,
  .ce-textpic.ce-below .ce-gallery {
    order: 2;
  }

  .ce-textpic.ce-below .ce-textmedia__content,
  .ce-textpic.ce-below .ce-bodytext {
    order: 1;
  }

  /* -- No wrap: block layout, content does not flow around media -------------- */

  .ce-textpic.ce-nowrap {
    display: block;
  }

  .ce-textpic.ce-nowrap .ce-textmedia__media,
  .ce-textpic.ce-nowrap .ce-gallery {
    display: block;
    width: 100%;
    margin-block-end: var(--ce-textmedia-gap, clamp(1.5rem, 3vw, 2.5rem));
    float: none;
  }

  .ce-textpic.ce-nowrap .ce-textmedia__content,
  .ce-textpic.ce-nowrap .ce-bodytext {
    display: block;
    width: 100%;
  }

  /* -- Responsive: stack all variants on narrow viewports -------------------- */

  @media (max-width: 47.9375em) {
    .ce-textpic.ce-left,
    .ce-textpic.ce-right {
      grid-template-columns: 1fr;
    }

    /* Reset order so media always appears first on mobile */
    .ce-textpic.ce-left .ce-textmedia__media,
    .ce-textpic.ce-left .ce-gallery,
    .ce-textpic.ce-right .ce-textmedia__media,
    .ce-textpic.ce-right .ce-gallery {
      order: 1;
    }

    .ce-textpic.ce-left .ce-textmedia__content,
    .ce-textpic.ce-left .ce-bodytext,
    .ce-textpic.ce-right .ce-textmedia__content,
    .ce-textpic.ce-right .ce-bodytext {
      order: 2;
    }
  }

} /* end @layer mandant — ce-position migration block */

/* ==========================================================================
 * Unlayered minCore bridge
 * --------------------------------------------------------------------------
 * min_core ContentElements/tabs.css is unlayered. These homepage-news rules
 * must stay unlayered as well, otherwise @layer mandant loses the cascade.
 * ========================================================================== */

.v6-section.lotte-section .v6-section__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #3D6B00;
  margin-bottom: 0.25rem;
}

.v6-section.lotte-section .v6-section__title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--lotte-text);
  margin: 0 0 0.75rem;
  letter-spacing: 0;
}

.v6-section.lotte-section--gradient-soft:has(+ .mincore-tabs--lotte-newsbox) {
  padding-block-end: 1.5rem;
}

.v6-section.lotte-section--gradient-soft + .mincore-tabs--lotte-newsbox {
  background: #EEF7E0;
  background: var(--lotte-gradient-ac-soft);
  margin-block: 0;
  padding-block: 0 var(--lotte-space-section);
}

.v6-section.lotte-section--gradient-soft + .mincore-tabs--lotte-newsbox > .mincore-tabs__tablist,
.v6-section.lotte-section--gradient-soft + .mincore-tabs--lotte-newsbox > .mincore-tabs__panel {
  box-sizing: border-box;
  max-width: var(--min-container-max, 1280px);
  max-inline-size: var(--min-container-max, 1280px);
  margin-inline: auto;
  padding-inline: var(--min-container-padding, var(--min-space-md, 1.5rem));
}

.mincore-tabs--lotte-newsbox {
  background: transparent;
  border-radius: 0;
  padding-block: 0;
  margin-bottom: 2rem;
  color: var(--lotte-text-body);
  font-family: var(--lotte-font);
}

.mincore-tabs--lotte-newsbox .mincore-tabs__header {
  padding-inline: 0;
}

.mincore-tabs--lotte-newsbox .mincore-tabs__tablist {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  border-block-end: 2px solid var(--lotte-border);
  margin: 0 0 2rem;
  padding-inline: 0;
  overflow: inherit;
}

.mincore-tabs--lotte-newsbox .mincore-tabs__tab {
  padding: 0.875rem 1.5rem;
  font-size: 1.0625rem;
  font-weight: 400;
  font-family: var(--lotte-font);
  color: var(--lotte-text-body);
  background: none;
  border: none;
  border-block-end: 3px solid transparent;
  margin-block-end: -2px;
  cursor: pointer;
  transition: color var(--lotte-transition), border-block-end-color var(--lotte-transition);
  white-space: nowrap;
  flex-shrink: 0;
}

.mincore-tabs--lotte-newsbox .mincore-tabs__tab:hover {
  color: var(--lotte-primary);
  background: none;
}

.mincore-tabs--lotte-newsbox .mincore-tabs__tab[aria-selected="true"] {
  color: var(--lotte-primary);
  font-weight: 700;
  border-block-end-color: var(--lotte-primary);
}

.mincore-tabs--lotte-newsbox .mincore-tabs__tab:focus-visible {
  outline: 3px solid var(--lotte-primary);
  outline-offset: 2px;
  border-radius: var(--lotte-radius-sm);
}

.mincore-tabs--lotte-newsbox .mincore-tabs__panel {
  padding: 0;
}

.mincore-tabs--lotte-newsbox .mincore-tabs__panel[data-tab-index="1"]:not([hidden]),
.mincore-tabs--lotte-newsbox .mincore-tabs__panel[data-tab-index="2"]:not([hidden]) {
  display: block;
  max-inline-size: none;
}

.v6-section.lotte-section.lotte-section--gradient-soft + .mincore-tabs--lotte-newsbox > .mincore-tabs__panel[data-tab-index]:not([hidden]) {
  max-inline-size: var(--min-container-max, 1280px);
}

.mincore-tabs .lotte-tab-panel--embedded {
  display: block;
  overflow: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mincore-tabs .lotte-tab-panel--embedded::-webkit-scrollbar {
  display: none;
}

[data-theme="dark"] .mincore-tabs--lotte-newsbox .mincore-tabs__tablist {
  border-block-end-color: var(--lotte-border);
}

[data-theme="dark"] .v6-section.lotte-section--gradient-soft + .mincore-tabs--lotte-newsbox {
  background: var(--lotte-gradient-ac-soft);
}

[data-theme="dark"] .mincore-tabs--lotte-newsbox .mincore-tabs__tab {
  color: var(--lotte-text-body);
  background: none;
}

[data-theme="dark"] .mincore-tabs--lotte-newsbox .mincore-tabs__tab:hover {
  color: var(--lotte-primary);
}

[data-theme="dark"] .mincore-tabs--lotte-newsbox .mincore-tabs__tab[aria-selected="true"] {
  color: var(--lotte-primary);
  border-block-end-color: var(--lotte-primary);
}

[data-high-contrast="true"] .mincore-tabs--lotte-newsbox .mincore-tabs__tablist {
  border-block-end-width: 3px;
}

[data-high-contrast="true"] .mincore-tabs--lotte-newsbox .mincore-tabs__tab[aria-selected="true"] {
  border-block-end-width: 4px;
  font-weight: 800;
}

/* ==========================================================================
 * Prototype grid bridge
 * --------------------------------------------------------------------------
 * Several Lotte prototype pages use semantic grid classes instead of inline
 * grid styles. TYPO3 keeps the classes in raw prototype HTML, so the mandant
 * extension must carry the same layout contract as the prototype CSS.
 * ========================================================================== */

.lotte-grid {
  display: grid;
  gap: 1.5rem;
}

.lotte-grid--mayor-intro {
  grid-template-columns: 1fr 2fr;
  gap: 2.5rem;
  align-items: start;
  margin-bottom: 2.5rem;
}

.lotte-grid--stellv-cards {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.lotte-grid--buero-cards {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.lotte-grid--contact-cards {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-bottom: 2.5rem;
}

.lotte-grid--isek-cards {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: 1.5rem 0;
}

.lotte-figure--portrait {
  margin: 0;
}

.lotte-figure--portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--min-radius-lg, var(--lotte-radius, 12px));
  background: var(--lotte-surface, #e8e8e8);
}

/* ==========================================================================
 * Floating controls bridge
 * --------------------------------------------------------------------------
 * min_core renders the accessibility toolbar/back-to-top markup in TYPO3.
 * Lotte's prototype keeps the style switcher on the left and the search/back
 * controls on the right, so the mandant layer owns that positioning contract.
 * ========================================================================== */

.min-style-switcher.min-style-switcher--bottom-left {
  right: auto !important;
  left: max(var(--min-space-lg, 2rem), env(safe-area-inset-left)) !important;
  bottom: max(var(--min-space-lg, 2rem), env(safe-area-inset-bottom)) !important;
  z-index: 1300;
}

.min-style-switcher.min-style-switcher--bottom-left .min-style-switcher__trigger {
  border: 1px solid var(--lotte-primary, var(--mandant-primary, #145675)) !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: var(--lotte-primary, var(--mandant-primary, #145675)) !important;
  box-shadow: 0 8px 24px rgb(0 0 0 / 24%) !important;
}

.min-style-switcher.min-style-switcher--bottom-left .min-style-switcher__trigger svg {
  display: none;
}

.min-style-switcher.min-style-switcher--bottom-left .min-style-switcher__trigger::before {
  content: "\2699";
  font-size: 1.25rem;
  line-height: 1;
}

.min-style-switcher.min-style-switcher--bottom-left .min-style-switcher__trigger:hover,
.min-style-switcher.min-style-switcher--bottom-left .min-style-switcher__trigger[aria-expanded="true"] {
  border-color: var(--lotte-green, var(--mandant-secondary, #84bd00)) !important;
  background: var(--lotte-green, var(--mandant-secondary, #84bd00)) !important;
  color: #1a1a1a !important;
}

.min-style-switcher.min-style-switcher--bottom-left .min-style-switcher__panel {
  right: auto !important;
  left: 0 !important;
  bottom: calc(100% + 0.75rem) !important;
  z-index: 1301;
}

#mincore-back-to-top,
.mincore-back-to-top {
  right: max(var(--min-space-lg, 2rem), env(safe-area-inset-right)) !important;
  bottom: calc(max(var(--min-space-lg, 2rem), env(safe-area-inset-bottom)) + 56px + 0.75rem) !important;
  z-index: 1001;
}

@media (max-width: 479px) {
  .min-style-switcher.min-style-switcher--bottom-left {
    left: max(var(--min-space-md, 1rem), env(safe-area-inset-left)) !important;
    bottom: max(var(--min-space-md, 1rem), env(safe-area-inset-bottom)) !important;
  }

  #mincore-back-to-top,
  .mincore-back-to-top {
    right: max(var(--min-space-md, 1rem), env(safe-area-inset-right)) !important;
    bottom: calc(max(var(--min-space-md, 1rem), env(safe-area-inset-bottom)) + 48px + 0.5rem) !important;
  }
}