/* ==========================================================================
   MOVITAMED – TYPO3 ERSCHEINUNGSBILD
   Stand: 17.09.2026 – vereinheitlichte Rahmenabstände | passend zum Sitepackage agentur_kresser

   Datei: Resources/Public/MovitaMed/css/typo3-erscheinungsbild.css
   NACH movitamed.css laden, im bestehenden page.includeCSS-Block:
   mm_appearance = EXT:agentur_kresser/Resources/Public/MovitaMed/css/typo3-erscheinungsbild.css

   Grundlage: vorhandene Configuration/page.tsconfig, Default.html und
   ContentBlocks/ContentElements/treatment-slider/templates/frontend.fluid.html.
   Diese CSS gestaltet vorhandene Klassen; sie legt keine Backend-Felder an.

   INHALT
   1. Zentrale Werte / Mobilwerte
   2. Rahmen und Inhaltsbreite
   3. Hintergrundfarben und Textfarben
   4. Hintergrundbilder
   5. Layout-Auswahl 0, 101, 102, 103, 104, 120
   6. Abstand davor / danach
   7. Überschrift, Subheader, Ausrichtung und Farbauswahl
   8. Behandlungsslider / helle Karten
   9. Header und Footer
   10. Inhaltsbereich ohne zusätzliche vertikale Abstände

   WICHTIG
   - Abstand davor/danach steuert bei allen Rahmen den Außenabstand (margin).
   - Ohne Auswahl / Kein Abstand = 0. Auch der Behandlungsslider nutzt dies.
   - Standard, volle Breite und kein Rahmen haben kein vertikales Grund-Padding.
   - Layout 101 hat bewusst Innenabstand (28 px, mobil 20 px).
   - Ohne Abstände (frame-no-spacing) entfernt auch den Layout-101-Innenabstand;
     ausdrücklich gewählte Abstände davor/danach bleiben wirksam.
   - Letzte Absätze/Listen erzeugen keinen Zusatzabstand nach einem Textblock.
   - Im normalen Blocklayout können benachbarte Außenabstände zusammenfallen.
     Für gleichmässige Abstände vorzugsweise nur Abstand danach verwenden.
   - Abstände zwischen Überschrift/Text, Bild/Text und in Karten sind Gestaltung.
   - Backend-Felder brauchen die entsprechenden Klassen im Frontend.
   ========================================================================== */

/* 1. ZENTRALE WERTE -------------------------------------------------------- */
:root {
    --mm-blue: #0a2d4e;
    --mm-brown: #462d18;
    --mm-cream: #f9f7f5;
    --mm-line: #ded9d4;
    --mm-content: 1280px;

    --mm-appearance-white: #ffffff;
    --mm-appearance-dark: var(--mm-blue);
    --mm-appearance-gutter: 32px;
    --mm-appearance-card-padding: 28px;
    --mm-appearance-gap: 32px;
    --mm-space-extra-small: 16px;
    --mm-space-small: 30px;
    --mm-space-medium: 50px;
    --mm-space-large: 75px;
    --mm-space-extra-large: 100px;
}

@media (max-width: 767px) {
    :root {
        --mm-appearance-gutter: 18px;
        --mm-appearance-card-padding: 20px;
        --mm-appearance-gap: 24px;
        --mm-space-extra-small: 12px;
        --mm-space-small: 20px;
        --mm-space-medium: 32px;
        --mm-space-large: 45px;
        --mm-space-extra-large: 60px;
    }
}

