/* ============================================================================
 * TYPO3 Bridge CSS - gem-lotte
 * ============================================================================
 * UNLAYERED: Nur fuer unvermeidbare TYPO3-Eigenheiten.
 * Alle Content-Elemente rendern Prototype-exaktes HTML (ce-* Klassen).
 * bridge.css ist NICHT fuer Class-Mapping zustaendig.
 *
 * Jede Regel braucht einen TYPO3-GRUND Kommentar.
 * Stand: 2026-04-15
 * ============================================================================ */

/* TYPO3-GRUND: TYPO3 setzt body padding-top nicht, Navigation ist fixiert */
body {
    padding-top: var(--mandant-nav-height, 5rem);
}

/* TYPO3-GRUND: min_core StyleSwitcher adds data-font-size="default" to html.
 * Its generic html[data-font-size] rule scales the root by --min-font-size-base
 * (1.25rem for Lotte), while the prototype keeps 16px root and 20px body.
 * Only the neutral default state is pinned; explicit user choices remain open. */
html[data-font-size="default"],
html[data-font-size="large"],
html[data-font-size="xlarge"] {
    font-size: 16px;
}

/* TYPO3-GRUND: min_core data-line-height="normal" is an accessibility neutral
 * state but overrides the Lotte prototype body line-height of 1.65. */
html[data-font-size="default"][data-line-height="normal"][data-letter-spacing][data-word-spacing] body {
    font-size: var(--lotte-font-size, var(--mandant-font-size, 1.25rem));
    line-height: 1.65;
}

/* TYPO3-GRUND: min_core Accessibility.js setzt im Default die Klasse
 * mincore-fontsize-normal und damit body { font-size: 100%; }. Der aktuelle
 * Lotte-Prototyp ist fuer den Mandanten-Default aber auf 20px Body-Text
 * ausgelegt. Der Prototyp bleibt hier die SSoT; echte vergroesserte
 * Style-Switcher-Zustaende werden weiterhin ueber data-font-size skaliert. */
html.mincore-fontsize-normal body {
    font-size: var(--lotte-font-size, var(--mandant-font-size, 1.25rem)) !important;
}

html.mincore-lineheight-normal body {
    line-height: 1.65 !important;
}

/* TYPO3-GRUND: min_core and the Lotte mandant CSS both react to
 * data-font-size. Lotte already changes --lotte-font-size per state; multiplying
 * here again made TYPO3 text larger than the prototype and desynchronised
 * component rem-scaling. Explicit text element sizes still need to inherit the
 * selected user size, otherwise the panel state changes but paragraphs stay at
 * their fixed prototype size. */
html[data-font-size="large"] body,
html[data-font-size="xlarge"] body {
    font-size: var(--lotte-font-size, var(--mandant-font-size, 1.25rem)) !important;
}

html[data-font-size="large"] main :is(p, li, dd, dt, td, th, address, figcaption, label),
html[data-font-size="xlarge"] main :is(p, li, dd, dt, td, th, address, figcaption, label),
html[data-font-size="large"] main :is(.ce-bodytext, .ce-textmedia__content, .mincore-easytext-inline),
html[data-font-size="xlarge"] main :is(.ce-bodytext, .ce-textmedia__content, .mincore-easytext-inline) {
    font-size: var(--lotte-font-size, var(--mandant-font-size, 1.25rem)) !important;
}

html[data-line-height="normal"] :is(p, li, td, th, dd, dt, label) {
    line-height: inherit;
}

html[data-line-height="normal"] .lotte-hero__subtitle {
    line-height: 1.55;
}

/* TYPO3-GRUND: Der Prototyp rendert die Veranstaltungs-Landingpage als hohen
 * Hero mit .lotte-hero__subtitle. TYPO3 nutzt dafür den Content-Block
 * .ce-page-header__subtitle; ohne diese Brücke erbt der Untertitel beim
 * Schriftgrößen-Schalter die Body-Skalierung und wird im xlarge-Zustand zu groß. */
html body .lotte-page-header--tall.ce-page-header .ce-page-header__subtitle {
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    line-height: 1.55;
    max-width: 44ch;
    margin: 0 0 1.5rem;
}

/* TYPO3-GRUND: root hero also has ce-hero for ContentBlocks compatibility.
 * Generic ce-hero CSS pulls heroes behind the fixed nav and centers the grid
 * track; the prototype root .lotte-hero starts directly below the fixed header
 * with a full-width grid track. */
.lotte-hero.ce-hero {
    justify-content: normal;
    margin-top: 0;
}

.lotte-hero.ce-hero.lotte-hero--height-large {
    min-height: clamp(600px, 75vh, 800px);
}

/* TYPO3-GRUND: Der Root-Hero-Suchbutton erbt nach dem Asset-Merge den
 * primaeren Button-Farbton aus TYPO3. Im Prototyp ist der Suchbutton gruen;
 * fuer WCAG-Kontrast nutzt die Glyphe darauf die dunkle Lotte-Schriftfarbe. */
html body .lotte-hero__search button {
    background: var(--lotte-green, #84BD00);
    color: var(--lotte-text-body, #1A1A1A);
}

html body .lotte-hero__search button:hover,
html body .lotte-hero__search button:focus-visible {
    background: #74A800;
    color: var(--lotte-text-body, #1A1A1A);
}

/* TYPO3 wraps the root hero image in <picture>; the prototype has the image as
 * direct child. Give the wrapper the same full-cover geometry so switching from
 * processed image variants to original FAL URLs cannot collapse the image area. */
.lotte-hero__picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* TYPO3 wraps subpage page-header images in <picture>; the prototype has the
 * image directly inside .lotte-page-header__media. Preserve the same cover
 * geometry so page-header crops stay identical to the prototype assets. */
.lotte-page-header__picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* TYPO3-GRUND: subpage breadcrumbs are rendered inside the Lotte page-header
 * template. The old standalone min_core breadcrumb before the hero would shift
 * the page header and does not match the prototype placement. */
.breadcrumb-nav {
    display: none;
}

.lotte-page-header .lotte-breadcrumb,
.ce-page-header--image .lotte-breadcrumb,
.lotte-page-header--image .lotte-breadcrumb {
    display: block;
    padding-block: 0.5rem;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.lotte-page-header .lotte-breadcrumb__link,
.ce-page-header--image .lotte-breadcrumb__link,
.lotte-page-header--image .lotte-breadcrumb__link,
.lotte-page-header--image .lotte-breadcrumb a,
.lotte-page-header .lotte-breadcrumb__link:visited,
.ce-page-header--image .lotte-breadcrumb__link:visited,
.lotte-page-header--image .lotte-breadcrumb__link:visited,
.lotte-page-header--image .lotte-breadcrumb a:visited {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.lotte-page-header .lotte-breadcrumb__link:hover,
.lotte-page-header .lotte-breadcrumb__link:focus-visible,
.ce-page-header--image .lotte-breadcrumb__link:hover,
.ce-page-header--image .lotte-breadcrumb__link:focus-visible,
.lotte-page-header--image .lotte-breadcrumb__link:hover,
.lotte-page-header--image .lotte-breadcrumb__link:focus-visible,
.lotte-page-header--image .lotte-breadcrumb a:hover,
.lotte-page-header--image .lotte-breadcrumb a:focus-visible {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.82);
}

.lotte-page-header .lotte-breadcrumb__sep,
.ce-page-header--image .lotte-breadcrumb__sep,
.lotte-page-header--image .lotte-breadcrumb__sep {
    color: rgba(255, 255, 255, 0.72);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.lotte-page-header .lotte-breadcrumb__current,
.ce-page-header--image .lotte-breadcrumb__current,
.lotte-page-header--image .lotte-breadcrumb__current {
    color: #fff;
    font-weight: 400;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.lotte-page-header.ce-page-header .lotte-breadcrumb {
    padding-block: 0;
}

html body .lotte-page-header .container {
    max-width: var(--lotte-content-max-width, 1300px);
}

.lotte-page-header.ce-page-header {
    margin-top: 0;
    padding: 64px 0;
}

/* TYPO3-GRUND: Alle Standard-Container nutzen denselben Lotte-Layout-Contract.
 * Die Breite wird zentral in mandant-tokens.css gesetzt und nicht je Seite
 * oder Inhaltselement hart gepflegt. */
html body .container {
    max-width: var(--lotte-content-max-width, 1300px);
    padding-inline: var(--lotte-content-padding-inline, clamp(1rem, 4vw, 2.5rem));
}

/* TYPO3-GRUND: Prototype-Sections und TYPO3-Sections teilen sich denselben
 * Inhaltscontainer. Abweichende Breiten werden über benannte Varianten wie
 * --lotte-content-wide-max-width gesteuert. */
html body .ce-content-section > .container {
    max-width: var(--lotte-content-max-width, 1300px);
    margin-inline: auto;
}

/* TYPO3-GRUND: Plugin- und Migrationsinhalte koennen noch im TYPO3
 * .frame-Wrapper liegen. Der alte Prototype-Section-Wrapper hatte 1340px und
 * klebte dadurch links am Viewport; der innere 1300px-Container wurde nur in
 * diesem falschen Kontext zentriert. */
html body .frame > .ce-content-section {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

html body .frame > .ce-content-section > .container {
    box-sizing: border-box;
    max-width: var(--lotte-content-max-width, 1300px);
    margin-inline: auto;
}

/* TYPO3-GRUND: Lotte-Prototyp-Sections verwenden den zentralen
 * Inhaltscontainer statt eigener Seitenbreiten. */
html body .lotte-section > .container {
    max-width: var(--lotte-content-max-width, 1300px);
    margin-inline: auto;
}

/* TYPO3-GRUND: Core-Inhaltselemente wie Tabellen, Listen oder reine Header
 * muessen denselben Inhaltswrapper nutzen wie Text & Medien. Das Element selbst
 * darf 100% bleiben; der lesbare Inhalt sitzt im zentralen Lotte-Raster.
 * In echten Spalten greifen diese Regeln nicht, weil dort der Spaltencontainer
 * die Breite vorgibt. */
html body main > .min-ce:not(.min-ce--textmedia):not(.lotte-section) {
    box-sizing: border-box;
    max-width: var(--lotte-content-max-width, 1300px);
    width: 100%;
    margin-inline: auto;
    padding-block: var(--min-space-lg, 2rem);
    padding-inline: var(--lotte-content-padding-inline, clamp(1rem, 4vw, 2.5rem));
}

/* Optionaler Redaktionsrahmen: explizit bündig mit Text & Medien. Der Wert ist
 * im Backend unter Erscheinungsbild -> Rahmen als "Inhaltsbreite" sichtbar. */
html body :is(.lotte-content-width, .frame-lotte-content-width) {
    box-sizing: border-box;
    max-width: var(--lotte-content-max-width, 1300px);
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--lotte-content-padding-inline, clamp(1rem, 4vw, 2.5rem));
}

/* Full-bleed Rahmen mit Hintergrund/Verlauf: Die Flaeche laeuft ueber 100%,
 * direkte Inhalte bleiben innen im gleichen Raster wie Text & Medien. */
html body main > .min-ce.lotte-section {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-block: var(--lotte-content-frame-padding-block, var(--min-space-xl, 4rem));
    padding-inline: 0;
}

/* TYPO3-GRUND: Bei Textmedia-Section-Frames ist .min-ce die volle
 * Hintergrundflaeche; das eigentliche Textmedia-Kind enthaelt den normalen
 * Content-Abstand. Der aeussere Verlauf darf keinen zweiten Blockabstand
 * addieren. */
html body main > .min-ce.min-ce--textmedia.lotte-section {
    padding-block: 0;
}

/* TYPO3-GRUND: Frei gesetzte Lotte-Frame-Elemente mit eigener
 * Hintergrundflaeche bekommen denselben Grundrhythmus wie Text & Medien.
 * Textmedia-Gradienten bleiben ausgenommen, weil dort das innere .ce-textpic
 * den Abstand traegt. */
html body main#main-content > .min-ce.lotte-section:not(.min-ce--textmedia) {
    padding-block: var(--lotte-content-frame-padding-block, var(--min-space-lg, 2rem));
}

html body main > .min-ce.lotte-section > :where(
    .frame-header,
    header,
    .ce-bodytext,
    .min-table-wrapper,
    .ce-gallery,
    .ce-uploads,
    .ce-menu
) {
    box-sizing: border-box;
    max-width: var(--lotte-content-max-width, 1300px);
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--lotte-content-padding-inline, clamp(1rem, 4vw, 2.5rem));
}

/* TYPO3-GRUND: Tabellen bleiben semantische Tabellen, erzwingen aber nicht
 * pauschal 100% Breite. Auf Desktop passt sich die Tabelle an ihren Inhalt an;
 * auf kleinen Viewports scrollt nur der Tabellenwrapper, nicht die Seite. */
html body main#main-content .min-table-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* TYPO3-GRUND: Ein horizontal scrollbarer Tabellenwrapper braucht einen
 * Tastatur-Einstiegspunkt. Der tabindex wird durch das Layout vergeben; diese
 * Regel macht ihn sichtbar, ohne Tabellen oder ihre Semantik zu verändern. */
html body main#main-content .min-table-wrapper[tabindex]:focus-visible {
    outline: 3px solid var(--lotte-primary, #145675);
    outline-offset: 3px;
}

html body main#main-content .min-table-wrapper > table.ce-table,
html body main#main-content .min-table-wrapper > table.min-table {
    display: table;
    inline-size: max-content;
    width: max-content;
    max-inline-size: 100%;
    max-width: 100%;
    min-inline-size: min(100%, 34rem);
    min-width: min(100%, 34rem);
    table-layout: auto;
    margin-inline-start: 0;
    margin-inline-end: auto;
}

html body main#main-content .min-table-wrapper :is(th, td) {
    vertical-align: top;
}

@media (max-width: 48em) {
    html body main#main-content .min-table-wrapper > table.ce-table,
    html body main#main-content .min-table-wrapper > table.min-table {
        max-inline-size: none;
        max-width: none;
        min-inline-size: max-content;
        min-width: max-content;
    }
}

html body main#main-content > .min-ce.lotte-section > :is(.min-header, .frame-header, header) {
    margin-block: 0 var(--min-space-md, 1rem);
}

html body main#main-content > .min-ce.lotte-section > :is(.min-header, .frame-header, header) > :is(.min-header__title, h1, h2, h3, h4, h5, h6) {
    margin-block: 0 var(--min-space-sm, 0.5rem);
}

html body main#main-content > .min-ce.lotte-section > :is(.min-header, .frame-header, header) > :last-child {
    margin-block-end: 0;
}

/* TYPO3-GRUND: Lotte Textmedia-Elemente mit Frame-Klasse
 * lotte-section/lotte-section--* rendern durch das mandantenspezifische
 * Textmedia-Template ohne innere .container-Ebene. Dadurch kleben
 * Text-/Info-Box-Inhalte auf Unterseiten am linken Viewport. Der Abschnitt
 * bleibt full-bleed, der redaktionelle Inhalt folgt wieder der 1300px-
 * Prototypgeometrie. */
html body .lotte-section > .ce-textmedia__content {
    box-sizing: border-box;
    max-width: var(--lotte-content-max-width, 1300px);
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--lotte-content-padding-inline, clamp(1rem, 4vw, 2.5rem));
}

/* TYPO3-GRUND: Das mandantenspezifische Textmedia-Template gibt bei reinen
 * Frame-Varianten (z. B. frame_class=lotte-section--white) die Modifier-Klasse
 * direkt auf dem <section>-Element aus, aber ohne die Basisklasse
 * .lotte-section. Diese real gerenderte Core-/FormEngine-Variante braucht
 * dieselbe Section-Geometrie wie importierte Prototype-Sections. */
html body section:is(
    .lotte-section--white,
    .lotte-section--gradient-soft,
    .lotte-section--gradient-strong
):not(.lotte-section) {
    box-sizing: border-box;
    padding-block: var(--lotte-content-frame-padding-block, var(--min-space-xl, 4rem));
}

html body section:is(
    .lotte-section--white,
    .lotte-section--gradient-soft,
    .lotte-section--gradient-strong
):not(.lotte-section) > .ce-textmedia__content {
    box-sizing: border-box;
    max-width: var(--lotte-content-max-width, 1300px);
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--lotte-content-padding-inline, clamp(1rem, 4vw, 2.5rem));
}

/* Kräftige Lotte-Frame-Variante: TYPO3-Core/Textmedia-Kinder erben sonst
 * generische Headline-/Body-Farben und werden auf dem Verlauf unlesbar. */
