/* ============================================================================
 * 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. */
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-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;
}

.ce-page-header--image .lotte-breadcrumb {
    display: block;
    padding-block: 0.5rem;
}

.ce-page-header--image .lotte-breadcrumb__link {
    color: #fff;
    text-decoration: underline;
}

.ce-page-header--image .lotte-breadcrumb__link:hover {
    color: #fff;
}

.ce-page-header--image .lotte-breadcrumb__current {
    color: #fff;
    font-weight: 400;
}

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

html body .lotte-page-header .container {
    max-width: 1300px;
}

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

/* TYPO3-GRUND: min_core layout CSS overrides the effective Lotte prototype
 * content width. Match the prototype's WCAG line-length container token while
 * keeping the responsive desktop gutters. */
html body .container {
    max-width: var(--lotte-content-max-width, 67em);
    padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* TYPO3-GRUND: min_core resolves the generic 67em container against Lotte's
 * 20px body font and widens classic section wrappers to 1340px. Prototype
 * pages using <section class="ce-content-section"><div class="container">
 * use 1300px outer containers, yielding the 1220px two-column grid. */
html body .ce-content-section > .container {
    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: 1300px;
    margin-inline: auto;
}

/* TYPO3-GRUND: Lotte-Prototyp-Sections verwenden 1300px Aussencontainer.
 * Die generische .container-Regel oben basiert auf 67em und wird durch den
 * 20px-Prototyp-Body zu 1340px; Rubrik-Landings driften dadurch je Seite um
 * 20px pro Seite. */
html body .lotte-section > .container {
    max-width: 1300px;
    margin-inline: auto;
}

/* 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: 1300px;
    width: 100%;
    margin-inline: auto;
    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-space-section, 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: 1300px;
    width: 100%;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* ============================================================================
 * 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: 1300px;
    width: 100%;
    margin-inline: auto;
    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: 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: 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.default.ce-textmedia--media-top > .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: 1300px;
    width: 100%;
    margin-inline: auto;
    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 {
    box-sizing: border-box;
    max-width: 1300px;
    width: 100%;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
}

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: 1300px;
    width: 100%;
    margin-inline: auto;
    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.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);
}

@media (max-width: 47.9375em) {
    html body section.default.ce-textmedia--media-left,
    html body section.default.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 {
        margin-block-end: clamp(1rem, 5vw, 1.5rem);
    }
}

/* 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: 1300px;
    width: 100%;
    margin-inline: auto;
    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: 1300px;
    margin-inline: auto;
    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: 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 a,
html body .lotte-footer .lotte-footer__link,
html body .lotte-footer .lotte-footer__legal-link,
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);
}

html body .lotte-footer svg,
html body .lotte-footer .lotte-footer__social-link {
    color: currentColor;
}

html body .lotte-footer .lotte-footer__social-link {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
}

html body .lotte-footer .lotte-footer__social-link:hover {
    color: #fff;
    background: var(--lotte-green, #84BD00);
}

/* 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: 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: 1300px;
    width: 100%;
    margin-inline: auto;
    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-height: 0;
    padding: 12px 24px;
    gap: 8px;
    border-color: #fff;
    border-radius: 6px;
    background: #fff;
    color: #0d3d55;
    font-size: 0.9375rem;
    letter-spacing: 0;
    text-transform: none;
}

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;
}

/* 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: 1300px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
}

html body .lotte-event-grid {
    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: 1300px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
}

html body .min-cards--rubrik-tiles .lotte-rubrik-grid {
    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;
}

.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;
}

/* ============================================================================
 * 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: 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: 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: 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: 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: 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: 1300px;
    max-inline-size: 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: 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: 1220px;
    max-inline-size: 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: 1300px;
    max-inline-size: 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;
    }
}