/* =========================================================================
   fewo-marienschacht.de — Brand-Layer „Marienschacht“
   -------------------------------------------------------------------------
   Look & Feel abgeleitet von https://www.marienschacht.de/ (Elementor/WP).
   Alle Werte sind aus den Computed Styles der Live-Seite ausgelesen, nicht
   geschaetzt. Siehe DESIGN-marienschacht.md.

   EINBINDUNG: als LETZTES Stylesheet im Contao-Layout laden (nach custom.css
   bzw. custom.scss). Diese Datei ist reines CSS und braucht keinen Build.

   Aufbau:
     1  Webfont Roboto (self-hosted, DSGVO-konform)
     2  Marken-Tokens
     3  Grundlagen (Hintergrund, Typografie, Links)
     4  Header + Navigation
     5  Buttons
     6  Karten / Inhaltsboxen
     7  Formulare
     8  Footer
     9  Kleinkram (Scroll-Up, Bilder)
    10  Hero          (rsce „Marienschacht: Hero“)
    11  Intro-Sektion (rsce „Marienschacht: Intro-Sektion“)
   ========================================================================= */


/* == 1  Webfont =========================================================== */
/* Absolute url() – der Contao-CSS-Combiner zerlegt relative Pfade sonst. */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/files/layout/fonts/roboto-latin-300-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/files/layout/fonts/roboto-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/files/layout/fonts/roboto-latin-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/files/layout/fonts/roboto-latin-600-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/files/layout/fonts/roboto-latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext (poln./tschech. Zeichen – fuer Gastnamen) */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/files/layout/fonts/roboto-latin-ext-300-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/files/layout/fonts/roboto-latin-ext-400-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/files/layout/fonts/roboto-latin-ext-500-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/files/layout/fonts/roboto-latin-ext-600-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/files/layout/fonts/roboto-latin-ext-700-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* == 2  Marken-Tokens ===================================================== */

:root {
    /* Farben (Quelle: Live-Seite) */
    --ms-bg:          #F4F0E9;  /* Seitenhintergrund, warmes Beige        */
    --ms-surface:     #FFFFFF;  /* Karten, Header-Pill, Footer-Panel      */
    --ms-gold:        #BDB38B;  /* Akzent: Kartentitel, Hover, CTA        */
    --ms-gold-dark:   #A19876;  /* Hover-Zustand auf Gold-Flaechen        */
    --ms-gold-soft:   #EDEAE0;  /* Gold 20 % auf Beige, fuer Flaechen     */
    --ms-ink:         #1D1D1B;  /* Ueberschriften, Navigation             */
    --ms-ink-soft:    #535353;  /* Outline-Buttons, Sekundaertext         */
    --ms-muted:       #7A7A7A;  /* Kicker / Eyebrow ueber Ueberschriften  */
    --ms-line:        #DEDEDE;  /* Rahmen Formularfelder                  */
    --ms-field:       #F5F5F5;  /* Fuellung Formularfelder                */

    /* Form */
    --ms-radius:        10px;   /* Standardradius (Karten, Buttons)       */
    --ms-radius-field:   6px;   /* Formularfelder                         */
    --ms-radius-panel:  20px;   /* Footer-Panel (nur oben)                */
    --ms-shadow:       0 10px 40px rgba(0, 0, 0, .30);  /* grosse Karten  */
    --ms-shadow-soft:  0 6px 24px rgba(0, 0, 0, .12);   /* Listenkarten   */

    /* Typografie */
    --ms-font:  'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --ms-track: .0625em;        /* Laufweite Navigation / Kicker          */
}


/* == 3  Grundlagen ======================================================== */

body {
    background-color: var(--ms-bg);
    color: var(--ms-ink);
    font-family: var(--ms-font);
}

#wrapper,
#container,
#main {
    background-color: transparent;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.look-like-h1,
.jamp-headline {
    font-family: var(--ms-font);
    color: var(--ms-ink);
    font-weight: 400;
}