html body .frame-lotte-section--gradient-strong,
html body .frame-lotte-section--gradient-strong :where(h1, h2, h3, h4, h5, h6, p, li, span, strong, em, small, blockquote),
html body .frame-lotte-section--gradient-strong :where(.ce-headline, .ce-textmedia__header, .ce-textmedia__content, .ce-bodytext),
html body section.lotte-section--gradient-strong,
html body section.lotte-section--gradient-strong :where(h1, h2, h3, h4, h5, h6, p, li, span, strong, em, small, blockquote),
html body section.lotte-section--gradient-strong :where(.ce-headline, .ce-textmedia__header, .ce-textmedia__content, .ce-bodytext) {
    color: #fff;
}

html body .frame-lotte-section--gradient-strong :where(a),
html body section.lotte-section--gradient-strong :where(a) {
    color: #fff;
    text-decoration-color: rgba(255, 255, 255, 0.72);
}

html body .frame-lotte-section--gradient-strong :where(a:hover, a:focus-visible),
html body section.lotte-section--gradient-strong :where(a:hover, a:focus-visible) {
    color: #fff;
    text-decoration-color: #fff;
}

/* ============================================================================
 * Brief 703: Styleguide-Steuerungen — Ausrichtung + Breite als echte
 * frame_class-Varianten (Auflagen aus Report 697).
 * TYPO3-GRUND: frame_class (Core-Feld) ist im Lotte-Template der einzige
 * redakteur-bedienbare Style-Schalter mit Frontend-Wirkung; der generische
 * Core-frame-layout-Wrapper wird in dieser Installation nicht zur Breiten-/
 * Ausrichtungssteuerung genutzt. Diese Werte werden im FormEngine-Rahmen-
 * Dropdown gewählt (page.tsconfig: TCEFORM.frame_class.addItems) und rendern
 * a) am Core-Frame-Wrapper als .frame-<value> und
 * b) bei textmedia als <section class="<value> ce-textmedia--*">.
 * Beide Hooks werden bedient, damit die Wirkung CType-unabhängig sichtbar ist.
 * Single-Select: ein Element trägt genau einen frame_class-Wert (Ausrichtung
 * ODER Breite ODER Section-Stil) — für Styleguide-Demos je ein Schalter.
 * ========================================================================== */

/* Basis-Geometrie: die Ausrichtungs-/Standardbreiten-Varianten rendern wie die
 * Section-Frames ohne innere .container-Ebene; der textmedia-Inhalt folgt
 * weiterhin der 1300px-Prototypgeometrie und klebt nicht am Viewportrand. */
html body section:is(
    .lotte-align--center,
    .lotte-align--right,
    .lotte-width--wide
) {
    box-sizing: border-box;
    padding-block: var(--lotte-space-section, 4rem);
}

html body section:is(
    .lotte-align--center,
    .lotte-align--right,
    .lotte-width--wide
) > .ce-textmedia__content {
    box-sizing: border-box;
    max-width: var(--lotte-content-max-width, 1300px);
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--lotte-content-padding-inline, clamp(1rem, 4vw, 2.5rem));
}

/* Ausrichtung: am Core-Frame-Wrapper (.frame-<value>, vererbt an alle Inhalts-
 * CTypes) und direkt am textmedia-Content. Linksbündig bleibt der Default. */
html body .frame-lotte-align--center,
html body section.lotte-align--center > .ce-textmedia__content {
    text-align: center;
}

html body .frame-lotte-align--right,
html body section.lotte-align--right > .ce-textmedia__content {
    text-align: right;
}

/* Breite: "Weit" erweitert den Lesecontainer, "Vollbreite" hebt ihn auf und
 * lässt die Sektion randlos laufen (innen bleibt ein lesbares Padding). */
html body section.lotte-width--wide > .ce-textmedia__content {
    max-width: var(--lotte-content-wide-max-width, 1600px);
}

html body section.lotte-width--full {
    box-sizing: border-box;
    width: 100%;
    padding-block: var(--lotte-space-section, 4rem);
}

html body section.lotte-width--full > .ce-textmedia__content {
    box-sizing: border-box;
    max-width: none;
    width: 100%;
    margin-inline: 0;
    padding-inline: var(--lotte-content-padding-inline, clamp(1rem, 4vw, 2.5rem));
}

/* TYPO3-GRUND: Redakteurinnen koennen reale Core-/Content-Block-Elemente mit
 * frame_class=default anlegen. Diese Ausgabe hat im Lotte-Template nicht immer
 * eine innere .container-Ebene, darf aber im Frontend nicht am Viewportrand
 * kleben. Das ist besonders auf Vorlagen-/Styleguide-Seiten sichtbar. */
html body .frame-default.frame-type-header,
html body .frame-default.frame-type-text,
html body section.ce-textmedia--media-top > .ce-textmedia__content,
html body section.ce-textmedia--media-bottom > .ce-textmedia__content,
html body .min-cards.default,
html body .mincore-columns.frame-default,
html body .min-stats.default,
html body .min-accordion.default,
html body .mincore-tabs:not(.mincore-tabs--lotte-newsbox) {
    box-sizing: border-box;
    max-width: var(--lotte-content-max-width, 1300px);
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--lotte-content-padding-inline, clamp(1rem, 4vw, 2.5rem));
}

/* TYPO3-GRUND: Das mandantenspezifische Textmedia-Template rendert echte
 * Core-FAL-Bilder als section.default.ce-textmedia--media-*. Ohne diese
 * Bruecke werden Standard-Textmedia-Bilder full-bleed statt als redaktionelles
 * Text/Bild-Element ausgegeben. */
html body section.default.ce-textmedia--media-top,
html body section.default.ce-textmedia--media-bottom {
    box-sizing: border-box;
    max-width: var(--lotte-content-max-width, 1300px);
    width: 100%;
    margin-inline: auto;
    padding-block: var(--min-space-lg, 2rem);
    padding-inline: var(--lotte-content-padding-inline, clamp(1rem, 4vw, 2.5rem));
}

/* TYPO3-GRUND: style.css setzt pauschal p { max-width: 70ch; }. Das darf
 * nicht auf jeden RTE-Absatz/min-paragraph durchschlagen, weil Textmedia,
 * Floats, Spalten und Well-Boxen sonst im Layoutfluss zu schmal werden. */
html body .min-paragraph,
html body .ce-bodytext p,
html body .ce-textmedia__content p,
html body .ce-textpic p {
    max-width: none;
}

html body .lotte-readable-width,
html body .lotte-text-constrained,
html body .frame-lotte-readable-width {
    max-width: min(70ch, var(--lotte-content-max-width, 1300px));
}

/* TYPO3-GRUND: Standard-Textmedia bekommt von style.css einen pauschalen
 * Section-Innenabstand von 64px. Dadurch konnten Redakteurinnen "Abstand
 * davor/danach" zwar setzen, der sichtbare Abstand blieb trotzdem gross. Der
 * Grundrhythmus wird hier auf einen normalen Content-Abstand reduziert; die
 * Backend-Frame-Spacing-Klassen bleiben die feinere Steuerung. */
html body section.default:is(.ce-textmedia--media-top, .ce-textmedia--media-bottom, .ce-textmedia--media-left, .ce-textmedia--media-right) {
    padding-block: var(--min-space-lg, 2rem);
}

html body section.default:is(.ce-textmedia--media-top, .ce-textmedia--media-bottom, .ce-textmedia--media-left, .ce-textmedia--media-right):is(.frame-space-before-extra-small, .frame-space-after-extra-small) {
    padding-block: var(--min-space-sm, 1rem);
}

/* TYPO3-GRUND: Textmedia-Elemente tragen bereits den 1300px-Frame. Zusaetzliches
 * Padding auf den direkten Content-/Media-Kindern verschob Text und Bilder um
 * weitere 40px nach innen und erzeugte je CTyp unterschiedliche linke Kanten. */
html body section.default:is(.ce-textmedia--media-top, .ce-textmedia--media-bottom, .ce-textmedia--media-left, .ce-textmedia--media-right) > :is(.ce-textmedia__content, .ce-textmedia__media) {
    box-sizing: border-box;
    max-width: none;
    padding-inline: 0;
}

/* TYPO3-GRUND: Innerhalb echter b13/mincore-Spalten ist der Spaltencontainer
 * der Layout-Rahmen. Verschachtelte Inhaltselemente duerfen dort keinen eigenen
 * automatischen Abschnittsabstand addieren. Redaktionell gesetztes
 * "Space Before/After" bleibt separat ueber die TYPO3-Frame-Spacing-Elemente
 * steuerbar. */
html body .mincore-columns__col {
    --lotte-content-frame-padding-block: 0;
    --lotte-nested-content-padding-block: 0;
}

html body .mincore-columns__col :is(
    .min-ce--textmedia > .ce-textpic,
    section.default:is(.ce-textmedia--media-top, .ce-textmedia--media-bottom, .ce-textmedia--media-left, .ce-textmedia--media-right),
    .min-accordion.default,
    .min-cards.default,
    .min-stats.default,
    .mincore-columns.frame-default,
    .mincore-tabs:not(.mincore-tabs--lotte-newsbox)
) {
    max-width: none;
    width: 100%;
    margin-inline: 0;
    padding-block: var(--lotte-nested-content-padding-block, 0);
    padding-inline: 0;
}

html body .mincore-columns__col :is(
    .min-accordion,
    .min-cards,
    .min-stats,
    .mincore-columns,
    .mincore-tabs
):not([class*="frame-space-before"]):not([class*="frame-space-after"]) {
    margin-block: 0;
}

html body .mincore-columns__col > .min-ce + .min-ce {
    margin-top: var(--min-space-md, 1.5rem);
}

html body .mincore-columns__col section.default:is(.ce-textmedia--media-top, .ce-textmedia--media-bottom, .ce-textmedia--media-left, .ce-textmedia--media-right) > :is(.ce-textmedia__content, .ce-textmedia__media) {
    padding-inline: 0;
}

/* TYPO3-GRUND: Lotte style.css enthaelt generische .ce-gallery/.ce-textmedia-
 * Regeln. Standard-FAL-Ausgaben in Textmedia duerfen Bildgroessen aus dem
 * Backend nicht auf 100% aufblasen. */
html body section:is(.ce-textmedia--media-top, .ce-textmedia--media-bottom) > .ce-textmedia__media {
    box-sizing: border-box;
    max-width: var(--lotte-content-max-width, 1300px);
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--lotte-content-padding-inline, clamp(1rem, 4vw, 2.5rem));
}

html body section:is(.ce-textmedia--media-top, .ce-textmedia--media-bottom) > .ce-textmedia__media > :is(.ce-gallery, .min-gallery) {
    max-width: none;
    margin: 0;
    padding: 0;
}

html body section:is(.ce-textmedia--media-top, .ce-textmedia--media-bottom) > .ce-textmedia__media :is(.ce-row, .min-gallery__row) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--min-space-md, 1rem);
    margin: 0;
}

html body section:is(.ce-textmedia--media-top, .ce-textmedia--media-bottom) > .ce-textmedia__media :is(.ce-column, .min-gallery__column) {
    max-width: 100%;
}

html body section:is(.ce-textmedia--media-top, .ce-textmedia--media-bottom) > .ce-textmedia__media :is(figure, .min-media) {
    margin: 0;
}

html body section:is(.ce-textmedia--media-top, .ce-textmedia--media-bottom) > .ce-textmedia__media img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    border-radius: var(--lotte-radius, 4px);
}

html body section.default.ce-textmedia--media-left,
html body section.default.ce-textmedia--media-right {
    --lotte-textmedia-side-media-width: min(32vw, 368px);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(220px, var(--lotte-textmedia-side-media-width)) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
    max-width: var(--lotte-content-max-width, 1300px);
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--lotte-content-padding-inline, clamp(1rem, 4vw, 2.5rem));
}

html body section.default.ce-textmedia--media-right {
    grid-template-columns: minmax(0, 1fr) minmax(220px, var(--lotte-textmedia-side-media-width));
}

html body section.default.ce-textmedia--media-left > .ce-textmedia__media {
    order: 1;
}

html body section.default.ce-textmedia--media-left > .ce-textmedia__content {
    order: 2;
}

html body section.default.ce-textmedia--media-right > .ce-textmedia__media {
    order: 2;
}

html body section.default.ce-textmedia--media-right > .ce-textmedia__content {
    order: 1;
}

html body section.default:is(.ce-textmedia--media-left, .ce-textmedia--media-right) > .ce-textmedia__media > :is(.ce-gallery, .min-gallery) {
    max-width: none;
    margin: 0;
    padding: 0;
}

html body section.default.ce-textmedia--media-left > .ce-textmedia__media img,
html body section.default.ce-textmedia--media-right > .ce-textmedia__media img {
    width: 100%;
    height: auto;
    border-radius: var(--lotte-radius, 4px);
}

html body section:is(.ce-textmedia--media-top, .ce-textmedia--media-bottom, .ce-textmedia--media-left, .ce-textmedia--media-right) > .ce-textmedia__media :is(.min-media__lightbox, .min-media__link) {
    display: inline-block;
    max-width: 100%;
}

html body section:is(.ce-textmedia--media-top, .ce-textmedia--media-bottom, .ce-textmedia--media-left, .ce-textmedia--media-right) > .ce-textmedia__media img.min-media__img {
    width: auto;
    max-width: 100%;
    height: auto;
    border-radius: var(--lotte-radius, 4px);
}

/* TYPO3-GRUND: Lotte-Section-Textmedia ohne innere .container-Ebene muss
 * denselben sichtbaren Inhaltsrand verwenden wie frame-default-Elemente.
 * Die Full-Bleed-Section bleibt erhalten, aber Media und Text liegen innen
 * strikt auf der 1300px-Prototyp-Geometrie. */
html body section.lotte-section:is(.ce-textmedia--media-left, .ce-textmedia--media-right),
html body section:is(.lotte-section--white, .lotte-section--surface, .lotte-section--gradient-soft, .lotte-section--gradient-strong):is(.ce-textmedia--media-left, .ce-textmedia--media-right) {
    --lotte-textmedia-side-media-width: min(32vw, 368px);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(220px, var(--lotte-textmedia-side-media-width)) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
    padding-inline: max(var(--lotte-content-padding-inline, clamp(1rem, 4vw, 2.5rem)), calc((100vw - var(--lotte-content-max-width, 1300px)) / 2 + var(--lotte-content-padding-inline, clamp(1rem, 4vw, 2.5rem))));
}

html body section.lotte-section.ce-textmedia--media-right,
html body section:is(.lotte-section--white, .lotte-section--surface, .lotte-section--gradient-soft, .lotte-section--gradient-strong).ce-textmedia--media-right {
    grid-template-columns: minmax(0, 1fr) minmax(220px, var(--lotte-textmedia-side-media-width));
}

html body section.lotte-section:is(.ce-textmedia--media-left, .ce-textmedia--media-right) > :is(.ce-textmedia__media, .ce-textmedia__content),
html body section:is(.lotte-section--white, .lotte-section--surface, .lotte-section--gradient-soft, .lotte-section--gradient-strong):is(.ce-textmedia--media-left, .ce-textmedia--media-right) > :is(.ce-textmedia__media, .ce-textmedia__content) {
    max-width: none;
    width: auto;
    margin-inline: 0;
    padding-inline: 0;
}

html body section.lotte-section.ce-textmedia--media-left > .ce-textmedia__media,
html body section:is(.lotte-section--white, .lotte-section--surface, .lotte-section--gradient-soft, .lotte-section--gradient-strong).ce-textmedia--media-left > .ce-textmedia__media {
    order: 1;
}

html body section.lotte-section.ce-textmedia--media-left > .ce-textmedia__content,
html body section:is(.lotte-section--white, .lotte-section--surface, .lotte-section--gradient-soft, .lotte-section--gradient-strong).ce-textmedia--media-left > .ce-textmedia__content {
    order: 2;
}

html body section.lotte-section.ce-textmedia--media-right > .ce-textmedia__media,
html body section:is(.lotte-section--white, .lotte-section--surface, .lotte-section--gradient-soft, .lotte-section--gradient-strong).ce-textmedia--media-right > .ce-textmedia__media {
    order: 2;
}

html body section.lotte-section.ce-textmedia--media-right > .ce-textmedia__content,
html body section:is(.lotte-section--white, .lotte-section--surface, .lotte-section--gradient-soft, .lotte-section--gradient-strong).ce-textmedia--media-right > .ce-textmedia__content {
    order: 1;
}