/* 2. RAHMEN --------------------------------------------------------------- */
body.movitamed-site .frame {
    /* Pro Rahmen zurücksetzen: verschachtelte helle Elemente bleiben lesbar. */
    --mm-frame-bg: transparent;
    --mm-frame-text: var(--mm-text, #222222);
    --mm-frame-heading: var(--mm-brown);
    --mm-frame-link: var(--mm-blue);
    --mm-frame-hover: var(--mm-brown);
    box-sizing: border-box;
    min-width: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-block: 0;
    color: var(--mm-frame-text);
    background-color: var(--mm-frame-bg);
}

/* Standard – zentriert */
body.movitamed-site .frame-default {
    width: calc(100% - 2 * var(--mm-appearance-gutter));
    max-width: var(--mm-content);
    margin-inline: auto;
    padding: 0;
}

/* Volle Breite – Hintergrund aktiv; Inhalt weiterhin zentriert.
   Voraussetzung: das Element liegt im äußeren, unbeschränkten Inhaltsbereich. */
body.movitamed-site .frame-fullwidth {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-block: 0;
    padding-inline: max(
        var(--mm-appearance-gutter),
        calc((100% - var(--mm-content)) / 2)
    );
}

/* Kein Rahmen – volle Breite seines Elterncontainers, ohne Innenabstand. */
body.movitamed-site .frame-none {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: 0;
}

/* Ohne Abstände: zentriert, ohne automatisches Rahmen-/Layout-Padding.
   Die Felder Abstand davor/danach bleiben unabhängig davon wirksam. */
body.movitamed-site .frame-no-spacing {
    width: calc(100% - 2 * var(--mm-appearance-gutter));
    max-width: var(--mm-content);
    margin-inline: auto;
    padding: 0;
}

/* In Spalten/Containern keine zusätzlichen äußeren Seitenränder. */
body.movitamed-site .frame .frame {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    padding-inline: 0;
}

/* Nur die Inhaltskanten bereinigen: keine zusätzlichen Absatz-/Listenränder
   vor/nach dem Element. Abstände zwischen Absätzen bleiben erhalten.
   Verschachtelte .frame-Elemente behalten ihre eigenen Backend-Abstände. */
body.movitamed-site .frame > :first-child:not(.frame),
body.movitamed-site .frame :is(.textpic-item, .textpic-text, .ce-bodytext, .ce-gallery, .gallery-item) > :first-child:not(.frame) {
    margin-top: 0;
}
body.movitamed-site .frame > :last-child:not(.frame),
body.movitamed-site .frame :is(.textpic-item, .textpic-text, .ce-bodytext, .ce-gallery, .gallery-item) > :last-child:not(.frame) {
    margin-bottom: 0;
}

/* 3. HINTERGRUNDFARBEN ---------------------------------------------------- */
body.movitamed-site .frame-background-none {
    --mm-frame-bg: transparent;
}
body.movitamed-site .frame-background-white {
    --mm-frame-bg: var(--mm-appearance-white);
}
/* Backend: Weiss [tertiary] – oben transparent, nach unten deckend weiß.
   Der Verlauf betrifft nur den Hintergrund; Text und Icons bleiben deckend.
   Verlaufshöhe: 100 px am Desktop, 60 px mobil (bestehende Abstandsvariablen). */
body.movitamed-site .frame.frame-background-tertiary {
    --mm-frame-bg: transparent;
    --mm-white-fade-height: var(--mm-space-extra-large, 100px);
    --mm-white-fade: linear-gradient(to bottom,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, .85) calc(var(--mm-white-fade-height) * .65),
        #ffffff var(--mm-white-fade-height));
    background-color: transparent;
    background-image: var(--mm-white-fade);
}

/* Ein optional am selben Element gewähltes Bild bleibt unter dem Verlauf. */
body.movitamed-site .frame.frame-background-tertiary.frame-has-background-image {
    background-image: var(--mm-white-fade), var(--frame-background-image, none);
}

body.movitamed-site .frame-background-light {
    --mm-frame-bg: var(--mm-cream);
}
body.movitamed-site .frame-background-primary {
    --mm-frame-bg: var(--mm-blue);
}
body.movitamed-site .frame-background-secondary {
    --mm-frame-bg: var(--mm-brown);
}
body.movitamed-site .frame-background-dark {
    --mm-frame-bg: var(--mm-appearance-dark);
}
body.movitamed-site .frame:is(
    .frame-background-primary,
    .frame-background-secondary,
    .frame-background-dark
) {
    --mm-frame-text: #ffffff;
    --mm-frame-heading: #ffffff;
    --mm-frame-link: #ffffff;
    --mm-frame-hover: #ded9d4;
}

body.movitamed-site .frame :is(h1, h2, h3, h4, h5, h6) {
    color: var(--mm-frame-heading);
}
body.movitamed-site .frame :is(p, li, blockquote, figcaption) {
    color: var(--mm-frame-text);
}
body.movitamed-site .frame a:not(.btn):not([class*="btn-"]):not(.pq-button) {
    color: var(--mm-frame-link);
}
body.movitamed-site .frame a:not(.btn):not([class*="btn-"]):not(.pq-button):hover {
    color: var(--mm-frame-hover);
}
/* Der bestehende blaue Standardbutton bleibt auf dunklen Flächen erkennbar. */
body.movitamed-site .frame:is(
    .frame-background-primary, .frame-background-secondary, .frame-background-dark
) :is(.btn-default, .btn-primary, .pq-button) {
    border-color: #ffffff;
}

/* 4. HINTERGRUNDBILD ------------------------------------------------------ */
/* Die Bild-URL kommt aus Fluid als --frame-background-image am jeweiligen #cID. */
body.movitamed-site .frame-has-background-image {
    background-image: var(--frame-background-image, none);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* 5. LAYOUT-AUSWAHL ------------------------------------------------------- */
/* 0 = Standard: nutzt ausschließlich Rahmen-, Farb- und Abstandseinstellungen. */

/* 101 = Akzentlinie links */
body.movitamed-site .frame.frame-layout-101 {
    border-left: 4px solid var(--mm-blue);
    padding: var(--mm-appearance-card-padding);
}

/* 102 = FAQ – 2 Spalten. Passend zum vorhandenen Accordion.html.
   Grid erhält die Reihenfolge zeilenweise; auf Mobilgeräten eine Spalte. */
body.movitamed-site .frame-layout-102 > .toggle-view-custom {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 0 var(--mm-appearance-gap);
    padding: 0;
    margin: 0;
    list-style: none;
}
body.movitamed-site .frame-layout-102 > .toggle-view-custom > li {
    min-width: 0;
}
@media (max-width: 767px) {
    body.movitamed-site .frame-layout-102 > .toggle-view-custom {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 103 = Kontaktformular – Hintergrund. Nur Formularbox, kein neues Formular. */
body.movitamed-site .frame-layout-103 form {
    --mm-frame-text: var(--mm-text, #222222);
    --mm-frame-heading: var(--mm-brown);
    --mm-frame-link: var(--mm-blue);
    --mm-frame-hover: var(--mm-brown);
    padding: var(--mm-appearance-card-padding);
    background-color: var(--mm-cream);
    color: var(--mm-frame-text);
    border: 1px solid var(--mm-line);
}

/* 104 = Footer-Inhalt */
body.movitamed-site .frame-layout-104 {
    width: 100%;
    max-width: none;
    padding: 0;
    margin-inline: 0;
}

/* 120 = Bilder-Slider. Die CSS allein aktiviert keine Slider-Funktion. */
body.movitamed-site .frame-layout-120 {
    min-width: 0;
}
body.movitamed-site .frame-layout-120 img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 0;
}

/* Diese bewusste Rahmenauswahl gewinnt auch gegen Layout 101. */
body.movitamed-site .frame.frame-no-spacing {
    padding: 0;
}

/* 6. ABSTAND DAVOR / DANACH ---------------------------------------------- */
/* Ohne Klasse bzw. leere Auswahl: 0 (siehe Basisregel oben).
   Die folgende explizite Auswahl hat Vorrang vor Rahmen- und Layoutregeln. */
body.movitamed-site .frame-space-before-none {
    margin-top: 0;
}
body.movitamed-site .frame-space-before-extra-small {
    margin-top: var(--mm-space-extra-small);
}
body.movitamed-site .frame-space-before-small {
    margin-top: var(--mm-space-small);
}
body.movitamed-site .frame-space-before-medium {
    margin-top: var(--mm-space-medium);
}
body.movitamed-site .frame-space-before-large {
    margin-top: var(--mm-space-large);
}
body.movitamed-site .frame-space-before-extra-large {
    margin-top: var(--mm-space-extra-large);
}
body.movitamed-site .frame-space-after-none {
    margin-bottom: 0;
}
body.movitamed-site .frame-space-after-extra-small {
    margin-bottom: var(--mm-space-extra-small);
}
body.movitamed-site .frame-space-after-small {
    margin-bottom: var(--mm-space-small);
}
body.movitamed-site .frame-space-after-medium {
    margin-bottom: var(--mm-space-medium);
}
body.movitamed-site .frame-space-after-large {
    margin-bottom: var(--mm-space-large);
}
body.movitamed-site .frame-space-after-extra-large {
    margin-bottom: var(--mm-space-extra-large);
}

/* 7. ÜBERSCHRIFT UND SUBHEADER -------------------------------------------- */
body.movitamed-site .frame-header {
    margin-bottom: 22px;
}
body.movitamed-site .frame-header:empty {
    display: none;
}
/* Schrift und Gewicht der Überschriften werden zentral in movitamed.css definiert. */
body.movitamed-site .mm-heading__part {
    color: inherit;
}
body.movitamed-site .mm-heading--split .mm-heading__part {
    display: block;
}
/* Explizit gewählte Farben gewinnen gegenüber automatischer Hintergrundfarbe. */
body.movitamed-site .mm-heading [data-mm-color="blue"] {
    color: var(--mm-blue);
}
body.movitamed-site .mm-heading [data-mm-color="brown"] {
    color: var(--mm-brown);
}
body.movitamed-site .mm-heading [data-mm-color="white"] {
    color: #ffffff;
}
body.movitamed-site .frame-header.text-left { text-align: left; }
body.movitamed-site .frame-header.text-center { text-align: center; }
body.movitamed-site .frame-header.text-right { text-align: right; }

body.movitamed-site .mm-subheader {
    display: block;
    margin: 0 0 14px;
    line-height: 1.4;
}
body.movitamed-site .mm-subheader__label {
    display: inline-block;
    padding: 7px 10px;
    background-color: var(--mm-brown);
    color: #ffffff;
    font-family: Poppins, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    border-radius: 2px;
}

/* 8. BEHANDLUNGSSLIDER ---------------------------------------------------- */
/* Auf dunklem Hintergrund: Intro hell; weiße Karten mit dunkler Schrift. */
body.movitamed-site .ak-treatment-slider .ak-treatment-slider__intro {
    color: var(--mm-frame-text);
}
body.movitamed-site .ak-treatment-slider .ak-treatment-slider__intro :is(h2, h3) {
    color: var(--mm-frame-heading);
}
body.movitamed-site .ak-treatment-slider .ak-treatment-slider__intro p {
    color: var(--mm-frame-text);
}
body.movitamed-site .ak-treatment-slider__card,
body.movitamed-site .mm-treatment {
    --mm-frame-text: var(--mm-text, #222222);
    --mm-frame-heading: var(--mm-brown);
    --mm-frame-link: var(--mm-blue);
    --mm-frame-hover: var(--mm-brown);
    color: var(--mm-frame-text);
    background-color: #ffffff;
}
body.movitamed-site .ak-treatment-slider .ak-treatment-slider__card h3 {
    color: var(--mm-frame-heading);
}
body.movitamed-site .ak-treatment-slider .ak-treatment-slider__card a:hover h3 {
    color: var(--mm-brown);
}

/* 9. GEMEINSAME HEADER-/FOOTER-INHALTE ------------------------------------ */
/* Logo und Terminbutton behalten ihre kompakten Rahmen. */
body.movitamed-site header#pq-header.mm-header
:is(.mm-logo-content, .mm-booking-content) .frame {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
}
/* Ungefärbte Footer-Rahmen übernehmen die helle Footer-Schrift.
   Explizit weiße/helle Rahmen behalten dunkle Schrift. */
body.movitamed-site footer#pq-footer.mm-footer .frame {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: 0;
}
body.movitamed-site footer#pq-footer.mm-footer .frame-background-none {
    --mm-frame-text: #ffffff;
    --mm-frame-heading: #ffffff;
    --mm-frame-link: #ffffff;
    --mm-frame-hover: #ded9d4;
}
body.movitamed-site footer#pq-footer.mm-footer .frame :is(h1,h2,h3,h4,h5,h6) {
    color: var(--mm-frame-heading);
}
body.movitamed-site footer#pq-footer.mm-footer .frame p {
    color: var(--mm-frame-text);
}
body.movitamed-site footer#pq-footer.mm-footer .frame a {
    color: var(--mm-frame-link);
}

/* 10. INHALTSBEREICH ---------------------------------------------------- */
/* Seitencontainer fügen keine fest eingebauten 35/60 px hinzu.
   flow-root hält den ersten/letzten Außenabstand innerhalb des Seitenbereichs. */
body.movitamed-site .mm-page-content {
    display: flow-root;
    padding-block: 0;
}