/* Grosse Ueberschriften: Versalien, leichte Schrift – wie auf der Eventseite.
   Die Groessen stehen bewusst auch hier (nicht nur in _variables.scss),
   damit der Brand-Layer ohne SCSS-Build vollstaendig wirkt. */
h1, .h1, .look-like-h1 {
    font-size: 2.4rem;
    text-transform: uppercase;
    line-height: 1.05;
}

h2, .h2 {
    font-size: 2rem;
    text-transform: uppercase;
    line-height: 1.05;
}

h3, .h3 {
    font-size: 1.5rem;
    line-height: 1.2;
}

@media (min-width: 992px) {
    h1, .h1, .look-like-h1 { font-size: 3.4rem; }
    h2, .h2               { font-size: 2.6rem; }
    h3, .h3               { font-size: 1.7rem; }
}

/* Gold ist der Akzent fuer SEKTIONS-Titel („Impressionen“, „Wissenswertes“),
   nicht fuer jede h3. Objekt- und Listentitel bleiben schwarz, sonst
   verschwimmt eine Liste aus zwanzig Wohnungen zu einer goldenen Flaeche. */
.ms-headline--gold,
.ms-card__title {
    color: var(--ms-gold);
}

.accommodation-card__title,
.accommodation-row__title {
    color: var(--ms-ink);
}

/* Kicker ueber der Ueberschrift („WILLKOMMEN IM MARIENSCHACHT“) */
.ms-kicker,
.lead--kicker {
    display: block;
    margin-bottom: .5rem;
    color: var(--ms-muted);
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: .125em;
    text-transform: uppercase;
    line-height: 1.5;
}

a {
    color: var(--ms-ink);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--ms-gold);
    text-decoration: none;
}

b, strong {
    font-weight: 600;
}


/* == 4  Header + Navigation =============================================== */
/* Vorbild: beiger Balken, darin eine weisse Pille mit Radius 10px, in der
   Logo und Navigation sitzen; der CTA sitzt als eigene Pille rechts.        */

/* Nur Flaeche und Form — Randabstaende und Innenpolsterung setzt
   marienschacht-layout.css ueber --ms-gutter. Eine padding-Kurzform hier
   wuerde die dortigen padding-inline-Regeln ueberschreiben, weil diese
   Datei spaeter geladen wird. */
#header .header {
    background: var(--ms-bg);
    border-bottom: 0;
    padding-block: 20px 25px;
}

#header .header > .container {
    background: var(--ms-surface);
    border-radius: var(--ms-radius);
}

body.header-shrink #header .header {
    background: var(--ms-bg);
    border-bottom: 0;
    padding-block: 10px;
}

body.header-shrink #header .header > .container {
    box-shadow: var(--ms-shadow-soft);
}

/* Logo – Schriftzug, Seitenverhaeltnis ca. 5,6 : 1, darum Breite begrenzen */
#logo {
    flex: 0 0 auto;
    margin: 0;
}

#logo a {
    background-image: url('/files/layout/img/logo.png');
    background-position: left center;
    width: 200px;
    height: 36px;
}

@media (min-width: 768px) {
    #logo a {
        width: 281px;
        height: 50px;
    }
}

body.header-shrink #logo a {
    width: 220px;
    height: 39px;
}

/* Navigation
   Contao gibt den aktiven Menuepunkt NICHT als <a> aus, sondern als
   <strong class="active"> (bei Untermenues auch mal als <span>). Alle
   Navigationsregeln muessen diese drei Elemente gleich behandeln, sonst
   faellt genau der Punkt aus dem Raster, auf dem der Besucher gerade steht. */
#header nav :is(a, strong, span, b),
#header .menu-link {
    color: var(--ms-ink);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: var(--ms-track);
    text-transform: uppercase;
    text-decoration: none;
}