html body section.lotte-section:is(.ce-textmedia--media-left, .ce-textmedia--media-right) > .ce-textmedia__media > :is(.ce-gallery, .min-gallery),
html body section:is(.lotte-section--white, .lotte-section--surface, .lotte-section--gradient-soft, .lotte-section--gradient-strong):is(.ce-textmedia--media-left, .ce-textmedia--media-right) > .ce-textmedia__media > :is(.ce-gallery, .min-gallery) {
    max-width: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 47.9375em) {
    html body section.default.ce-textmedia--media-left,
    html body section.default.ce-textmedia--media-right,
    html body section.lotte-section:is(.ce-textmedia--media-left, .ce-textmedia--media-right),
    html body section:is(.lotte-section--white, .lotte-section--surface, .lotte-section--gradient-soft, .lotte-section--gradient-strong):is(.ce-textmedia--media-left, .ce-textmedia--media-right) {
        display: block;
    }

    html body section.default.ce-textmedia--media-left > .ce-textmedia__media,
    html body section.default.ce-textmedia--media-right > .ce-textmedia__media,
    html body section.lotte-section:is(.ce-textmedia--media-left, .ce-textmedia--media-right) > .ce-textmedia__media,
    html body section:is(.lotte-section--white, .lotte-section--surface, .lotte-section--gradient-soft, .lotte-section--gradient-strong):is(.ce-textmedia--media-left, .ce-textmedia--media-right) > .ce-textmedia__media {
        margin-block-end: clamp(1rem, 5vw, 1.5rem);
    }
}

/* TYPO3-GRUND: mincore_columns ist ein echter b13/container-Renderer. Die
 * Mandant-CSS darf dessen Grid nicht zu block zuruecksetzen. */
html body .mincore-columns > .mincore-columns__row {
    display: grid;
    width: 100%;
}

/* TYPO3-GRUND: Rahmenvarianten wie "Lotte Abschnitt – weicher Verlauf"
 * duerfen als Hintergrund full-bleed bleiben; die Spalten selbst muessen aber
 * im gleichen 1300px-Inhaltsraster liegen wie das Default-Element. */
html body .mincore-columns:is(
    .frame-lotte-section,
    .frame-lotte-section--white,
    .frame-lotte-section--surface,
    .frame-lotte-section--gradient-soft,
    .frame-lotte-section--gradient-strong,
    .lotte-section,
    .lotte-section--white,
    .lotte-section--surface,
    .lotte-section--gradient-soft,
    .lotte-section--gradient-strong
) > .mincore-columns__row {
    box-sizing: border-box;
    max-width: var(--lotte-content-max-width, 1300px);
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--lotte-content-padding-inline, clamp(1rem, 4vw, 2.5rem));
}

/* TYPO3-GRUND: Full-bleed Container/Tabellen brauchen denselben inneren
 * Vertikalrhythmus wie normale Container. Abstand davor/danach bleibt separat
 * ueber die TYPO3-Frame-Spacing-Klassen steuerbar. */
html body .mincore-columns:is(
    .frame-lotte-section,
    .frame-lotte-section--white,
    .frame-lotte-section--surface,
    .frame-lotte-section--gradient-soft,
    .frame-lotte-section--gradient-strong,
    .lotte-section,
    .lotte-section--white,
    .lotte-section--surface,
    .lotte-section--gradient-soft,
    .lotte-section--gradient-strong
) {
    padding-block: var(--lotte-content-frame-padding-block, var(--min-space-xl, 4rem));
}

/* TYPO3-GRUND: Frei im Hauptinhalt gesetzte Mehrspalter bekommen denselben
 * Grundrhythmus wie Text & Medien. Direkt gerenderte Container-Header bringen
 * keine zusaetzliche H2-Top-Margin mit; verschachtelte Container bleiben
 * unberuehrt und werden durch ihre Innenelemente gesteuert. */
html body main#main-content > .mincore-columns:is(
    .frame-default,
    .frame-lotte-section,
    .frame-lotte-section--white,
    .frame-lotte-section--surface,
    .frame-lotte-section--gradient-soft,
    .frame-lotte-section--gradient-strong,
    .lotte-section,
    .lotte-section--white,
    .lotte-section--surface,
    .lotte-section--gradient-soft,
    .lotte-section--gradient-strong
) {
    padding-block: var(--lotte-content-frame-padding-block, var(--min-space-lg, 2rem));
}

/* TYPO3-GRUND: Container-Ueberschriften werden vom b13/mincore-Container
 * getrennt von der Spaltenzeile gerendert. Die Zeile war bereits im
 * Lotte-Raster, der direkte Header klebte bei Section-Frames aber am
 * Viewport. Header und Subheader folgen jetzt demselben Inhaltsraster. */
html body .mincore-columns:is(
    .frame-lotte-section,
    .frame-lotte-section--white,
    .frame-lotte-section--surface,
    .frame-lotte-section--gradient-soft,
    .frame-lotte-section--gradient-strong,
    .lotte-section,
    .lotte-section--white,
    .lotte-section--surface,
    .lotte-section--gradient-soft,
    .lotte-section--gradient-strong
) > :is(.mincore-header, .frame-header, header, .ce-headline, h2, h3):not(.mincore-columns__row) {
    box-sizing: border-box;
    max-width: var(--lotte-content-max-width, 1300px);
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--lotte-content-padding-inline, clamp(1rem, 4vw, 2.5rem));
    text-align: start;
}

html body main#main-content > .mincore-columns > :is(.mincore-header, .frame-header, header, .ce-headline, h2, h3):not(.mincore-columns__row) {
    margin-block: 0 var(--min-space-md, 1rem);
}

html body .mincore-columns--2 > .mincore-columns__row {
    grid-template-columns: 1fr 1fr;
}

html body .mincore-columns--3 > .mincore-columns__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

html body .mincore-columns--4 > .mincore-columns__row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

html body .mincore-columns--ratio-33-66 > .mincore-columns__row { grid-template-columns: 1fr 2fr; }
html body .mincore-columns--ratio-66-33 > .mincore-columns__row { grid-template-columns: 2fr 1fr; }
html body .mincore-columns--ratio-25-75 > .mincore-columns__row { grid-template-columns: 1fr 3fr; }
html body .mincore-columns--ratio-75-25 > .mincore-columns__row { grid-template-columns: 3fr 1fr; }
html body .mincore-columns--ratio-40-60 > .mincore-columns__row { grid-template-columns: 2fr 3fr; }
html body .mincore-columns--ratio-60-40 > .mincore-columns__row { grid-template-columns: 3fr 2fr; }
html body .mincore-columns--gap-none > .mincore-columns__row { gap: 0; }
html body .mincore-columns--gap-sm > .mincore-columns__row { gap: 1rem; }
html body .mincore-columns--gap-md > .mincore-columns__row { gap: 2rem; }
html body .mincore-columns--gap-lg > .mincore-columns__row { gap: 3rem; }
html body .mincore-columns--gap-xl > .mincore-columns__row { gap: 4rem; }

html body .mincore-columns__col {
    min-width: 0;
    overflow-wrap: break-word;
}

/* OptiGov liefert die fachliche Unterseiten-Breadcrumb selbst. Sie bleibt als
 * kompakte Orientierung sichtbar, weil alle Portalansichten auf derselben
 * TYPO3-Seite gerendert werden. Der TYPO3-Frame und die Lotte-Section liefern
 * sonst zusammen bis zu 112px Abstand vor dem Widget. Für diese eingebettete
 * Systemkomponente beginnt der Inhalt deshalb direkt nach dem Page-Header; nur
 * der eine definierte Widget-Abstand bleibt erhalten. */
html body main#main-content > .min-ce--lotte_optigov {
    padding-block-start: 0;
}

html body main#main-content > .min-ce--lotte_optigov .lotte-optigov {
    padding-block-start: 0;
}

html body .lotte-optigov-widget .og-holder > header nav[aria-label="Brotkrumennavigation"] {
    display: block !important;
    font-size: 0.875rem;
    margin: 0 !important;
    padding: 0 !important;
}

html body .lotte-optigov-widget .og-holder > header[aria-label="Bürgerservice Kopfzeile"] {
    display: block !important;
    margin: 0 0 1rem !important;
    padding: 0.5rem 0.75rem !important;
}

/* KUNDENWUNSCH 18.08.2026 (Bernd Wuebbenhorst): Der OptiGov-Schnellzugriff
 * (Suchfeld plus Dienstleistungen, Einrichtungen, Mitarbeitende und
 * Terminvereinbarung) bleibt sichtbar wie im Altsystem. Der Anbieter liefert
 * ein dunkelblaues Standardpanel; Flaeche, Radius und Textfarbe folgen hier
 * den Lotte-Tokens. */
html body .lotte-optigov-widget #og-main > .og-startseite > .og-hero {
    display: block !important;
    background: var(--lotte-primary, #145675) !important;
    border-radius: var(--lotte-radius, 4px) !important;
}

html body .lotte-optigov-widget #og-main > .og-startseite > .og-hero :is(h1, h2, a, label) {
    color: #fff !important;
}

/* KUNDENWUNSCH 18.08.2026 (Bernd Wuebbenhorst): Titel, Suchfeld und
 * Schnellzugriff standen zu dicht beieinander. */
html body .lotte-optigov-widget #og-main > .og-startseite > .og-hero {
    padding: 2rem 2rem 1.75rem !important;
}

html body .lotte-optigov-widget #og-main > .og-startseite > .og-hero > h1 {
    margin-block-end: 1.5rem !important;
}

html body .lotte-optigov-widget #og-main > .og-startseite > .og-hero > .og-search {
    margin-block-end: 1.5rem !important;
}

html body .lotte-optigov-widget #og-main > .og-startseite > .og-hero > nav {
    margin-block-start: 0 !important;
}

/* Meeting 31.08.2026: Die Kontonavigation ist kein Bestandteil des
 * kommunalen Schnellzugriffs. Brotkrume und Portal bleiben erhalten; der
 * zusätzliche Anbieter-Login wird in der Lotte-Einbindung nicht gezeigt. */
html body .lotte-optigov-widget .og-holder > header[aria-label="Bürgerservice Kopfzeile"] {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: nowrap;
}

html body .lotte-optigov-widget .og-holder > header[aria-label="Bürgerservice Kopfzeile"] > nav {
    flex: 1 1 auto;
    min-width: 0;
}

html body .lotte-optigov-widget .og-holder > header[aria-label="Bürgerservice Kopfzeile"] > .og-account {
    display: none !important;
}

/* OptiGov v2: Widget optisch an die Lotte-Tokens andocken. Der Anbieter liefert
 * eigene Klassen; diese Schicht reduziert nur Fremd-Padding und Markenbrueche. */
html body .lotte-optigov {
    --og-color-accent: var(--lotte-primary, #145675);
    --og-color-primary: var(--lotte-primary, #145675);
    --og-color-secondary: var(--lotte-green, #84BD00);
    --og-color-link: var(--lotte-primary, #145675);
    --og-border-radius: var(--lotte-radius, 4px);
    --og-font-family: var(--lotte-font-sans, "Open Sans", Arial, sans-serif);
}

html body .lotte-optigov .container.lotte-content__body {
    max-width: var(--lotte-content-max-width, 1300px);
}

html body .lotte-optigov-widget {
    margin-block-start: clamp(0.5rem, 1vw, 0.75rem);
}

/* MeldooPLUS is the actual municipal defect reporter. It is deliberately a
 * separate TYPO3 element from the OptiGov service portal and follows the same
 * full content width as the customer-approved widget on the previous site. */
html body main#main-content > .min-ce--lotte_meldoo {
    padding-block-start: 0;
}

html body .lotte-meldoo .container.lotte-content__body {
    max-width: var(--lotte-content-max-width, 1300px);
}

html body .lotte-meldoo-widget {
    width: 100%;
    min-width: 0;
    overflow: visible;
    background: #fff;
}

html body .lotte-meldoo-widget #webReportsContainer {
    width: 100%;
    min-width: 0;
}

html body .lotte-optigov-widget .og-holder {
    box-sizing: border-box;
    color: var(--lotte-text, #202020);
    font-family: var(--lotte-font-sans, "Open Sans", Arial, sans-serif);
    padding: 0 !important;
}

html body .lotte-optigov-widget :is(.og-card, .og-filter, .og-search, .og-service-card, .og-institution-card) {
    border-radius: var(--lotte-radius, 4px) !important;
    border-color: color-mix(in srgb, var(--lotte-primary, #145675) 18%, #d9e2e6) !important;
}

html body .lotte-optigov-widget :is(a, button, .og-button, .og-link) {
    font-family: inherit;
}

html body .lotte-optigov-widget :is(.og-button, button[type="submit"], .og-primary) {
    border-radius: var(--lotte-radius, 4px) !important;
    background: var(--lotte-primary, #145675) !important;
    color: #fff !important;
}

/* OptiGov is an external widget. Only its documented host classes are themed,
 * keeping the municipality's own dark/contrast state readable. */
html[data-theme="dark"] body .lotte-optigov {
    --og-color-accent: #8fd7f2;
    --og-color-primary: #8fd7f2;
    --og-color-secondary: #b9de64;
    --og-color-link: #8fd7f2;
}

html[data-theme="dark"] body .lotte-optigov-widget :is(.og-holder, .og-card, .og-filter, .og-search, .og-service-card, .og-institution-card) {
    background-color: #162a3a;
    color: #f5f8fa;
    border-color: #5b778a !important;
}

html[data-theme="dark"] body .lotte-optigov-widget :is(a, .og-link) {
    color: #8fd7f2;
}

html[data-theme="dark"][data-high-contrast="true"] body .lotte-optigov-widget :is(.og-holder, .og-card, .og-filter, .og-search, .og-service-card, .og-institution-card) {
    background-color: #000;
    color: #fff;
    border-color: #fff !important;
}

html[data-theme="dark"][data-high-contrast="true"] body .lotte-optigov-widget :is(a, .og-link) {
    color: #ffeb3b;
}

/* The provider keeps appointment rows and some section surfaces white even
 * when the host switches to dark mode. Keep those provider-owned light
 * surfaces explicitly dark-on-light instead of inheriting white host text. */
html[data-theme="dark"] body .lotte-optigov-widget .card-terminvereinbarung-dienstleistung,
html[data-theme="dark"] body .lotte-optigov-widget .card-terminvereinbarung-dienstleistung :is(span, strong, p, time, label) {
    color: #202020 !important;
}

html[data-theme="dark"] body .lotte-optigov-widget #og-main h2 {
    color: #f5f8fa !important;
}

html[data-theme="dark"][data-high-contrast="true"] body .lotte-optigov-widget #og-main h2 {
    color: #fff !important;
}

html[data-theme="dark"] body .lotte-optigov-widget .card-terminvereinbarung-dienstleistung {
    background-color: #fff !important;
    border: 2px solid #5b778a !important;
}

html[data-theme="dark"][data-high-contrast="true"] body .lotte-optigov-widget .card-terminvereinbarung-dienstleistung {
    border-color: #000 !important;
}

html[data-theme="dark"] body .lotte-optigov-widget #og-main > .og-startseite > .og-hero :is(h1, h2, a, label) {
    color: #fff !important;
}

/* OptiGov renders these three link groups on different provider-owned
 * surfaces. Keep the overrides deliberately structural: dark links on the
 * retained light topic cards, light links on the dark host/hero surfaces. */
html[data-theme="dark"] body #lotte-optigov-widget > .og-holder > header > nav a {
    color: #8fd7f2 !important;
}

html[data-theme="dark"] body .lotte-optigov-widget #og-main > .og-startseite > .og-hero > nav > a {
    background-color: #0d3d55 !important;
    color: #fff !important;
}

html[data-theme="dark"] body .lotte-optigov-widget #og-main > .og-startseite > .themenfelder > .og-stub-themenfelder a {
    color: #0d3d55 !important;
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
}

html[data-theme="dark"][data-high-contrast="true"] body .lotte-optigov-widget #og-main > .og-startseite > .og-hero > nav > a {
    background-color: #000 !important;
    color: #ffeb3b !important;
    outline-color: #fff;
}

html[data-theme="dark"][data-high-contrast="true"] body .lotte-optigov-widget #og-main > .og-startseite > .themenfelder > .og-stub-themenfelder a {
    color: #000 !important;
    text-decoration-thickness: 0.12em;
}

/* TYPO3-GRUND: Accordions und Statistik-Elemente nutzen dieselben
 * Rahmenklassen wie Text/Spalten. Der Hintergrund bleibt seitenbreit, aber
 * Bedienelemente, Zahlen und Texte folgen strikt dem Inhaltscontainer. */
html body .min-accordion:is(
    .lotte-section,
    .lotte-section--white,
    .lotte-section--surface,
    .lotte-section--gradient-soft,
    .lotte-section--gradient-strong
),
html body .min-stats:is(
    .lotte-section,
    .lotte-section--white,
    .lotte-section--surface,
    .lotte-section--gradient-soft,
    .lotte-section--gradient-strong
) {
    box-sizing: border-box;
    padding-inline: max(var(--lotte-content-padding-inline, clamp(1rem, 4vw, 2.5rem)), calc((100vw - var(--lotte-content-max-width, 1300px)) / 2 + var(--lotte-content-padding-inline, clamp(1rem, 4vw, 2.5rem))));
}

html body .min-accordion:is(
    .lotte-section,
    .lotte-section--white,
    .lotte-section--surface,
    .lotte-section--gradient-soft,
    .lotte-section--gradient-strong
) > :is(.min-accordion__items, .frame-header, .ce-headline, h2, h3),
html body .min-stats:is(
    .lotte-section,
    .lotte-section--white,
    .lotte-section--surface,
    .lotte-section--gradient-soft,
    .lotte-section--gradient-strong
) > :is(.min-stats__heading, .min-stats__grid) {
    max-width: var(--lotte-content-max-width, 1300px);
    margin-inline: auto;
    text-align: start;
}

html body .min-accordion:is(
    .lotte-section,
    .lotte-section--white,
    .lotte-section--surface,
    .lotte-section--gradient-soft,
    .lotte-section--gradient-strong
) > :is(.frame-header, .ce-headline, h2, h3) {
    width: 100%;
}

html body .min-stats:is(
    .lotte-section,
    .lotte-section--white,
    .lotte-section--surface,
    .lotte-section--gradient-soft,
    .lotte-section--gradient-strong
) .min-stats__grid {
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: clamp(1rem, 2vw, 1.75rem);
}

/* TYPO3-GRUND: Top-Level-Accordions mit Lotte-Frame folgen demselben
 * Section-Rhythmus wie Textmedia und Mehrspalter. Die Panel-Inhalte selbst
 * bekommen echte Innenluft; Bilder links/rechts bleiben oben mit dem Text
 * buendig, kleben aber nicht direkt unter dem Summary-Header. */
html body main#main-content > .min-accordion {
    margin-block: 0;
}

html body main#main-content > .min-accordion.default {
    padding-block: var(--lotte-content-frame-padding-block, var(--min-space-lg, 2rem));
}

html body main#main-content > .min-accordion:is(
    .lotte-section,
    .lotte-section--white,
    .lotte-section--surface,
    .lotte-section--gradient-soft,
    .lotte-section--gradient-strong
) {
    padding-block: var(--lotte-content-frame-padding-block, var(--min-space-lg, 2rem));
}

html body main#main-content > .min-accordion > :is(.min-accordion__headline, .ce-accordion__heading, h2, h3) {
    margin-block: 0 var(--min-space-md, 1rem);
}

html body .min-accordion .min-accordion__item[open] > .min-accordion__content.ce-accordion__body {
    padding-block-start: var(--min-space-md, 1rem);
    padding-block-end: var(--min-space-md, 1rem);
}

html body .min-accordion__content-inner {
    align-items: flex-start;
    gap: clamp(1rem, 2vw, 2rem);
}

html body .min-accordion__media {
    margin: 0;
}

html body .min-accordion__content-inner:is(
    .min-accordion__content-inner--image-bottom,
    .min-accordion__content-inner--image-bottom-center,
    .min-accordion__content-inner--image-bottom-right
) .min-accordion__media {
    margin-block-start: var(--min-space-md, 1rem);
}

html body .min-accordion__picture,
html body .min-accordion__image {
    display: block;
    width: 100%;
    height: auto;
}

html body .min-stats:is(
    .lotte-section,
    .lotte-section--white,
    .lotte-section--surface,
    .lotte-section--gradient-soft,
    .lotte-section--gradient-strong
) .min-stats__item {
    min-width: 0;
    padding: 0.75rem;
}

html body .min-stats:is(
    .lotte-section,
    .lotte-section--white,
    .lotte-section--surface,
    .lotte-section--gradient-soft,
    .lotte-section--gradient-strong
) .min-stats__value {
    font-size: clamp(1.75rem, 3.2vw, 2.75rem);
}

html body .min-stats:is(
    .lotte-section,
    .lotte-section--white,
    .lotte-section--surface,
    .lotte-section--gradient-soft,
    .lotte-section--gradient-strong
) .min-stats__label {
    max-width: none;
}

@media (max-width: 767px) {
    html body .mincore-columns--stack-tablet > .mincore-columns__row,
    html body .mincore-columns--stack-reverse > .mincore-columns__row {
        grid-template-columns: 1fr;
    }

    html body .mincore-columns--stack-reverse .mincore-columns__col--left {
        order: 2;
    }

    html body .mincore-columns--stack-reverse .mincore-columns__col--right {
        order: 1;
    }
}

/* TYPO3-GRUND: Beim Import wurden Lotte-Leadtexte teilweise als
 * Textmedia-Subheader gespeichert. Das generische minCore-Badge macht daraus
 * eine kleine, uppercase Markierung; im Lotte-Prototyp ist es normaler
 * Leadtext im Inhaltsfluss. */
html body .lotte-section > .ce-textmedia__content > .ce-badge {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0 0 2rem;
    border-radius: 0;
    background: transparent;
    color: var(--lotte-text, #1a1a1a);
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0;
    text-transform: none;
}

/* TYPO3-GRUND: Importierte Infoboxen enthalten h2-Ueberschriften, waehrend
 * die Prototyp-CSS diese Kartenueberschriften kleiner als globale Seiten-H2
 * setzt. Ohne diese Bruecke greifen spaete globale h2-Regeln und machen die
 * Karten optisch zu laut. */
html body .lotte-info-box h2 {
    margin: 2.5rem 0 1rem;
    color: var(--lotte-text, #000);
    font-size: 1.75rem;
    line-height: 1.2;
}

/* TYPO3-GRUND: Einzelne importierte prototype-html-Frames enthalten nur
 * einfache Text-/CTA-Knoten statt einer eigenen Prototype-Section. Diese
 * Inhalte brauchen denselben inneren Container. Frames mit bereits
 * vorhandener Section-Struktur bleiben ausgenommen. */
html body .frame-prototype-html:not(:has(> .ce-content-section, > .lotte-section, > .lotte-page-header, > .lotte-hero)) {
    box-sizing: border-box;
    max-width: var(--lotte-content-max-width, 1300px);
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--lotte-content-padding-inline, clamp(1rem, 4vw, 2.5rem));
}

/* TYPO3-GRUND: Flache RTE-Listen in echten Text-/Textmedia-Elementen erben
 * sonst den grossen Absatzrhythmus des Lotte-Prototyps. Marker trennen die
 * Eintraege bereits visuell; die Liste muss daher kompakter bleiben und wie
 * redaktioneller Fliesstext wirken, ohne Karten-/Navigationslisten zu treffen. */
html body :is(.frame-default, .ce-textmedia__content, .ce-content-section > .container) :where(ul, ol):not([class]) {
    margin-block: 0 1.35rem;
    padding-inline-start: 1.35em;
}

html body :is(.frame-default, .ce-textmedia__content, .ce-content-section > .container) :where(ul, ol):not([class]) > li {
    margin-block: 0 0.35rem;
    padding-inline-start: 0.2em;
    line-height: 1.5;
}

html body :is(.frame-default, .ce-textmedia__content, .ce-content-section > .container) :where(ul, ol):not([class]) > li:last-child {
    margin-block-end: 0;
}

html body :is(.frame-default, .ce-textmedia__content, .ce-content-section > .container) :where(ul, ol):not([class]) > li::marker {
    color: var(--lotte-primary, #145675);
    font-size: 0.85em;
}

/* TYPO3-GRUND: Mandant-Frames mit data-s-width="full" sind echte
 * Full-Bleed-Ebenen. Der Inhalt bleibt ueber die wiederkehrende innere
 * .container-Geometrie editierbar und prototypkonform zentriert. Das ersetzt
 * fruehere Einzelelement-Korrekturen fuer Themen-, Rubrik- und CTA-Ebenen. */
html body .lotte-section[data-s-width="full"],
html body .min-cards.lotte-section[data-s-width="full"] {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

html body .lotte-section[data-s-width="full"] > .container,
html body .min-cards.lotte-section[data-s-width="full"] > .container {
    box-sizing: border-box;
    max-width: var(--lotte-content-max-width, 1300px);
    margin-inline: auto;
    padding-inline: var(--lotte-content-padding-inline, clamp(1rem, 4vw, 2.5rem));
}

html body .lotte-section[data-s-width="full"] > .container > :last-child {
    margin-bottom: 0;
}

/* TYPO3-GRUND: Die Standardfelder "Abstand davor" und "Abstand danach" aus
 * der Appearance-Palette muessen auch in Lotte wirken, obwohl die generische
 * minCore-Framework-CSS fuer diese Installation deaktiviert ist. */
html body .frame-space-before-extra-small,
html body .frame-space-after-extra-small {
    display: block;
    height: auto;
}

html body .frame-space-before-small,
html body .frame-space-after-small {
    display: block;
    height: auto;
}

html body .frame-space-before-medium,
html body .frame-space-after-medium {
    display: block;
    height: auto;
}

html body .frame-space-before-large,
html body .frame-space-after-large {
    display: block;
    height: auto;
}

html body .frame-space-before-extra-large,
html body .frame-space-after-extra-large {
    display: block;
    height: auto;
}

html body .frame-space-before-extra-small {
    margin-top: var(--min-space-xs, 0.5rem);
}

html body .frame-space-after-extra-small {
    margin-bottom: var(--min-space-xs, 0.5rem);
}

html body .frame-space-before-small {
    margin-top: var(--min-space-sm, 1rem);
}

html body .frame-space-after-small {
    margin-bottom: var(--min-space-sm, 1rem);
}

html body .frame-space-before-medium {
    margin-top: var(--min-space-md, 1.5rem);
}

html body .frame-space-after-medium {
    margin-bottom: var(--min-space-md, 1.5rem);
}

html body .frame-space-before-large {
    margin-top: var(--min-space-lg, 2.5rem);
}

html body .frame-space-after-large {
    margin-bottom: var(--min-space-lg, 2.5rem);
}

html body .frame-space-before-extra-large {
    margin-top: var(--min-space-xl, 4rem);
}

html body .frame-space-after-extra-large {
    margin-bottom: var(--min-space-xl, 4rem);
}

/* TYPO3-GRUND: Top-Level-Infoboxen/Fazitboxen muessen mit normalen
 * Textmedia-Elementen buendig sein. In Spalten bleibt die Box an die
 * jeweilige Spalte gebunden. */
html body main > .min-ce > .ce-textpic.well,
html body main > .min-ce > section.ce-textpic.well,
html body main > .ce-textpic.well,
html body main > section.ce-textpic.well {
    box-sizing: border-box;
    max-width: var(--lotte-content-max-width, 1300px);
    width: 100%;
    margin-inline: auto;
    padding-block: var(--min-space-lg, 2rem);
    padding-left: calc(var(--lotte-content-padding-inline, clamp(1rem, 4vw, 2.5rem)) - 4px);
    padding-right: var(--lotte-content-padding-inline, clamp(1rem, 4vw, 2.5rem));
}

html body .mincore-columns__col .ce-textpic.well {
    max-width: none;
    width: 100%;
}

/* TYPO3-GRUND: Spaete globale Link-Regeln aus zusammengefuehrten CSS-Dateien
 * faerben Footer-Links blau. Im Prototyp sind Footer-Links und Icons auf dem
 * dunklen Lotte-Footer hell und kontraststark. */
html body .lotte-footer :where(p, li, span, small, strong, em, address),
html body .lotte-footer :where(ul, ol):not([class]) {
    color: var(--lotte-white-85, rgba(255, 255, 255, 0.85));
    font-size: 1rem;
    line-height: 1.65;
}

html body .lotte-footer :where(ul, ol):not([class]) {
    margin-block: 0.35rem 0;
    padding-inline-start: 1.15rem;
}

html body .lotte-footer :where(ul, ol):not([class]) > li + li {
    margin-block-start: 0.35rem;
}

html body .lotte-footer :where(ul, ol):not([class]) > li::marker {
    color: #fff !important;
}

html body .lotte-footer a,
html body .lotte-footer a:visited,
html body .lotte-footer .lotte-footer__link,
html body .lotte-footer .lotte-footer__link:visited,
html body .lotte-footer .lotte-footer__legal-link,
html body .lotte-footer .lotte-footer__legal-link:visited,
html body .lotte-footer .lotte-footer__contact-line a {
    color: var(--lotte-white-90, rgba(255, 255, 255, 0.9));
}

html body .lotte-footer a:hover,
html body .lotte-footer .lotte-footer__link:hover,
html body .lotte-footer .lotte-footer__legal-link:hover,
html body .lotte-footer .lotte-footer__contact-line a:hover {
    color: var(--lotte-green-light, #B5E65A);
}

/* WCAG target size: legal/footer links are text links, but their focus and
 * pointer target must not collapse to a narrow line box. */
html body .lotte-footer .lotte-footer__legal-link,
html body .lotte-footer .lotte-footer__contact-line a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 0.25rem;
}

html body .lotte-footer .lotte-footer__legal-link:focus-visible,
html body .lotte-footer .lotte-footer__contact-line a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    background: #000;
    color: #ffeb3b;
}

html[data-theme="dark"][data-high-contrast="true"] body .lotte-footer {
    background: #000;
    color: #fff;
}

html[data-theme="dark"][data-high-contrast="true"] body .lotte-footer :is(p, li, span, small, strong, em, address, a, a:visited) {
    color: #fff;
}

html[data-theme="dark"][data-high-contrast="true"] body .lotte-footer a:hover,
html[data-theme="dark"][data-high-contrast="true"] body .lotte-footer a:focus-visible {
    color: #000;
    background: #ffeb3b;
    outline-color: #fff;
}

html body .lotte-footer .lotte-footer__contact-line--phone::before,
html body .lotte-footer .lotte-footer__contact-line--mail::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    background: currentColor;
    opacity: 0.85;
}

html body .lotte-footer .lotte-footer__contact-line--phone::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%3E%3Cpath%20d='M22%2016.92v3a2%202%200%2001-2.18%202%2019.79%2019.79%200%2001-8.63-3.07%2019.5%2019.5%200%2001-6-6%2019.79%2019.79%200%2001-3.07-8.67A2%202%200%20014.11%202h3a2%202%200%20012%201.72c.127.96.361%201.903.7%202.81a2%202%200%2001-.45%202.11L8.09%209.91a16%2016%200%20006%206l1.27-1.27a2%202%200%20012.11-.45c.907.339%201.85.573%202.81.7A2%202%200%200122%2016.92z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%3E%3Cpath%20d='M22%2016.92v3a2%202%200%2001-2.18%202%2019.79%2019.79%200%2001-8.63-3.07%2019.5%2019.5%200%2001-6-6%2019.79%2019.79%200%2001-3.07-8.67A2%202%200%20014.11%202h3a2%202%200%20012%201.72c.127.96.361%201.903.7%202.81a2%202%200%2001-.45%202.11L8.09%209.91a16%2016%200%20006%206l1.27-1.27a2%202%200%20012.11-.45c.907.339%201.85.573%202.81.7A2%202%200%200122%2016.92z'/%3E%3C/svg%3E") center / contain no-repeat;
}

html body .lotte-footer .lotte-footer__contact-line--mail::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%3E%3Cpath%20d='M4%204h16c1.1%200%202%20.9%202%202v12c0%201.1-.9%202-2%202H4c-1.1%200-2-.9-2-2V6c0-1.1.9-2%202-2z'/%3E%3Cpolyline%20points='22,6%2012,13%202,6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%3E%3Cpath%20d='M4%204h16c1.1%200%202%20.9%202%202v12c0%201.1-.9%202-2%202H4c-1.1%200-2-.9-2-2V6c0-1.1.9-2%202-2z'/%3E%3Cpolyline%20points='22,6%2012,13%202,6'/%3E%3C/svg%3E") center / contain no-repeat;
}

html body .lotte-footer svg,
html body .lotte-footer .lotte-footer__social-link,
html body .lotte-footer a[href*="facebook.com"],
html body .lotte-footer a[href*="instagram.com"] {
    color: currentColor;
}

html body .lotte-footer .lotte-footer__social-link,
html body .lotte-footer a[href*="facebook.com"],
html body .lotte-footer a[href*="instagram.com"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 50%;
    color: #fff;
    font-size: 0;
    line-height: 1;
    background: rgba(255, 255, 255, 0.14);
}