#header nav a:hover,
#header nav :is(a, strong, span, b).active,
#header nav :is(a, strong, span, b).trail,
#header nav .active > :is(a, strong, span, b),
#header nav .trail > :is(a, strong, span, b),
#header .menu-link:hover {
    color: var(--ms-gold);
}

/* Contao gibt fuer die aktuelle Seite <strong> aus. Der Browser setzt das
   auf fett (700) — im Menue soll es dieselbe Staerke haben wie die Links
   daneben, damit nur die Farbe den Unterschied macht. */
#header nav strong,
#header nav b {
    font-weight: 600;
}

/* Der Header-CTA („Ihre Anfrage“ / „Jetzt buchen“) sitzt rechts als eigene
   weisse Pille – auf der Vorlage weisse Flaeche mit schwarzer Schrift. */
#header .header-cta,
#header .menu-link.cta {
    background: var(--ms-surface);
    color: var(--ms-ink);
    border-radius: var(--ms-radius);
    padding: 1rem 1.5rem;
    font-weight: 600;
    letter-spacing: var(--ms-track);
    text-transform: uppercase;
}

#header .header-cta:hover {
    color: var(--ms-gold);
}


/* == 5  Buttons =========================================================== */

.primary-button,
.btn-primary,
.widget-submit button,
button[type="submit"].submit {
    background: var(--ms-gold);
    border: 1px solid var(--ms-gold);
    color: var(--ms-surface);
    border-radius: var(--ms-radius);
    box-shadow: none;
    padding: .625rem 1.5rem;
    font-weight: 500;
    font-size: 1.2rem;
    letter-spacing: normal;
    text-transform: none;
}

.primary-button:hover,
.btn-primary:hover,
.widget-submit button:hover,
button[type="submit"].submit:hover {
    background: var(--ms-gold-dark);
    border-color: var(--ms-gold-dark);
    color: var(--ms-surface);
    transform: none;
}

.secondary-button,
.btn-secondary {
    background: var(--ms-surface);
    border: 1px solid var(--ms-ink-soft);
    color: var(--ms-ink-soft);
    border-radius: var(--ms-radius);
    box-shadow: none;
    padding: .625rem 1.625rem;
    font-weight: 400;
    font-size: 1.1rem;
    letter-spacing: normal;
    text-transform: none;
}

.secondary-button:hover,
.btn-secondary:hover {
    background: var(--ms-surface);
    border-color: var(--ms-gold);
    color: var(--ms-gold);
    transform: none;
}

/* Der Pfeil des Starter-Themes passt nicht zur ruhigen Vorlage */
.secondary-button::before {
    content: none;
}


/* == 6  Karten / Inhaltsboxen ============================================= */
/* Vorbild: weisse Flaeche, Radius 10px, weicher Schatten, Bild randlos       */

.ms-card,
.textbox,
.jamp-box.icon-box,
.content-accordion .toggler {
    background: var(--ms-surface);
    border-radius: var(--ms-radius);
    box-shadow: var(--ms-shadow-soft);
    overflow: hidden;
}

.ms-card {
    --ms-card-pad: 2.5rem;
    padding: var(--ms-card-pad);
    margin-bottom: 2rem;
}

/* Kraeftiger Schatten wie bei den grossen Karten der Vorlage. Bewusst
   optional: mehrere Karten untereinander wirken damit schnell unruhig. */
.ms-card--elevated {
    box-shadow: var(--ms-shadow);
}

/* Innenabstand des Karten-Wrappers (rsce „Karte START“) */
.ms-card--pad-wide  { --ms-card-pad: 4rem; }
.ms-card--pad-flush { --ms-card-pad: 0; }

/* Bild-Text-Karte („Impressionen“ / „Wissenswertes“ / „Buchung“) */
.ms-card--feature {
    display: grid;
    grid-template-columns: 1fr;
    padding: 0;
}