html body .lotte-footer .lotte-footer__social-link:visited,
html body .lotte-footer a[href*="facebook.com"]:visited,
html body .lotte-footer a[href*="instagram.com"]:visited {
    color: #fff;
}

html body .lotte-footer .lotte-footer__social-link::before,
html body .lotte-footer a[href*="facebook.com"]::before,
html body .lotte-footer a[href*="instagram.com"]::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background: currentColor;
}

html body .lotte-footer .lotte-footer__social-link--facebook::before,
html body .lotte-footer a[href*="facebook.com"]::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='black'%20d='M24%2012.073c0-6.627-5.373-12-12-12s-12%205.373-12%2012c0%205.99%204.388%2010.954%2010.125%2011.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007%201.792-4.669%204.533-4.669%201.312%200%202.686.235%202.686.235v2.953H15.83c-1.491%200-1.956.925-1.956%201.874v2.25h3.328l-.532%203.47h-2.796v8.385C19.612%2023.027%2024%2018.062%2024%2012.073z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='black'%20d='M24%2012.073c0-6.627-5.373-12-12-12s-12%205.373-12%2012c0%205.99%204.388%2010.954%2010.125%2011.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007%201.792-4.669%204.533-4.669%201.312%200%202.686.235%202.686.235v2.953H15.83c-1.491%200-1.956.925-1.956%201.874v2.25h3.328l-.532%203.47h-2.796v8.385C19.612%2023.027%2024%2018.062%2024%2012.073z'/%3E%3C/svg%3E") center / contain no-repeat;
}

html body .lotte-footer .lotte-footer__social-link--instagram::before,
html body .lotte-footer a[href*="instagram.com"]::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='black'%20d='M12%202.163c3.204%200%203.584.012%204.85.07%203.252.148%204.771%201.691%204.919%204.919.058%201.265.069%201.645.069%204.849%200%203.205-.012%203.584-.069%204.849-.149%203.225-1.664%204.771-4.919%204.919-1.266.058-1.644.07-4.85.07-3.204%200-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849%200-3.204.013-3.583.07-4.849.149-3.227%201.664-4.771%204.919-4.919%201.266-.057%201.645-.069%204.849-.069zM12%200C8.741%200%208.333.014%207.053.072%202.695.272.273%202.69.073%207.052.014%208.333%200%208.741%200%2012c0%203.259.014%203.668.072%204.948.2%204.358%202.618%206.78%206.98%206.98C8.333%2023.986%208.741%2024%2012%2024c3.259%200%203.668-.014%204.948-.072%204.354-.2%206.782-2.618%206.979-6.98.059-1.28.073-1.689.073-4.948%200-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014%2015.259%200%2012%200zm0%205.838a6.162%206.162%200%20100%2012.324%206.162%206.162%200%20000-12.324zM12%2016a4%204%200%20110-8%204%204%200%20010%208zm6.406-11.845a1.44%201.44%200%20100%202.881%201.44%201.44%200%20000-2.881z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='black'%20d='M12%202.163c3.204%200%203.584.012%204.85.07%203.252.148%204.771%201.691%204.919%204.919.058%201.265.069%201.645.069%204.849%200%203.205-.012%203.584-.069%204.849-.149%203.225-1.664%204.771-4.919%204.919-1.266.058-1.644.07-4.85.07-3.204%200-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849%200-3.204.013-3.583.07-4.849.149-3.227%201.664-4.771%204.919-4.919%201.266-.057%201.645-.069%204.849-.069zM12%200C8.741%200%208.333.014%207.053.072%202.695.272.273%202.69.073%207.052.014%208.333%200%208.741%200%2012c0%203.259.014%203.668.072%204.948.2%204.358%202.618%206.78%206.98%206.98C8.333%2023.986%208.741%2024%2012%2024c3.259%200%203.668-.014%204.948-.072%204.354-.2%206.782-2.618%206.979-6.98.059-1.28.073-1.689.073-4.948%200-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014%2015.259%200%2012%200zm0%205.838a6.162%206.162%200%20100%2012.324%206.162%206.162%200%20000-12.324zM12%2016a4%204%200%20110-8%204%204%200%20010%208zm6.406-11.845a1.44%201.44%200%20100%202.881%201.44%201.44%200%20000-2.881z'/%3E%3C/svg%3E") center / contain no-repeat;
}

html body .lotte-footer .lotte-footer__social-link:hover,
html body .lotte-footer a[href*="facebook.com"]:hover,
html body .lotte-footer a[href*="instagram.com"]:hover {
    color: #fff;
    background: var(--lotte-green, #84BD00);
}

/* TYPO3-GRUND: Der Footer wird auf Website-Bausteine als echtes 4-Spalten-
 * Content-Element gepflegt. Im Footer darf dieses normale TYPO3-Rendering keine
 * Hauptcontent-Breiten, Hintergruende oder Section-Abstaende mitbringen. */
html body .lotte-footer__main > .frame,
html body .lotte-footer__main > .min-ce,
html body .lotte-footer__main > .mincore-columns,
html body .lotte-footer__main .mincore-columns {
    box-sizing: border-box;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
}

html body .lotte-footer__main .mincore-columns > :is(
    .mincore-header,
    .frame-header,
    header,
    .ce-headline,
    h1,
    h2,
    h3
):not(.mincore-columns__row) {
    display: none;
}

html body .lotte-footer__main .mincore-columns > .mincore-columns__row {
    box-sizing: border-box;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3rem;
}

html body .lotte-footer__main .mincore-columns__col :is(
    .frame,
    .min-ce,
    section.default,
    .ce-textpic,
    .min-textmedia,
    .min-textmedia__body,
    .min-textmedia__text,
    .ce-bodytext
) {
    box-sizing: border-box;
    max-width: none;
    width: auto;
    margin-inline: 0;
    padding: 0;
    background: transparent;
}

html body .lotte-footer__main .mincore-columns__col :is(
    .min-header__title,
    .ce-headline,
    .ce-header h1,
    .ce-header h2,
    .ce-header h3,
    .ce-header h4,
    h1.min-header__title,
    h2.min-header__title,
    h3.min-header__title,
    h4.min-header__title
) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid var(--lotte-white-10, rgba(255, 255, 255, 0.1));
    color: var(--lotte-green, #84BD00);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.25;
    text-transform: uppercase;
    white-space: nowrap;
}

html body .lotte-footer__main .mincore-columns__col > .min-ce + .min-ce,
html body .lotte-footer__main .mincore-columns__col > .frame + .frame {
    margin-top: var(--min-space-md, 1.5rem);
}

html body .lotte-footer__main :is(
    .frame-space-before-extra-small,
    .frame-space-before-small,
    .frame-space-before-medium,
    .frame-space-before-large,
    .frame-space-before-extra-large,
    .frame-space-after-extra-small,
    .frame-space-after-small,
    .frame-space-after-medium,
    .frame-space-after-large,
    .frame-space-after-extra-large
) {
    block-size: auto;
}

html body .lotte-footer__main .frame-space-before-extra-small { margin-top: var(--min-space-xs, 0.5rem); }
html body .lotte-footer__main .frame-space-before-small { margin-top: var(--min-space-sm, 1rem); }
html body .lotte-footer__main .frame-space-before-medium { margin-top: var(--min-space-md, 1.5rem); }
html body .lotte-footer__main .frame-space-before-large { margin-top: var(--min-space-lg, 2.5rem); }
html body .lotte-footer__main .frame-space-before-extra-large { margin-top: var(--min-space-xl, 4rem); }
html body .lotte-footer__main .frame-space-after-extra-small { margin-bottom: var(--min-space-xs, 0.5rem); }
html body .lotte-footer__main .frame-space-after-small { margin-bottom: var(--min-space-sm, 1rem); }
html body .lotte-footer__main .frame-space-after-medium { margin-bottom: var(--min-space-md, 1.5rem); }
html body .lotte-footer__main .frame-space-after-large { margin-bottom: var(--min-space-lg, 2.5rem); }
html body .lotte-footer__main .frame-space-after-extra-large { margin-bottom: var(--min-space-xl, 4rem); }

@media (max-width: 63.9375em) {
    html body .lotte-footer__main .mincore-columns > .mincore-columns__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 39.9375em) {
    html body .lotte-footer__main .mincore-columns > .mincore-columns__row {
        grid-template-columns: 1fr;
    }
}

/* TYPO3-GRUND: Header-Buttons liegen im TYPO3-Merge spaet neben generischen
 * Button-Regeln. Die sichtbaren Glyphen muessen ihre echte Kontrastfarbe als
 * computed color tragen, damit Audits nicht den dunklen Button-Default messen. */
/* B698 (2026-06-08): Such-Steuerung sichtbar nachschärfen. Der vorherige
 * hellgraue 2px-Rahmen (#D4DDD0 auf weissem Header) las kaum als Button.
 * Jetzt Rahmen in Markenfarbe + getönte Fläche im Ruhezustand und gefüllter
 * Hover/Focus — bleibt eigenständig zum gefüllten Hamburger (keine einfarbige
 * Pauschalpalette). Glyphe erbt weiter currentColor → flippt auf weiss. */
html body .lotte-header__search-btn {
    background: color-mix(in srgb, var(--lotte-primary, #145675) 8%, #fff);
    color: var(--lotte-primary, #145675);
    border-color: var(--lotte-primary, #145675);
}

html body .lotte-header .lotte-header__search-btn:is(:hover, :focus, :focus-visible) {
    background: var(--lotte-primary, #145675) !important;
    background-color: var(--lotte-primary, #145675) !important;
    color: #fff !important;
    border-color: var(--lotte-primary, #145675) !important;
}

html body .lotte-header__search-btn svg {
    color: inherit;
    stroke: currentColor;
}

html body .lotte-hamburger {
    color: #fff;
}

html body .lotte-hamburger__bar {
    background: currentColor;
}

html body .lotte-hamburger__label {
    color: currentColor;
}

/* TYPO3-GRUND: CTA/Button-Icons muessen die Button-Schriftfarbe erben. Nach
 * Asset-Merge konnte der Pfeil in der Service-CTA als Fremdfarbe erscheinen. */
html body .ce-cta__button--primary,
html body .min-cta__button.ce-cta__button--primary {
    color: #fff;
}

html body .ce-cta__button--primary svg,
html body .min-cta__button.ce-cta__button--primary svg {
    color: inherit;
    stroke: currentColor;
}

/* TYPO3-GRUND: Normale CTA-Sections brauchen einen eigenen Rhythmus. Globale
 * H2-/Text-Abstaende duerfen sich hier nicht mit dem CTA-Innenabstand addieren,
 * sonst entstehen 140px+ Luft zwischen Text und Verlaufsflaeche. */
html body main#main-content > .min-cta.lotte-section:not(.lotte-section--service-bar) {
    min-height: 0;
    padding-block: clamp(2.5rem, 4vw, 3.5rem);
}

html body main#main-content > .min-cta.lotte-section:not(.lotte-section--service-bar) > .min-cta__content > :is(.min-cta__headline, .ce-cta__title) {
    margin-block: 0 var(--min-space-md, 1rem);
}

html body main#main-content > .min-cta.lotte-section:not(.lotte-section--service-bar) > .min-cta__content > :is(.min-cta__text, .ce-cta__text) {
    margin-block: 0 var(--min-space-lg, 2rem);
}

/* TYPO3-GRUND: Prototyp-Startseite nutzt die Service-Bar im normalen
 * Contentfluss vor Veranstaltungen und Themen. min_core CTA-Defaults setzen
 * dafuer zu viel Innenabstand und einen kartenartigen Button. */
html body .lotte-section--service-bar.min-cta {
    min-height: 0;
    padding-block: 40px;
}

html body .lotte-section--service-bar .min-cta__overlay {
    display: none;
}

html body .lotte-section--service-bar .min-cta__content,
html body .lotte-section--service-bar .ce-cta__content {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    max-width: var(--lotte-content-max-width, 1300px);
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--lotte-content-padding-inline, clamp(1rem, 4vw, 2.5rem));
    padding-block: 0;
}

html body .lotte-section--service-bar .min-cta__text,
html body .lotte-section--service-bar .ce-cta__text {
    flex: 1 1 280px;
    margin: 0;
}

html body .lotte-section--service-bar .min-cta__text p,
html body .lotte-section--service-bar .ce-cta__text p {
    margin: 0;
}

html body .lotte-section--service-bar .min-cta__button,
html body .lotte-section--service-bar .ce-cta__button {
    flex-shrink: 0;
    width: auto;
    min-width: 12rem;
    min-height: 0;
    justify-content: center;
    padding: 12px 24px;
    gap: 8px;
    border-color: #fff;
    border-radius: 6px;
    background: #fff;
    color: #0d3d55 !important;
    font-size: 0.9375rem;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

html body .lotte-section--service-bar .min-cta__button:hover,
html body .lotte-section--service-bar .ce-cta__button:hover {
    background: var(--lotte-surface, #F5F8FA);
    color: #0d3d55 !important;
}

html body .lotte-section--service-bar .min-cta__button :is(span, svg),
html body .lotte-section--service-bar .ce-cta__button :is(span, svg) {
    color: inherit;
    stroke: currentColor;
}

/* TYPO3-GRUND: Startseiten-Event-Grid und Themenkarten muessen der aktuellen
 * Prototyp-Geometrie folgen: 1220px Inhalt, 24px Gap, Desktop 2 bzw. 3 Spalten. */
html body [aria-labelledby="lotte-events-title"] > .container {
    box-sizing: border-box;
    max-width: var(--lotte-content-max-width, 1300px);
    margin-inline: auto;
    padding-inline: var(--lotte-content-padding-inline, clamp(1rem, 4vw, 2.5rem));
}

html body .lotte-event-grid {
    max-width: var(--lotte-content-inner-max-width, 1220px);
    width: 100%;
    margin-inline: auto;
    gap: 1.5rem;
}

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

html body .min-cards--topic-cards .lotte-topics {
    gap: 1.5rem;
}

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

html body .min-cards--topic-cards .lotte-topic-card {
    aspect-ratio: 4 / 3;
    height: auto;
    min-height: 0;
    font-size: 1.25rem;
    line-height: 1.65;
}

html body .min-cards--topic-cards .lotte-topic-card__panel {
    width: min(318px, calc(100% - 2rem));
    padding: 16px 24px 16px 20px;
}

html body .min-cards--topic-cards .lotte-topic-card__tag {
    padding: 2px 10px;
    font-size: 0.8125rem;
    line-height: 1.65;
}

html body .min-cards--topic-cards .lotte-topic-card__title {
    font-size: 1.75rem;
    line-height: 1.2;
}

html body .lotte-event-card__month {
    text-transform: uppercase;
}

html body .lotte-event-card {
    font-size: 1.25rem;
    line-height: 1.65;
}

html body .lotte-event-card__title {
    margin-bottom: 6px;
    font-size: 1.0625rem;
    line-height: 1.3;
}

html body .lotte-event-card__meta {
    font-size: 0.9375rem;
    line-height: 1.65;
}

html body .min-cards--rubrik-tiles > .container {
    box-sizing: border-box;
    max-width: var(--lotte-content-max-width, 1300px);
    margin-inline: auto;
    padding-inline: var(--lotte-content-padding-inline, clamp(1rem, 4vw, 2.5rem));
}

html body .min-cards--rubrik-tiles .lotte-rubrik-grid {
    max-width: var(--lotte-content-inner-max-width, 1220px);
    margin-inline: auto;
    gap: 1.5rem;
}

@media (min-width: 900px) {
    html body .min-cards--rubrik-tiles .lotte-rubrik-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* TYPO3-GRUND: Unterseiten-Heros folgen den Prototyp-Varianten:
 * kompakt 270px Mindesthöhe, normal 360px, hohe Landingpage 480px. */
.min-hero.lotte-page-header,
.min-hero.lotte-page-header.min-hero--height-large,
.lotte-page-header.ce-page-header,
.lotte-page-header {
    min-height: 360px;
}

html body .lotte-page-header :is(.lotte-page-header__title, .ce-page-header__title, h1),
html body .min-hero.lotte-page-header :is(.lotte-page-header__title, .ce-page-header__title, h1) {
    font-weight: 800;
}

.lotte-page-header--compact {
    min-height: 270px;
}

.lotte-page-header--tall {
    min-height: 480px;
}

.ce-page-header--image:not(.lotte-page-header):not(.lotte-page-header--compact):not(.lotte-page-header--tall) {
    min-height: 450px;
}

/* TYPO3-GRUND: Skip-Links hidden-by-default + focus-reveal.
 * skip-links.css aus @layer modules setzt .min-skip-links auf
 * position:absolute;inset-block-start:0 — macht Container sichtbar.
 * .min-skip-link (Anchor) fehlt in skip-links.css komplett.
 * Unlayered bridge.css gewinnt gegen @layer modules. */
.min-skip-links {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 0;
    height: 0;
    overflow: visible;
}
/* .min-skip-link  — used by older bridge generation
 * .mincore-skip-link — used by min_core SkipLinks.html Fluid partial
 * Both classes get identical treatment (WCAG 2.4.1 Bypass Blocks).
 * @fix 2026-04-24 (Bug 8 Sub-Commit 3): pattern modernisiert fuer
 * mmenu.js-Wrapper-Kontext (div#mm-page). Vorher: position:static im
 * Focus, Skip-Link blieb im Stacking-Context des transformierten
 * Parents und wurde von Lighthouse als not-focusable gemeldet.
 * Jetzt: clip-path + position:fixed hebt den Link aus jedem Parent-
 * Stacking-Context und garantiert Viewport-Sichtbarkeit beim Focus. */
.min-skip-link,
.mincore-skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(100%);
    white-space: nowrap;
    border: 0;
}
.min-skip-link:focus,
.mincore-skip-link:focus {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 99999;
    width: auto;
    height: auto;
    padding: 0.75rem 1.5rem;
    margin: 0;
    clip: auto;
    clip-path: none;
    white-space: normal;
    background: var(--lotte-primary, #145675);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    outline: 3px solid var(--lotte-primary, #145675);
    outline-offset: 2px;
}

/* The target itself receives focus after a skip link. main normally is not
 * focusable, so the layout provides tabindex="-1" and this concise focus cue. */
main#main-content[tabindex="-1"]:focus {
    outline: 3px solid var(--lotte-primary, #145675);
    outline-offset: -3px;
}

/* ============================================================================
 * R4-KORR Visual-Diff Fix 2026-05-05 (Welle-11 Track A Korrektur)
 * Bug 2: Hero-Hoehe Unterseiten zu hoch (675px statt 450px)
 *
 * TYPO3-GRUND: Echte DOM-Klassen verifiziert via Live-Inspect (FLEX, 5 URLs).
 * Unterseiten-Hero-Wrapper: .min-hero.lotte-page-header
 * min-hero--height-large rendert 675px (Default-Wert aus min_core).
 * Startseite hat .lotte-hero (ohne lotte-page-header) — bleibt unveraendert.
 *
 * Bug 1 (H1-Farbe) ist NICHT-EXISTENT: Live-Wert war bereits rgb(255,255,255).
 * Vorgaenger-Selektoren (.ce-page-header--image etc.) existieren im
 * gerenderten HTML nicht — wirkungslos, daher entfernt.
 * ============================================================================ */

/* Lotte: Standard-Unterseiten-Hero nach aktuellem Prototyp. */
.min-hero.lotte-page-header,
.min-hero.lotte-page-header.min-hero--height-large {
    min-height: 360px;
}

.min-hero.lotte-page-header--compact,
.lotte-page-header--compact.ce-page-header {
    min-height: 270px;
}

.min-hero.lotte-page-header--tall,
.lotte-page-header--tall.ce-page-header {
    min-height: 480px;
}

/* Lotte: primary CTA anchors must stay white even after late global link rules.
 * This also covers repaired raw-prototype sidebar CTAs whose anchors were
 * stripped during import and restored by side-tools.js. */
html body a.ce-btn--primary,
html body a.btn--primary,
html body .ce-btn--primary,
html body .btn--primary {
    color: #fff;
}

html body a.ce-btn--primary:hover,
html body a.btn--primary:hover {
    color: #fff;
}

/* TYPO3/min_core adds a generic hero ::before gradient. Lotte already has the
 * prototype overlay element, so the pseudo layer double-darkens page headers. */
.lotte-page-header::before,
.lotte-page-header.ce-page-header::before {
    content: none;
    display: none;
}

/* Raw-Prototyp-HTML: TYPO3 processing strips the inline intro-label styling
 * from Lotte pages such as /buergermeister. Restore the prototype label shape
 * without changing the stored content. */
.frame-prototype-html .lotte-content__body > div:first-child > div:nth-child(2) > p:first-child,
.lotte-content__body > .lotte-grid--mayor-intro > div:nth-child(2) > p:first-child {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--min-color-primary, var(--lotte-primary, #145675));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem;
}

/* TYPO3-GRUND: Dynamische menu_card_* Rubrik-Kachelmenüs rendern zusätzliche
 * min_core Grid-Klassen. Die Grundgeometrie kommt vom Lotte-Prototyp; die
 * Spaltenanzahl muss aber aus der FlexForm-Klasse des TYPO3-Elements kommen. */
html body .menu-cards__grid.lotte-rubrik-grid,
html body .ce-content-section .lotte-rubrik-grid,
html body .frame-prototype-html .lotte-rubrik-grid {
    max-width: var(--lotte-content-inner-max-width, 1220px);
    margin-inline: auto;
    gap: 1.5rem;
}

/* TYPO3-GRUND: menu_card_* nutzt min_core-Kachelklassen zusammen mit den
 * Lotte-Prototypklassen. Die spaeter geladene min_core-Nav-CSS verkleinert
 * Bildformat, Typografie und Farben massiv. Der Prototyp/Mandant ist hier die
 * SSoT; diese Regel stellt die Lotte-Rubrik-Karten global wieder her. */
html body .menu-cards__grid.lotte-rubrik-grid .lotte-rubrik-tile,
html body .ce-content-section .lotte-rubrik-grid .lotte-rubrik-tile,
html body .frame-prototype-html .lotte-rubrik-grid .lotte-rubrik-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    height: 100%;
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--lotte-text-body, #1A1A1A);
    background: var(--lotte-bg, #FFFFFF);
    border: 1px solid var(--lotte-border, #D8E0D3);
    border-left: 4px solid var(--lotte-primary, #145675);
    border-radius: var(--lotte-radius, 4px);
    box-shadow: none;
    text-decoration: none;
}

html body .menu-cards__grid.lotte-rubrik-grid .lotte-rubrik-tile:hover,
html body .ce-content-section .lotte-rubrik-grid .lotte-rubrik-tile:hover,
html body .frame-prototype-html .lotte-rubrik-grid .lotte-rubrik-tile:hover {
    border-left-color: var(--lotte-green, #84BD00);
    box-shadow: 0 6px 20px var(--lotte-mm-border-dark, rgba(0, 0, 0, 0.16));
    transform: translateY(-2px);
}

html body .menu-cards__grid.lotte-rubrik-grid .lotte-rubrik-tile--photo,
html body .ce-content-section .lotte-rubrik-grid .lotte-rubrik-tile--photo,
html body .frame-prototype-html .lotte-rubrik-grid .lotte-rubrik-tile--photo {
    align-items: stretch;
    overflow: hidden;
    padding: 0;
    text-align: left;
    border-left: none;
    border-bottom: 4px solid var(--lotte-primary, #145675);
}

html body .menu-cards__grid.lotte-rubrik-grid .lotte-rubrik-tile--photo:hover,
html body .ce-content-section .lotte-rubrik-grid .lotte-rubrik-tile--photo:hover,
html body .frame-prototype-html .lotte-rubrik-grid .lotte-rubrik-tile--photo:hover {
    border-left: none;
    border-bottom-color: var(--lotte-green, #84BD00);
}

html body .menu-cards__grid.lotte-rubrik-grid .lotte-rubrik-tile__img,
html body .ce-content-section .lotte-rubrik-grid .lotte-rubrik-tile__img,
html body .frame-prototype-html .lotte-rubrik-grid .lotte-rubrik-tile__img {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

html body .menu-cards__grid.lotte-rubrik-grid .lotte-rubrik-tile__img picture,
html body .ce-content-section .lotte-rubrik-grid .lotte-rubrik-tile__img picture,
html body .frame-prototype-html .lotte-rubrik-grid .lotte-rubrik-tile__img picture {
    display: block;
    width: 100%;
    height: 100%;
}

html body .menu-cards__grid.lotte-rubrik-grid .lotte-rubrik-tile__img img,
html body .ce-content-section .lotte-rubrik-grid .lotte-rubrik-tile__img img,
html body .frame-prototype-html .lotte-rubrik-grid .lotte-rubrik-tile__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html body .menu-cards__grid.lotte-rubrik-grid .lotte-rubrik-tile__title,
html body .lotte-rubrik-grid .lotte-rubrik-tile__title,
html body .ce-content-section .lotte-rubrik-grid .lotte-rubrik-tile__title,
html body .frame-prototype-html .lotte-rubrik-grid .lotte-rubrik-tile__title {
    margin: 0 0 0.5rem;
    padding: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--lotte-text, #000000);
}

html body .menu-cards__grid.lotte-rubrik-grid .lotte-rubrik-tile__desc,
html body .lotte-rubrik-grid .lotte-rubrik-tile__desc,
html body .ce-content-section .lotte-rubrik-grid .lotte-rubrik-tile__desc,
html body .frame-prototype-html .lotte-rubrik-grid .lotte-rubrik-tile__desc {
    margin: 0;
    padding: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--lotte-text-body, #1A1A1A);
    opacity: 0.8;
}

html body .menu-cards__grid.lotte-rubrik-grid .lotte-rubrik-tile--photo .lotte-rubrik-tile__title,
html body .ce-content-section .lotte-rubrik-grid .lotte-rubrik-tile--photo .lotte-rubrik-tile__title,
html body .frame-prototype-html .lotte-rubrik-grid .lotte-rubrik-tile--photo .lotte-rubrik-tile__title {
    padding: 1.25rem 1.25rem 0;
}

html body .menu-cards__grid.lotte-rubrik-grid .lotte-rubrik-tile--photo .lotte-rubrik-tile__desc,
html body .ce-content-section .lotte-rubrik-grid .lotte-rubrik-tile--photo .lotte-rubrik-tile__desc,
html body .frame-prototype-html .lotte-rubrik-grid .lotte-rubrik-tile--photo .lotte-rubrik-tile__desc {
    padding: 0 1.25rem 1.25rem;
}

html body .ce-content-section .lotte-rubrik-grid .lotte-rubrik-tile:not(.lotte-rubrik-tile--photo) .lotte-rubrik-tile__title,
html body .frame-prototype-html .lotte-rubrik-grid .lotte-rubrik-tile:not(.lotte-rubrik-tile--photo) .lotte-rubrik-tile__title {
    margin: 2rem 0 0.75rem;
    font-size: 1.25rem;
    line-height: 1.2;
}

html body .ce-content-section .lotte-rubrik-grid .lotte-rubrik-tile:not(.lotte-rubrik-tile--photo) .lotte-rubrik-tile__desc,
html body .frame-prototype-html .lotte-rubrik-grid .lotte-rubrik-tile:not(.lotte-rubrik-tile--photo) .lotte-rubrik-tile__desc {
    margin-bottom: 1em;
    font-size: 1.25rem;
    line-height: 1.65;
}

/* TYPO3-GRUND: menu_card_dir/menu_card_list rendern echte FluidStyledContent-
 * Kachelmenüs mit .menu-cards/.menu-card__*. Die Lotte-Referenz sind Karten mit
 * Bild, weißem Kartenkörper und primärer Unterkante. Die Spaltenzahl bleibt die
 * vom Redakteur gewählte FlexForm-Einstellung. */
html body .menu-cards {
    box-sizing: border-box;
    width: 100%;
    padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2.5rem);
    background:
        linear-gradient(
            110deg,
            color-mix(in srgb, var(--lotte-green, #84BD00) 14%, #ffffff) 0%,
            color-mix(in srgb, var(--lotte-green, #84BD00) 8%, #ffffff) 48%,
            color-mix(in srgb, var(--lotte-primary, #145675) 10%, #ffffff) 100%
        );
}

html body .menu-cards--rubrik-tiles {
    padding: 0;
    background: transparent;
}

html body .menu-cards__header {
    max-width: var(--lotte-content-inner-max-width, 1220px);
    margin: 0 auto 1.75rem;
}

html body .menu-cards__heading {
    margin: 0;
    font-size: clamp(1.75rem, 2.3vw, 2.5rem);
    line-height: 1.15;
    color: var(--lotte-text, #000000);
}

html body .menu-cards__subheading {
    max-width: 56rem;
    margin: 0.75rem 0 0;
    color: var(--lotte-text-body, #1A1A1A);
}

html body .menu-cards__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.5rem !important;
    max-width: var(--lotte-content-inner-max-width, 1220px);
    margin-inline: auto;
}

html body .menu-cards__grid.grid-cols-1 {
    grid-template-columns: minmax(0, 1fr) !important;
}

@media (min-width: 640px) {
    html body .menu-cards__grid.sm-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 768px) {
    html body .menu-cards__grid.md-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1024px) {
    html body .menu-cards__grid.lg-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    html body .menu-cards__grid.lg-grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

html body .menu-card {
    display: flex;
    min-width: 0;
}

html body .menu-card__default {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    color: var(--lotte-text-body, #1A1A1A);
    background: var(--lotte-bg, #FFFFFF);
    border: 1px solid color-mix(in srgb, var(--lotte-primary, #145675) 14%, #ffffff);
    border-bottom: 4px solid var(--lotte-primary, #145675);
    border-radius: var(--lotte-radius, 4px);
    box-shadow: 0 1px 2px rgba(20, 86, 117, 0.08);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

html body .menu-card__default:hover,
html body .menu-card__default:focus-within {
    border-bottom-color: var(--lotte-green, #84BD00);
    box-shadow: 0 10px 24px rgba(20, 86, 117, 0.16);
    transform: translateY(-2px);
}

html body .menu-card__default > a {
    display: block;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

html body .menu-card__image {
    display: block;
    width: 100% !important;
    height: clamp(10.5rem, 14vw, 12rem) !important;
    aspect-ratio: auto !important;
    object-fit: cover;
    transition: transform 220ms ease;
}

html body .menu-card__default:hover .menu-card__image,
html body .menu-card__default:focus-within .menu-card__image {
    transform: scale(1.03);
}

html body .menu-card__content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.25rem 1.25rem 1.5rem !important;
}

html body .menu-card__title {
    margin: 0 0 0.625rem !important;
    padding: 0;
    font-size: clamp(1.125rem, 1.35vw, 1.375rem) !important;
    font-weight: 700;
    line-height: 1.2;
    color: #000000;
}

html body .menu-card__title a {
    color: inherit;
    text-decoration: none;
}

html body .menu-card__title a:hover,
html body .menu-card__title a:focus-visible {
    color: var(--lotte-primary, #145675);
    text-decoration: underline;
    text-decoration-color: var(--lotte-green, #84BD00);
    text-underline-offset: 0.18em;
}

html body .menu-card__abstract {
    max-width: none;
    margin: 0 !important;
    padding: 0;
    font-size: 1rem !important;
    line-height: 1.55;
    color: color-mix(in srgb, var(--lotte-text-body, #1A1A1A) 76%, #ffffff 24%);
}

@media (max-width: 560px) {
    html body .menu-cards {
        padding-block: 2rem;
    }

    html body .menu-cards__grid {
        grid-template-columns: 1fr !important;
    }
}

/* TYPO3-GRUND: Der EXT:news Listenpfad rendert die News-Uebersicht mit
 * Prototype-HTML, erbt aber nach dem TYPO3 Asset-Merge breitere Container und
 * die Homepage-Featured-Aspect-Ratio. Dadurch driftet /aktuelles um 20px und
 * das 21:9-Aufmacherbild wird auf 4:3 gestreckt. */
html body .lotte-news-filter-bar > .container,
html body .lotte-news-index > .container {
    max-width: var(--lotte-content-max-width, 1300px);
    margin-inline: auto;
}

html body .lotte-news-index .lotte-news-featured {
    aspect-ratio: auto;
}

html body .lotte-news-index .lotte-news-featured__image {
    height: auto;
    aspect-ratio: 21 / 9;
}

html body .lotte-news-index .lotte-news-featured__image img {
    height: 100%;
}

html body .lotte-news-index .lotte-sidebar-nav a {
    color: #1A1A1A;
}

/* TYPO3-GRUND: Die strukturierte Schnellzugriff-CE laeuft ueber mincore_cards.
 * Nach dem Asset-Merge gewinnen generische Link-/Card-Defaults gegen die
 * Prototyp-Regeln: breiteres Grid, graue Karten, 1px-Rahmen und blaue Links.
 * Die Startseite braucht hier die Prototypgeometrie 1300px/1220px und die
 * quadratischen Servicekarten mit linker Markenlinie. */
html body .lotte-section--schnellzugriffe > .container {
    max-width: var(--lotte-content-max-width, 1300px);
    margin-inline: auto;
}

html body .lotte-section--schnellzugriffe .lotte-services {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
}

html body .lotte-section--schnellzugriffe .lotte-services > li {
    display: block;
    min-width: 0;
}

html body .lotte-section--schnellzugriffe .lotte-service {
    aspect-ratio: 1;
    width: 100%;
    box-sizing: border-box;
    height: auto;
    min-height: 0;
    min-width: 0;
    padding: 1rem 0.75rem;
    gap: 0.625rem;
    background: #fff;
    border-left: 4px solid var(--lotte-primary, #145675);
    border-top: 1px solid var(--lotte-border, #CCCCCC);
    border-right: 1px solid var(--lotte-border, #CCCCCC);
    border-bottom: 1px solid var(--lotte-border, #CCCCCC);
    border-radius: var(--lotte-radius, 4px);
    color: #1A1A1A;
    text-decoration: none;
}

html body .lotte-section--schnellzugriffe .lotte-service__icon {
    width: 28px;
    height: 28px;
    color: var(--lotte-primary, #145675);
}

html body .lotte-section--schnellzugriffe .lotte-service__icon svg {
    width: 28px;
    height: 28px;
}

html body .lotte-section--schnellzugriffe .lotte-service__label {
    color: #1A1A1A;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.25;
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-align: center;
}

/* TYPO3-GRUND: Auf Mobile wurde das vom Prototyp kommende 6er-Desktop-Grid
 * beibehalten; die langen deutschen Schnellzugriffslabels kollidierten dadurch
 * im Viewport. Mobile nutzt echte Kartenzeilen statt gequetschter Icon-Leiste. */
@media (max-width: 767px) {
    html body .lotte-section--schnellzugriffe .lotte-services {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    html body .lotte-section--schnellzugriffe .lotte-service {
        aspect-ratio: auto;
        min-height: 6.25rem;
        padding: 0.875rem 0.75rem;
    }

    html body .lotte-section--schnellzugriffe .lotte-service__label {
        font-size: 0.875rem;
        line-height: 1.2;
    }
}

@media (min-width: 768px) and (max-width: 1099px) {
    html body .lotte-section--schnellzugriffe .lotte-services {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* TYPO3-GRUND: Die Startseiten-News werden in TYPO3 als min_core Tabs neben
 * der einleitenden Section gerendert. custom.css wird spaeter gemerged und
 * setzt .lotte-news-grid wieder auf ein 3-Spalten-Grid. Die Prototyp-Startseite
 * nutzt an dieser Stelle aber den 1300px-Container mit 40px Innenabstand und
 * ein flexibles Aufmacher-/Kompaktkarten-Layout. */
html body .v6-section.lotte-section--gradient-soft + .mincore-tabs--lotte-newsbox > .mincore-tabs__panel {
    box-sizing: border-box;
    max-width: var(--lotte-content-max-width, 1300px);
    max-inline-size: var(--lotte-content-max-width, 1300px);
    margin-inline: auto;
    padding-inline: 40px;
}

html body .v6-section.lotte-section--gradient-soft:has(+ .mincore-tabs--lotte-newsbox) > .container {
    box-sizing: border-box;
    max-width: var(--lotte-content-max-width, 1300px);
    margin-inline: auto;
    padding-inline: 40px;
}

html body .v6-section.lotte-section--gradient-soft:has(+ .mincore-tabs--lotte-newsbox) .v6-section__title {
    margin-bottom: 0;
}

html body .v6-section.lotte-section--gradient-soft + .mincore-tabs--lotte-newsbox > .mincore-tabs__tablist {
    box-sizing: border-box;
    max-width: var(--lotte-content-inner-max-width, 1220px);
    max-inline-size: var(--lotte-content-inner-max-width, 1220px);
    margin-inline: auto;
    padding-inline: 0;
}

html body .mincore-tabs--lotte-newsbox .mincore-tabs__tab {
    line-height: 1.65;
}

html body .v6-section.lotte-section.lotte-section--gradient-soft + .mincore-tabs--lotte-newsbox > .mincore-tabs__panel[data-tab-index]:not([hidden]) {
    max-width: var(--lotte-content-max-width, 1300px);
    max-inline-size: var(--lotte-content-max-width, 1300px);
}

html body .mincore-tabs--lotte-newsbox .lotte-news-grid {
    display: flex;
    gap: 1.5rem;
    height: 520px;
}

html body .mincore-tabs--lotte-newsbox .lotte-news-grid > .lotte-news-featured {
    flex: 1.3 1 0;
    height: 100%;
}

html body .mincore-tabs--lotte-newsbox .lotte-news-grid > :last-child,
html body .mincore-tabs--lotte-newsbox .lotte-news-compact-list {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

html body .mincore-tabs--lotte-newsbox .lotte-news-compact-list > li {
    display: contents;
    margin: 0;
}

html body .mincore-tabs--lotte-newsbox .lotte-news-grid > :last-child .lotte-news-compact {
    flex: 1 1 0;
    display: grid;
    grid-template-columns: 7rem 1fr;
    height: auto;
    border-left: 4px solid var(--lotte-green, #84BD00);
    border-bottom: none;
    align-content: center;
}

html body .mincore-easytext-inline {
    display: contents;
}

html body .mincore-easytext-inline > [hidden] {
    display: none !important;
}

html body .lotte-styleguide-demo {
    display: grid;
    gap: 1rem;
}

html body .lotte-styleguide-demo--typography h1,
html body .lotte-styleguide-demo--typography h2,
html body .lotte-styleguide-demo--typography h3 {
    margin: 0;
}

html body .lotte-styleguide-note {
    max-width: 65ch;
    color: #4a4a4a;
}

html body .lotte-styleguide-alignment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

html body .lotte-styleguide-sample,
html body .lotte-styleguide-width {
    border: 1px solid rgba(20, 86, 117, 0.18);
    border-bottom: 4px solid var(--lotte-primary, #145675);
    background: #fff;
    padding: 1.25rem;
    min-height: 8rem;
}

html body .lotte-styleguide-sample h3,
html body .lotte-styleguide-width h3 {
    margin-top: 0;
}

html body .lotte-styleguide-align--center {
    text-align: center;
}

html body .lotte-styleguide-align--right {
    text-align: right;
}

html body .lotte-styleguide-width--standard {
    max-width: 42rem;
    margin-inline: auto;
}

html body .lotte-styleguide-width--wide {
    max-width: 72rem;
    margin-inline: auto;
}

html body .lotte-styleguide-width--full {
    max-width: none;
    background: linear-gradient(135deg, rgba(132, 189, 0, 0.16), rgba(20, 86, 117, 0.14));
}

@media (max-width: 767px) {
    html body .lotte-styleguide-alignment-grid {
        grid-template-columns: 1fr;
    }

    html body .v6-section.lotte-section--gradient-soft + .mincore-tabs--lotte-newsbox > .mincore-tabs__panel {
        padding-inline: var(--min-container-padding, 1.5rem);
    }

    html body .v6-section.lotte-section--gradient-soft:has(+ .mincore-tabs--lotte-newsbox) > .container,
    html body .v6-section.lotte-section--gradient-soft + .mincore-tabs--lotte-newsbox > .mincore-tabs__tablist {
        padding-inline: var(--min-container-padding, 1.5rem);
    }

    html body .mincore-tabs--lotte-newsbox .lotte-news-grid {
        display: grid;
        height: auto;
    }
}

/* TYPO3-GRUND 2026-06-25: Standard-Textmedia folgt wieder der
 * fluid_styled_content-Struktur. Breite und Innenabstand kommen aus dem
 * zentralen Lotte-Layout-Contract. */
html body .min-ce--textmedia > .ce-textpic {
    --lotte-textmedia-readable-width: var(--lotte-content-max-width, 1300px);
    box-sizing: border-box;
    display: block;
    max-width: var(--lotte-textmedia-readable-width);
    width: 100%;
    margin-inline: auto;
    padding-block: var(--min-space-lg, 2rem);
    padding-inline: var(--lotte-content-padding-inline, clamp(1rem, 4vw, 2.5rem));
}

html body .min-ce--textmedia > .ce-textpic:is(
    .lotte-section,
    .lotte-section--white,
    .lotte-section--surface,
    .lotte-section--gradient-soft,
    .lotte-section--gradient-strong,
    .lotte-width--full
) {
    max-width: none;
    margin-inline: 0;
    padding-block: var(--lotte-space-section, 4rem);
    padding-inline: max(var(--lotte-content-padding-inline, clamp(1rem, 4vw, 2.5rem)), calc((100vw - var(--lotte-content-max-width, 1300px)) / 2 + var(--lotte-content-padding-inline, clamp(1rem, 4vw, 2.5rem))));
}

/* TYPO3-GRUND: Verlaufs-Textmedia bleibt als Full-Bleed-Flaeche erhalten, darf
 * aber keinen eigenen XL-Section-Abstand erzwingen. Der sichtbare Inhalt folgt
 * dem normalen Textmedia-Rhythmus; zusaetzliche Abstaende kommen weiterhin ueber
 * die TYPO3-Felder "Abstand davor/danach". */
html body .min-ce--textmedia > .ce-textpic:is(
    .lotte-section--gradient-soft,
    .lotte-section--gradient-strong
) {
    padding-block: var(--lotte-content-frame-padding-block, var(--min-space-lg, 2rem));
}

html body .mincore-columns__col .min-ce--textmedia > .ce-textpic {
    max-width: none;
    margin: 0;
    padding: 0;
}

html body .ce-textpic.ce-left,
html body .ce-textpic.ce-right,
html body .ce-textpic.ce-center,
html body .ce-textpic.ce-above,
html body .ce-textpic.ce-below,
html body .ce-textpic.ce-intext,
html body .ce-textpic.ce-nowrap {
    display: block;
    grid-template-columns: none;
    gap: 0;
    align-items: initial;
}

html body .ce-left > .ce-gallery,
html body .ce-right > .ce-gallery {
    max-width: 100%;
}

html body .ce-textpic > .ce-gallery {
    padding: 0;
    max-width: 100%;
}

html body .ce-left > .ce-gallery {
    float: left;
}

html body .ce-right > .ce-gallery {
    float: right;
}

html body .ce-center > .ce-gallery {
    float: none;
}

html body .ce-nowrap > .ce-gallery {
    width: auto;
}

html body .ce-center.ce-nowrap > .ce-gallery {
    float: none;
    margin-inline: auto;
}

html body .ce-textpic.ce-nowrap.ce-intext:is(.ce-left, .ce-right) {
    display: grid;
    column-gap: clamp(2rem, 3vw, 2.5rem);
    align-items: start;
}

html body .ce-textpic.ce-nowrap.ce-intext.ce-left {
    grid-template-columns: auto minmax(0, 1fr);
}

html body .ce-textpic.ce-nowrap.ce-intext.ce-right {
    grid-template-columns: minmax(0, 1fr) auto;
}

html body .ce-textpic.ce-nowrap.ce-intext:is(.ce-left, .ce-right) > .ce-gallery {
    float: none;
    grid-row: 1;
    width: auto;
    margin: 0;
}

html body .ce-textpic.ce-nowrap.ce-intext:is(.ce-left, .ce-right) > .ce-bodytext {
    grid-row: 1;
    min-width: 0;
    clear: none;
}

html body .ce-textpic.ce-nowrap.ce-intext.ce-right > .ce-gallery {
    grid-column: 2;
}

html body .ce-textpic.ce-nowrap.ce-intext.ce-right > .ce-bodytext {
    grid-column: 1;
}

html body .ce-above > .ce-bodytext {
    clear: both;
}

html body .ce-gallery :is(.ce-row, .min-gallery__row) {
    display: block;
    flex-wrap: initial;
    gap: 0;
}

html body .ce-gallery :is(.ce-column, .min-gallery__column) {
    max-width: 100%;
}

html body .ce-gallery :is(.min-media__link, .min-media__lightbox) {
    display: block;
    max-width: 100%;
}

html body .ce-gallery img.min-media__img {
    width: auto;
    max-width: 100%;
    height: auto;
    border-radius: var(--lotte-radius, 4px);
}

html body .ce-textpic .min-header {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0 0 var(--min-space-md, 1rem);
}

html body .ce-textpic .min-header__subtitle {
    order: -1;
    margin: 0;
    color: var(--lotte-primary, #145675);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.35;
    text-transform: uppercase;
}

html body .ce-textpic .min-header__title {
    margin: 0;
}

/* Lotte-Frame: "Infobox / Hervorhebung" bleibt ein normales TYPO3-Textmedia.
 * Es funktioniert top-level und in mincore_columns, ohne proprietaeres Markup. */
html body .min-ce--textmedia > .ce-textpic.well,
html body .mincore-columns__col .min-ce--textmedia > .ce-textpic.well,
html body .frame-well {
    box-sizing: border-box;
    background: color-mix(in srgb, var(--lotte-green, #84BD00) 7%, #ffffff);
    border-left: 4px solid var(--lotte-primary, #145675);
    border-radius: var(--lotte-radius, 4px);
    padding: clamp(1.25rem, 2.2vw, 1.75rem);
}

html body .min-ce--textmedia > .ce-textpic.well {
    max-width: var(--lotte-well-max-width, 1260px);
    width: calc(100% - clamp(2rem, 8vw, 5rem));
    padding-block: clamp(1.25rem, 2.2vw, 1.75rem);
}

html body main#main-content > .min-ce.min-ce--textmedia.well {
    box-sizing: border-box;
    max-width: var(--lotte-content-max-width, 1300px);
    width: 100%;
    margin-inline: auto;
    padding-block: 0;
    padding-inline: var(--lotte-content-padding-inline, clamp(1rem, 4vw, 2.5rem));
}

html body main#main-content > .min-ce.min-ce--textmedia.well.lotte-infobox--flush-y {
    padding-block: 0;
}

html body main#main-content > .min-ce.min-ce--textmedia.well:is(
    .lotte-section,
    .lotte-section--white,
    .lotte-section--surface,
    .lotte-section--gradient-soft,
    .lotte-section--gradient-strong
) {
    max-width: none;
    margin-inline: 0;
    padding-inline: max(var(--lotte-content-padding-inline, clamp(1rem, 4vw, 2.5rem)), calc((100vw - var(--lotte-content-max-width, 1300px)) / 2 + var(--lotte-content-padding-inline, clamp(1rem, 4vw, 2.5rem))));
}

html body main#main-content > .min-ce.min-ce--textmedia.well > .ce-textpic.well {
    max-width: none;
    width: 100%;
    margin: 0;
    padding-block: clamp(1.25rem, 2.2vw, 1.75rem);
}

html body .mincore-columns__col .min-ce--textmedia > .ce-textpic.well {
    width: 100%;
    max-width: none;
    margin: 0;
}

html body .ce-textpic.well :is(.ce-bodytext, .min-textmedia__text, p, ul, ol) {
    max-width: none;
}

html body .ce-textpic.well :is(h2, h3, .min-header__title) {
    margin-block-start: 0;
    color: var(--lotte-primary, #145675);
    font-size: clamp(1.1rem, 1.2vw, 1.3rem);
}

@media (max-width: 48em) {
    html body .ce-textpic.ce-nowrap.ce-intext:is(.ce-left, .ce-right) {
        display: block;
    }

    html body .ce-textpic.ce-nowrap.ce-intext:is(.ce-left, .ce-right) > .ce-gallery {
        float: none;
        margin-block-end: var(--min-space-md, 1rem);
    }
}

/* TYPO3-GRUND 2026-06-25: Die Appearance-Felder "Abstand davor/danach" werden
 * im minCore-Layout als eigene leere Divs gerendert. Mit block-size statt
 * Margin ist die Wirkung sichtbar und kollabiert nicht zwischen Elementen. */
html body .frame-space-before-extra-small,
html body .frame-space-after-extra-small,
html body .frame-space-before-small,
html body .frame-space-after-small,
html body .frame-space-before-medium,
html body .frame-space-after-medium,
html body .frame-space-before-large,
html body .frame-space-after-large,
html body .frame-space-before-extra-large,
html body .frame-space-after-extra-large {
    display: block;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}

html body .frame-space-before-extra-small,
html body .frame-space-after-extra-small {
    block-size: 0.75rem;
}

html body .frame-space-before-small,
html body .frame-space-after-small {
    block-size: 1.25rem;
}

html body .frame-space-before-medium,
html body .frame-space-after-medium {
    block-size: 2rem;
}

html body .frame-space-before-large,
html body .frame-space-after-large {
    block-size: 3rem;
}

html body .frame-space-before-extra-large,
html body .frame-space-after-extra-large {
    block-size: 4.5rem;
}

/* TYPO3-GRUND 2026-06-25: Statistik-Kacheln duerfen nicht als 6er-Zeile
 * zusammengedrueckt werden. Drei Spalten auf Desktop bleiben lesbar und folgen
 * dem Lotte-Raster. */
html body .min-stats:is(
    .lotte-section,
    .lotte-section--white,
    .lotte-section--surface,
    .lotte-section--gradient-soft,
    .lotte-section--gradient-strong
) :is(.min-stats__grid, .stats-grid, .stat-grid) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.4vw, 2.5rem);
    align-items: stretch;
}

html body .min-stats:is(
    .lotte-section,
    .lotte-section--white,
    .lotte-section--surface,
    .lotte-section--gradient-soft,
    .lotte-section--gradient-strong
) :is(.min-stats__item, .stat-item) {
    min-width: 0;
    width: 100%;
}

html body .min-stats:is(
    .lotte-section,
    .lotte-section--white,
    .lotte-section--surface,
    .lotte-section--gradient-soft,
    .lotte-section--gradient-strong
) :is(.min-stats__value, .stat-value) {
    font-size: clamp(1.55rem, 2.6vw, 2.35rem);
    overflow-wrap: anywhere;
    hyphens: auto;
}

@media (max-width: 56em) {
    html body .min-stats:is(
        .lotte-section,
        .lotte-section--white,
        .lotte-section--surface,
        .lotte-section--gradient-soft,
        .lotte-section--gradient-strong
    ) :is(.min-stats__grid, .stats-grid, .stat-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 36em) {
    html body .min-stats:is(
        .lotte-section,
        .lotte-section--white,
        .lotte-section--surface,
        .lotte-section--gradient-soft,
        .lotte-section--gradient-strong
    ) :is(.min-stats__grid, .stats-grid, .stat-grid) {
        grid-template-columns: 1fr;
    }
}

/* Lotte Startseite: Das Featured-News-Panel liegt als dunkle Flaeche ueber dem
 * Bild. Allgemeine Link- und Headline-Farben duerfen dort nicht dunkel/blau
 * greifen, sonst entsteht "dunkel auf dunkel". */
html body .lotte-news-featured__panel {
    color: rgba(255, 255, 255, 0.92);
}

html body .lotte-news-featured__panel :is(
    .lotte-news-featured__date,
    .lotte-news-featured__teaser,
    .lotte-news-featured__text,
    p,
    time
) {
    color: rgba(255, 255, 255, 0.92);
}

html body .lotte-news-featured__panel :is(
    .lotte-news-featured__title,
    .lotte-news-featured__title a,
    a
) {
    color: #ffffff;
}

html body .lotte-news-featured__panel :is(
    .lotte-news-featured__title a:hover,
    .lotte-news-featured__title a:focus-visible,
    a:hover,
    a:focus-visible
) {
    color: #D9F48A;
}

html body .lotte-news-featured__panel a:focus-visible {
    outline: 3px solid #D9F48A;
    outline-offset: 3px;
}

/* Lotte Footer: Logo und Kontakt sind ein editoriales TYPO3-Textmedia-Element
 * aus Website-Bausteine. Die normale Content-Breitenlogik darf im Footer nicht
 * greifen; das Element muss sich wie die Footer-Spalte verhalten. */
html body .lotte-footer__brand :is(
    .frame,
    .ce-textpic,
    .ce-image,
    .ce-gallery,
    .ce-row,
    .ce-column,
    .ce-bodytext,
    .textpic,
    .textpic-item,
    .textpic-gallery,
    .textpic-text,
    .min-ce,
    .min-textmedia,
    .min-textmedia__media,
    .min-textmedia__body,
    .min-textmedia__text
) {
    inline-size: auto;
    max-inline-size: none;
    margin: 0;
    padding: 0;
}

html body .lotte-footer__brand :is(.ce-gallery, .textpic-gallery, .min-textmedia__media) {
    margin-block-end: 1rem;
}

html body .lotte-footer__brand :is(figure, picture, a) {
    display: inline-block;
    margin: 0;
    padding: 0;
}

html body .lotte-footer__brand img {
    display: block;
    inline-size: auto;
    max-inline-size: 180px;
    block-size: auto;
}

html body .lotte-footer__brand .ce-bodytext {
    color: var(--lotte-white-85);
    font-size: 0.875rem;
    line-height: 1.6;
}

html body .lotte-footer__brand .ce-bodytext p {
    margin: 0;
}

html body .lotte-footer__brand .ce-bodytext a {
    color: inherit;
    text-decoration-color: currentcolor;
}

html body .lotte-footer__brand :is(header, .ce-header, .min-header, h1, h2, h3, h4, h5, h6) {
    display: none;
}

/* TYPO3-GRUND 2026-07-02: ContentBlocks MIN/SpacingAdvanced ist auf Lotte
 * aktiv und kann Klassen wie pa5, plr4, mt3 oder mb2 ausgeben. Die Klassen
 * muessen sofort im Mandanten wirken, auch wenn die globale minCore-Utility-CSS
 * in einer Installation nicht geladen ist. Ohne gesetzte pa/mt-Klasse bleibt
 * diese Ebene layoutneutral. */
:root {
    --min-util-space-1: 0.25rem;
    --min-util-space-2: 0.5rem;
    --min-util-space-3: 1rem;
    --min-util-space-4: 1.5rem;
    --min-util-space-5: 3rem;
    --min-util-space-6: 1.875rem;
    --min-util-space-7: 0.9375rem;
}

:where(.pa1, .pt1, .pr1, .pb1, .pl1, .plr1, .ptb1) { --min-padding-value: var(--min-util-space-1); }
:where(.pa2, .pt2, .pr2, .pb2, .pl2, .plr2, .ptb2) { --min-padding-value: var(--min-util-space-2); }
:where(.pa3, .pt3, .pr3, .pb3, .pl3, .plr3, .ptb3) { --min-padding-value: var(--min-util-space-3); }
:where(.pa4, .pt4, .pr4, .pb4, .pl4, .plr4, .ptb4) { --min-padding-value: var(--min-util-space-4); }
:where(.pa5, .pt5, .pr5, .pb5, .pl5, .plr5, .ptb5) { --min-padding-value: var(--min-util-space-5); }
:where(.pa6, .pt6, .pr6, .pb6, .pl6, .plr6, .ptb6) { --min-padding-value: var(--min-util-space-6); }
:where(.pa7, .pt7, .pr7, .pb7, .pl7, .plr7, .ptb7) { --min-padding-value: var(--min-util-space-7); }
:where(.pa1rem, .pt1rem, .pr1rem, .pb1rem, .pl1rem, .plr1rem, .ptb1rem) { --min-padding-value: 1rem; }
:where(.pa2rem, .pt2rem, .pr2rem, .pb2rem, .pl2rem, .plr2rem, .ptb2rem) { --min-padding-value: 2rem; }
:where(.pa3rem, .pt3rem, .pr3rem, .pb3rem, .pl3rem, .plr3rem, .ptb3rem) { --min-padding-value: 3rem; }
:where(.pa4rem, .pt4rem, .pr4rem, .pb4rem, .pl4rem, .plr4rem, .ptb4rem) { --min-padding-value: 4rem; }
:where(.pa5rem, .pt5rem, .pr5rem, .pb5rem, .pl5rem, .plr5rem, .ptb5rem) { --min-padding-value: 5rem; }
:where(.pa6rem, .pt6rem, .pr6rem, .pb6rem, .pl6rem, .plr6rem, .ptb6rem) { --min-padding-value: 6rem; }
:where(.pa7rem, .pt7rem, .pr7rem, .pb7rem, .pl7rem, .plr7rem, .ptb7rem) { --min-padding-value: 7rem; }
:where(.pa8rem, .pt8rem, .pr8rem, .pb8rem, .pl8rem, .plr8rem, .ptb8rem) { --min-padding-value: 8rem; }
:where(.pa9rem, .pt9rem, .pr9rem, .pb9rem, .pl9rem, .plr9rem, .ptb9rem) { --min-padding-value: 9rem; }
:where(.pa10rem, .pt10rem, .pr10rem, .pb10rem, .pl10rem, .plr10rem, .ptb10rem) { --min-padding-value: 10rem; }

:where(.ma1, .mt1, .mr1, .mb1, .ml1, .mlr1, .mtb1) { --min-margin-value: var(--min-util-space-1); }
:where(.ma2, .mt2, .mr2, .mb2, .ml2, .mlr2, .mtb2) { --min-margin-value: var(--min-util-space-2); }
:where(.ma3, .mt3, .mr3, .mb3, .ml3, .mlr3, .mtb3) { --min-margin-value: var(--min-util-space-3); }
:where(.ma4, .mt4, .mr4, .mb4, .ml4, .mlr4, .mtb4) { --min-margin-value: var(--min-util-space-4); }
:where(.ma5, .mt5, .mr5, .mb5, .ml5, .mlr5, .mtb5) { --min-margin-value: var(--min-util-space-5); }
:where(.ma6, .mt6, .mr6, .mb6, .ml6, .mlr6, .mtb6) { --min-margin-value: var(--min-util-space-6); }
:where(.ma7, .mt7, .mr7, .mb7, .ml7, .mlr7, .mtb7) { --min-margin-value: var(--min-util-space-7); }
:where(.ma1rem, .mt1rem, .mr1rem, .mb1rem, .ml1rem, .mlr1rem, .mtb1rem) { --min-margin-value: 1rem; }
:where(.ma2rem, .mt2rem, .mr2rem, .mb2rem, .ml2rem, .mlr2rem, .mtb2rem) { --min-margin-value: 2rem; }
:where(.ma3rem, .mt3rem, .mr3rem, .mb3rem, .ml3rem, .mlr3rem, .mtb3rem) { --min-margin-value: 3rem; }
:where(.ma4rem, .mt4rem, .mr4rem, .mb4rem, .ml4rem, .mlr4rem, .mtb4rem) { --min-margin-value: 4rem; }
:where(.ma5rem, .mt5rem, .mr5rem, .mb5rem, .ml5rem, .mlr5rem, .mtb5rem) { --min-margin-value: 5rem; }
:where(.ma6rem, .mt6rem, .mr6rem, .mb6rem, .ml6rem, .mlr6rem, .mtb6rem) { --min-margin-value: 6rem; }
:where(.ma7rem, .mt7rem, .mr7rem, .mb7rem, .ml7rem, .mlr7rem, .mtb7rem) { --min-margin-value: 7rem; }
:where(.ma8rem, .mt8rem, .mr8rem, .mb8rem, .ml8rem, .mlr8rem, .mtb8rem) { --min-margin-value: 8rem; }
:where(.ma9rem, .mt9rem, .mr9rem, .mb9rem, .ml9rem, .mlr9rem, .mtb9rem) { --min-margin-value: 9rem; }
:where(.ma10rem, .mt10rem, .mr10rem, .mb10rem, .ml10rem, .mlr10rem, .mtb10rem) { --min-margin-value: 10rem; }

/* Token-genaue Anwendung: keine Prefix-Selektoren, damit Klassen wie page-*,
 * pane-* oder panel-* nie unbeabsichtigt MIN-Padding erben. */
:where(.pa1, .pa2, .pa3, .pa4, .pa5, .pa6, .pa7, .pa1rem, .pa2rem, .pa3rem, .pa4rem, .pa5rem, .pa6rem, .pa7rem, .pa8rem, .pa9rem, .pa10rem) { padding: var(--min-padding-value); }
:where(.pt1, .pt2, .pt3, .pt4, .pt5, .pt6, .pt7, .pt1rem, .pt2rem, .pt3rem, .pt4rem, .pt5rem, .pt6rem, .pt7rem, .pt8rem, .pt9rem, .pt10rem) { padding-block-start: var(--min-padding-value); }
:where(.pr1, .pr2, .pr3, .pr4, .pr5, .pr6, .pr7, .pr1rem, .pr2rem, .pr3rem, .pr4rem, .pr5rem, .pr6rem, .pr7rem, .pr8rem, .pr9rem, .pr10rem) { padding-inline-end: var(--min-padding-value); }
:where(.pb1, .pb2, .pb3, .pb4, .pb5, .pb6, .pb7, .pb1rem, .pb2rem, .pb3rem, .pb4rem, .pb5rem, .pb6rem, .pb7rem, .pb8rem, .pb9rem, .pb10rem) { padding-block-end: var(--min-padding-value); }
:where(.pl1, .pl2, .pl3, .pl4, .pl5, .pl6, .pl7, .pl1rem, .pl2rem, .pl3rem, .pl4rem, .pl5rem, .pl6rem, .pl7rem, .pl8rem, .pl9rem, .pl10rem) { padding-inline-start: var(--min-padding-value); }
:where(.plr1, .plr2, .plr3, .plr4, .plr5, .plr6, .plr7, .plr1rem, .plr2rem, .plr3rem, .plr4rem, .plr5rem, .plr6rem, .plr7rem, .plr8rem, .plr9rem, .plr10rem) { padding-inline: var(--min-padding-value); }
:where(.ptb1, .ptb2, .ptb3, .ptb4, .ptb5, .ptb6, .ptb7, .ptb1rem, .ptb2rem, .ptb3rem, .ptb4rem, .ptb5rem, .ptb6rem, .ptb7rem, .ptb8rem, .ptb9rem, .ptb10rem) { padding-block: var(--min-padding-value); }

:where(.ma1, .ma2, .ma3, .ma4, .ma5, .ma6, .ma7, .ma1rem, .ma2rem, .ma3rem, .ma4rem, .ma5rem, .ma6rem, .ma7rem, .ma8rem, .ma9rem, .ma10rem) { margin: var(--min-margin-value); }
:where(.mt1, .mt2, .mt3, .mt4, .mt5, .mt6, .mt7, .mt1rem, .mt2rem, .mt3rem, .mt4rem, .mt5rem, .mt6rem, .mt7rem, .mt8rem, .mt9rem, .mt10rem) { margin-block-start: var(--min-margin-value); }
:where(.mr1, .mr2, .mr3, .mr4, .mr5, .mr6, .mr7, .mr1rem, .mr2rem, .mr3rem, .mr4rem, .mr5rem, .mr6rem, .mr7rem, .mr8rem, .mr9rem, .mr10rem) { margin-inline-end: var(--min-margin-value); }
:where(.mb1, .mb2, .mb3, .mb4, .mb5, .mb6, .mb7, .mb1rem, .mb2rem, .mb3rem, .mb4rem, .mb5rem, .mb6rem, .mb7rem, .mb8rem, .mb9rem, .mb10rem) { margin-block-end: var(--min-margin-value); }
:where(.ml1, .ml2, .ml3, .ml4, .ml5, .ml6, .ml7, .ml1rem, .ml2rem, .ml3rem, .ml4rem, .ml5rem, .ml6rem, .ml7rem, .ml8rem, .ml9rem, .ml10rem) { margin-inline-start: var(--min-margin-value); }
:where(.mlr1, .mlr2, .mlr3, .mlr4, .mlr5, .mlr6, .mlr7, .mlr1rem, .mlr2rem, .mlr3rem, .mlr4rem, .mlr5rem, .mlr6rem, .mlr7rem, .mlr8rem, .mlr9rem, .mlr10rem) { margin-inline: var(--min-margin-value); }
:where(.mtb1, .mtb2, .mtb3, .mtb4, .mtb5, .mtb6, .mtb7, .mtb1rem, .mtb2rem, .mtb3rem, .mtb4rem, .mtb5rem, .mtb6rem, .mtb7rem, .mtb8rem, .mtb9rem, .mtb10rem) { margin-block: var(--min-margin-value); }


/* TYPO3-GRUND (Audit 2026-08-27, WCAG 2.4.7): central visible focus for every
 * interactive element. Two-tone ring (white halo + brand outline) stays visible
 * on light surfaces, dark heroes and photos alike. :focus-visible keeps mouse
 * clicks clean; component styles with stronger selectors stay untouched. */
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible,
html body summary:focus-visible,
html body [tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 3px solid var(--mandant-primary, #145675);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}

/* TYPO3-GRUND (Audit 2026-08-27, WCAG 1.4.10/1.4.12): event cards clipped up to
 * 70px at 320px width under the full text-spacing probe. Let long titles, dates
 * and location names wrap instead of pushing the card wider than the page. */
.lotte-event-card__body {
    min-width: 0;
}
.lotte-event-card__title,
.lotte-event-card__meta,
.lotte-event-card__meta span {
    overflow-wrap: anywhere;
    hyphens: auto;
}