@media (min-width: 768px) {
    .ms-card--feature {
        grid-template-columns: 1fr 1fr;
    }

    /* Bild links: im Quelltext steht der Text zuerst (gut fuer Screenreader
       und Suchmaschinen), optisch tauschen wir nur die Spalten. */
    .ms-card--feature.ms-card--media-left .ms-card__body  { grid-column: 2; grid-row: 1; }
    .ms-card--feature.ms-card--media-left .ms-card__media { grid-column: 1; grid-row: 1; }
}

.ms-card--feature .ms-card__body {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
}

.ms-card--text .ms-card__body > *:first-child { margin-top: 0; }
.ms-card--text .ms-card__body > *:last-child  { margin-bottom: 0; }

.ms-card__media {
    min-height: 260px;
}

.ms-card__media figure,
.ms-card__media picture {
    display: block;
    height: 100%;
    margin: 0;
}

.ms-card__media img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

/* Der Titel der Karte ist der einzige Ort, an dem Gold als Schriftfarbe
   auftritt – so bleibt der Akzent selten und dadurch wirksam. */
.ms-card__title,
.ms-card__title h1,
.ms-card__title h2,
.ms-card__title h3,
.ms-card__title h4 {
    color: var(--ms-gold);
    font-size: 1.9rem;
    font-weight: 400;
    line-height: 1.2;
    text-transform: none;
    margin: 0;
}

@media (min-width: 992px) {
    .ms-card__title,
    .ms-card__title h1,
    .ms-card__title h2,
    .ms-card__title h3,
    .ms-card__title h4 { font-size: 2.4rem; }
}

.ms-card__text > *:last-child { margin-bottom: 0; }

.ms-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: .5rem;
}

.jamp-box.icon-box svg {
    color: var(--ms-gold);
}


/* == 7  Formulare ========================================================= */

.widget input[type="text"],
.widget input[type="email"],
.widget input[type="tel"],
.widget input[type="date"],
.widget input[type="number"],
.widget select,
.widget textarea,
.form-control {
    background: var(--ms-field);
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius-field);
    color: var(--ms-ink);
    padding: .5rem 1rem;
}

.widget input:focus,
.widget select:focus,
.widget textarea:focus,
.form-control:focus {
    border-color: var(--ms-gold);
    box-shadow: 0 0 0 3px rgba(189, 179, 139, .25);
    outline: none;
}

.widget label {
    color: var(--ms-ink);
    font-weight: 500;
}


/* == 8  Footer ============================================================ */
/* Vorbild: weisses Panel, das oben mit 20px Radius aus dem Beige aufsteigt.  */

#footer {
    background: var(--ms-bg);
}

#footer .footer-top {
    background: var(--ms-surface);
    border-radius: var(--ms-radius-panel) var(--ms-radius-panel) 0 0;
    padding: 3rem 0 2rem;
}

#footer .footer-top p,
#footer .footer-top a,
#footer .footer-top li {
    color: var(--ms-ink);
}

#footer .footer-top a:hover {
    color: var(--ms-gold);
}

#footer .footer-top h3 {
    color: var(--ms-gold);
    font-size: 1.2rem;
    letter-spacing: var(--ms-track);
    text-transform: uppercase;
}

#footer .footer-top svg {
    color: var(--ms-gold);
}

#footer .footer-top .logo-footer {
    max-width: 281px;
}

#footer .footer-bottom {
    background: var(--ms-surface);
    color: var(--ms-ink);
    padding: 0 0 1.5rem;
    text-align: left;
}

#footer .footer-bottom a:hover {
    color: var(--ms-gold);
}


/* == 9  Kleinkram ========================================================= */

#scrollup {
    background: var(--ms-muted);
    border: 0;
    border-radius: var(--ms-radius);
    box-shadow: none;
    color: var(--ms-surface);
}

#scrollup:hover {
    background: var(--ms-gold);
    color: var(--ms-surface);
}

/* Bilder in Inhalten bekommen denselben Radius wie die Karten */
.ce_image figure img,
.content-gallery img,
.headpicture img {
    border-radius: var(--ms-radius);
}

/* Innerhalb einer Karte klebt das Bild am Rand – kein doppelter Radius */
.ms-card figure img,
.ms-card--feature img {
    border-radius: 0;
}


/* == 10  Hero (rsce „Marienschacht: Hero“) ================================ */
/* Vollflaechiges Kopfbild mit Crossfade. Die Hoehe steuert die Variable
   --ms-hero-h, die das Element selbst per style-Attribut setzt.            */

.ms-hero {
    margin-bottom: 3rem;
}

.ms-hero__stage {
    position: relative;
    height: var(--ms-hero-h, 560px);
    min-height: 320px;
    border-radius: var(--ms-radius);
    overflow: hidden;
    isolation: isolate;
}

.ms-hero__slides,
.ms-hero__slide {
    position: absolute;
    inset: 0;
}

.ms-hero__slide {
    opacity: 0;
    transition: opacity .9s ease-in-out;
}

.ms-hero__slide.is-active {
    opacity: 1;
}

.ms-hero__slide figure,
.ms-hero__slide picture {
    display: block;
    height: 100%;
    margin: 0;
}

.ms-hero__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

/* Abdunklung nach unten – ohne sie ist weisse Schrift auf hellen Bildern
   (Sommer, Himmel) nicht lesbar. */
.ms-hero--overlay .ms-hero__slides::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .15) 45%, rgba(0, 0, 0, 0) 75%);
    pointer-events: none;
}

.ms-hero__text {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    color: #fff;
    padding: 2rem;
    max-width: 90%;
}

@media (min-width: 768px) {
    .ms-hero__text { padding: 3rem; }
}

.ms-hero--bottom-left   .ms-hero__text { left: 0; bottom: 0; }
.ms-hero--bottom-center .ms-hero__text { left: 50%; bottom: 0; transform: translateX(-50%); align-items: center; text-align: center; }
.ms-hero--center        .ms-hero__text { left: 50%; top: 50%; transform: translate(-50%, -50%); align-items: center; text-align: center; }

.ms-hero__kicker,
.ms-hero__sub {
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1.3;
}

@media (min-width: 768px) {
    .ms-hero__kicker,
    .ms-hero__sub { font-size: 2rem; }
}

.ms-hero__headline h1,
.ms-hero__headline h2,
.ms-hero__headline div {
    color: #fff;
    font-size: 3rem;
    font-weight: 500;
    line-height: 1;
    text-transform: none;   /* der Hero der Vorlage ist gemischt gesetzt */
    margin: 0;
}

@media (min-width: 768px) {
    .ms-hero__headline h1,
    .ms-hero__headline h2,
    .ms-hero__headline div { font-size: 5.5rem; }
}

.ms-hero__button {
    margin-top: 1rem;
}

.ms-hero__dots {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    display: flex;
    gap: .5rem;
}

.ms-hero__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    cursor: pointer;
    transition: background .2s ease-in-out;
}

.ms-hero__dot.is-active,
.ms-hero__dot:hover {
    background: #fff;
}

/* Ohne JavaScript bleibt das erste Bild stehen – kein leerer Kasten. */
.ms-hero__slide:first-child {
    opacity: 1;
}

.ms-hero__slide.is-active ~ .ms-hero__slide:first-child {
    opacity: 0;
}


/* == 11  Intro-Sektion (rsce „Marienschacht: Intro-Sektion“) ============== */

.ms-intro {
    margin-bottom: 3rem;
}

.ms-intro__head > *:last-child  { margin-bottom: 0; }
.ms-intro__body > *:last-child  { margin-bottom: 0; }

.ms-intro--split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 992px) {
    .ms-intro--split {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
        align-items: start;
    }
}

.ms-intro--narrow {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.ms-intro--narrow .ms-intro__buttons {
    justify-content: center;
}

.ms-intro__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

.ms-intro__text > *:last-child { margin-bottom: 0; }