/* =========================================
   BERGWERK FRAMEWORK 1.1 (MODERNIZED)
   ========================================= */
/* 1) Root font size: 100% => 1rem = 16px */

html {
    font-size: 100%; /* Die Standard-Wurzel für alle Browser */
}

a {
    text-decoration: none;
}

/* Global box sizing + overflow safety */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}


/* -----------------------------------------
   2) DESIGN TOKENS – Fonts + Farben
   ----------------------------------------- */
:root {
    --font-primary: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-heading: var(--font-primary);

    /* Primary Farbpalette */
    --primary-ulight: #FBF8F2;
    --primary-light: #F1E4CB;
    --primary-med: #D96A4F;
    --primary: #C53918;
    --primary-dark: #661805;
    --primary-udark: #3A0E03;

    /* Basis-Farben */
    --white: #fff;
    --black: #000;
    --grey: #f4f4f4;

    /* Semantische Farben */
    --color-text: #151515;
    --color-bg: #ffffff;
    --color-surface: #f7f7f7;
    --color-muted: #6b7280;
    --color-primary: var(--primary);
}

/* -----------------------------------------
   3) DESIGN TOKENS (Umgerechnet auf 16px Basis)
   ----------------------------------------- */
:root {
    /* CONTENT WIDTH: 144rem / 1.6 = 90rem */
    --content-width: 90rem;

    /* GUTTER: clamp(0.8 / 1.6, calc(1 / 1.6 + 1.2vw), 4.5 / 1.6) */
    --gutter: clamp(0.5rem, calc(0.625rem + 1.2vw), 2.8125rem);

    @media (max-width: 480px) {
        :root {
            --gutter: clamp(0.375rem, calc(0.25rem + 1.5vw), 0.75rem);
        }
    }

    /* TEXT SCALE (fluid) */
    --text-xs: clamp(0.8125rem, calc(0.75rem + 0.2vw), 0.875rem);
    --text-s: clamp(0.875rem, calc(0.8125rem + 0.3vw), 1rem);
    --text-m: clamp(1rem, calc(0.875rem + 0.5vw), 1.125rem);
    --text-l: clamp(1.125rem, calc(0.9375rem + 0.8vw), 1.375rem);
    --text-xl: clamp(1.375rem, calc(1.125rem + 1.1vw), 1.75rem);
    --text-xxl: clamp(1.625rem, calc(1.25rem + 1.5vw), 2.25rem);

    /* HEADING SCALE */
    --h6: clamp(0.8125rem, calc(0.75rem + 0.2vw), 0.875rem);
    --h5: clamp(0.875rem, calc(0.8125rem + 0.3vw), 1rem);
    --h4: clamp(1.1875rem, calc(1rem + 0.7vw), 1.625rem);
    --h3: clamp(1.4375rem, calc(1.1875rem + 1.1vw), 2.125rem);
    --h2: clamp(1.6875rem, calc(1.375rem + 1.6vw), 2.875rem);
    --h1: clamp(2.1875rem, calc(1.518125rem + 3.346vw), 4.375rem);
    --base-text-lh: calc(6px + 2ex);
    --heading-line-height: calc(4px + 2ex);

    /* FLUID SPACING SCALE */
    --space-xs: clamp(0.84375rem, calc(0.85rem + (-0.02vw)), 0.83125rem);
    --space-s: clamp(1.125rem, calc(1.0875rem + 0.18vw), 1.25rem);
    --space-m: clamp(1.5rem, calc(1.3875rem + 0.56vw), 1.875rem);
    --space-l: clamp(2rem, calc(1.75625rem + 1.2vw), 2.8125rem);
    --space-xl: clamp(2.6625rem, calc(2.20625rem + 2.3vw), 4.21875rem);
    --space-xxl: clamp(3.55rem, calc(2.73125rem + 4.11vw), 6.328125rem);

    /* SECTION SPACING (vertikal) */
    --section-space-xs: clamp(1.6875rem, calc(1.2rem + 2.44vw), 3.33125rem);
    --section-space-s: clamp(2.25rem, calc(1.4375rem + 4.07vw), 5rem);
    --section-space-m: clamp(3rem, calc(1.66875rem + 6.67vw), 7.5rem);
    --section-space-l: clamp(4rem, calc(1.85rem + 10.74vw), 11.25rem);
    --section-space-xl: clamp(5.33125rem, calc(1.9125rem + 17.1vw), 16.875rem);
    --section-space-xxl: clamp(7.10625rem, calc(1.7125rem + 26.97vw), 25.3125rem);

    /* RADIUS */
    --radius-none: 0;
    --radius-xs: 0.275rem;
    --radius-s: 0.41875rem;
    --radius-m: 0.625rem;
    --radius-l: 0.9375rem;
    --radius-xl: 1.40625rem;
    --radius-xxl: 2.109375rem;
    --radius-pill: 624.375rem;
    --radius-circle: 50%;

    /* GRID TEMPLATES */
    --grid-1: repeat(1, minmax(0, 1fr));
    --grid-2: repeat(2, minmax(0, 1fr));
    --grid-3: repeat(3, minmax(0, 1fr));
    --grid-4: repeat(4, minmax(0, 1fr));
    --grid-6: repeat(6, minmax(0, 1fr));
    --grid-1-2: minmax(0, 1fr) minmax(0, 2fr);
    --grid-1-3: minmax(0, 1fr) minmax(0, 3fr);
    --grid-2-1: minmax(0, 2fr) minmax(0, 1fr);
    --grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
    --grid-3-1: minmax(0, 3fr) minmax(0, 1fr);
    --grid-3-2: minmax(0, 3fr) minmax(0, 2fr);

    /* GAPS */
    --gap-xs: var(--space-xs);
    --gap-s: var(--space-s);
    --gap-m: var(--space-m);
    --gap-l: var(--space-l);
    --gap-xl: var(--space-xl);
    --gap-xxl: var(--space-xxl);
    --grid-gap: var(--space-l);
    --container-gap: var(--space-m);
}

/* -----------------------------------------
   4) BASE STYLES
   ----------------------------------------- */
body {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--text-m);
    line-height: var(--base-text-lh);
    color: var(--color-text);
    background-color: var(--color-bg);
}

h1, .h1 { font-size: var(--h1); line-height: var(--heading-line-height); font-family: var(--font-heading); color: var(--primary); }
h2, .h2 { font-size: var(--h2); line-height: var(--heading-line-height); font-family: var(--font-heading); color: var(--primary); }
h3, .h3 { font-size: var(--h3); line-height: var(--heading-line-height); font-family: var(--font-heading); color: var(--primary); }
h4, .h4 { font-size: var(--h4); line-height: var(--heading-line-height); font-family: var(--font-heading); color: var(--primary); }
h5, .h5 { font-size: var(--h5); line-height: var(--heading-line-height); font-family: var(--font-heading); color: var(--primary); }
h6, .h6 { font-size: var(--h6); line-height: var(--heading-line-height); font-family: var(--font-heading); color: var(--primary); }

.text-xs { font-size: var(--text-xs); }
.text-s { font-size: var(--text-s); }
.text-m { font-size: var(--text-m); }
.text-l { font-size: var(--text-l); }
.text-xl { font-size: var(--text-xl); }
.text-xxl { font-size: var(--text-xxl); }

h1, h2, h3, h4, h5, h6, p, span { margin: 0; padding: 0; word-break: break-word; }

/* -----------------------------------------
   5) SECTION & CONTAINER
   ----------------------------------------- */
section {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-block: var(--section-space-m);
    padding-inline: 0;
}

section > div {
    width: 100%;
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section--xs { padding-block: var(--section-space-xs); }
.section--s { padding-block: var(--section-space-s); }
.section--m { padding-block: var(--section-space-m); }
.section--l { padding-block: var(--section-space-l); }
.section--xl { padding-block: var(--section-space-xl); }
.section--xxl { padding-block: var(--section-space-xxl); }
.section--none { padding-block: 0 !important; }

section > .full-bleed { max-width: none; padding-inline: 0; }

/* -----------------------------------------
   6) SPACING UTILITIES
   ----------------------------------------- */
.gap-xs { gap: var(--gap-xs); }
.gap-s { gap: var(--gap-s); }
.gap-m { gap: var(--gap-m); }
.gap-l { gap: var(--gap-l); }
.gap-xl { gap: var(--gap-xl); }
.gap-xxl { gap: var(--gap-xxl); }

.row-gap-xs { row-gap: var(--gap-xs); }
.row-gap-s { row-gap: var(--gap-s); }
.row-gap-m { row-gap: var(--gap-m); }
.row-gap-l { row-gap: var(--gap-l); }
.row-gap-xl { row-gap: var(--gap-xl); }
.row-gap-xxl { row-gap: var(--gap-xxl); }

.col-gap-xs { column-gap: var(--gap-xs); }
.col-gap-s { column-gap: var(--gap-s); }
.col-gap-m { column-gap: var(--gap-m); }
.col-gap-l { column-gap: var(--gap-l); }
.col-gap-xl { column-gap: var(--gap-xl); }
.col-gap-xxl { column-gap: var(--gap-xxl); }

.stack-xs { display: flex; flex-direction: column; gap: var(--space-xs); }
.stack-s { display: flex; flex-direction: column; gap: var(--space-s); }
.stack-m { display: flex; flex-direction: column; gap: var(--space-m); }
.stack-l { display: flex; flex-direction: column; gap: var(--space-l); }
.stack-xl { display: flex; flex-direction: column; gap: var(--space-xl); }

/* -----------------------------------------
   7) RADIUS UTILITIES
   ----------------------------------------- */
.radius-none { border-radius: var(--radius-none); }
.radius-xs { border-radius: var(--radius-xs); }
.radius-s { border-radius: var(--radius-s); }
.radius-m { border-radius: var(--radius-m); }
.radius-l { border-radius: var(--radius-l); }
.radius-xl { border-radius: var(--radius-xl); }
.radius-xxl { border-radius: var(--radius-xxl); }
.radius-pill { border-radius: var(--radius-pill); }
.radius-circle { border-radius: var(--radius-circle); }

/* -----------------------------------------
   8) GRID SYSTEM
   ----------------------------------------- */
.grid { display: grid; gap: var(--gap-xl) !important; }

.grid--1 { grid-template-columns: var(--grid-1); }
.grid--2 { grid-template-columns: var(--grid-2); }
.grid--3 { grid-template-columns: var(--grid-3); }
.grid--4 { grid-template-columns: var(--grid-4); }
.grid--6 { grid-template-columns: var(--grid-6); }
.grid--1-2 { grid-template-columns: var(--grid-1-2); }
.grid--1-3 { grid-template-columns: var(--grid-1-3); }
.grid--2-1 { grid-template-columns: var(--grid-2-1); }
.grid--2-3 { grid-template-columns: var(--grid-2-3); }
.grid--3-1 { grid-template-columns: var(--grid-3-1); }
.grid--3-2 { grid-template-columns: var(--grid-3-2); }

.grid--auto {
    --min: 13.75rem; /* 22rem / 1.6 */
    display: grid;
    gap: var(--gap-m);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
}

/* -----------------------------------------
   9) BREAKOUTS & UTILITIES
   ----------------------------------------- */
.breakout {
    display: block;
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    width: calc(100% + var(--gutter) * 2);
    max-width: none;
}

@media (min-width: 769px) {
    .breakout-left {
        display: block;
        margin-left: calc(var(--gutter) * -1);
        width: calc(100% + var(--gutter));
        max-width: none;
    }
    .breakout-right {
        display: block;
        margin-right: calc(var(--gutter) * -1);
        margin-left: auto;
        width: calc(100% + var(--gutter));
        max-width: none;
    }
}

@media (max-width: 768px) {
    .breakout, .breakout-left, .breakout-right {
        margin-left: 0 !important; margin-right: 0 !important;
        width: 100% !important; max-width: 100% !important; transform: none !important;
    }
}

.click-parent { position: relative; }
.click-parent__link {
    position: absolute; inset: 0; z-index: 1; text-indent: -624.9375rem; /* -9999px / 16 */
    overflow: hidden; white-space: nowrap;
}
.click-parent__link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }
.click-parent > *:not(.click-parent__link) { position: relative; z-index: 2; }

/* -----------------------------------------
   10) HELPER-KLASSEN & DESIGNS
   ----------------------------------------- */
.bg-surface { background-color: var(--color-surface); }
.text-muted { color: var(--color-muted); }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.center-inline { margin-inline: auto; }

.btn-arrow {
    display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 400; font-size: var(--text-s); color: var(--primary-dark);
    background: transparent; border: none; padding: var(--space-xs) var(--space-s) var(--space-xs) 0; cursor: pointer;
    transition: color 0.3s ease; text-decoration: underline; text-underline-offset: 5px;
}

.btn-arrow::before {
    content: ""; display: inline-block; width: 1.25em; height: 1.25em; transition: transform 0.3s ease;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z'/%3E%3C/svg%3E") no-repeat center / contain;
    background-color: currentColor;
}
.btn-arrow:hover { color: var(--primary-udark); }
.btn-arrow:hover::before { transform: translateX(4px); }

.home-hero-st { display: grid; grid-template-rows: auto; grid-template-columns: var(--grid-2-3); gap: var(--grid-gap); padding-top: var(--section-space-s); }

@media (max-width:767px) { .home-hero-st { display: flex; flex-direction: column; } }
@media (min-width:768px) and (max-width:1023px) { .home-hero-st { grid-template-columns: var(--grid-2); display: grid; grid-template-rows: auto; } }

.home-hero-img { border-radius: var(--radius-xl); aspect-ratio: 16/11; object-fit: cover; }
.fx-copytext { color: var(--primary-dark); font-size: var(--text-xs); line-height: 1.5; max-width: 60ch; font-family: 'Open Sans'; }
.home-hero-left { display: flex; flex-direction: column; gap: var(--space-s); justify-content: center; }
.h1-headline { color: var(--primary); font-size: var(--h2); font-family: 'RecoletaRegular'; }
.fx-starts { max-width: 6.875rem; /* 11rem / 1.6 */ position: absolute; bottom: 0; right: 0; }
.home-hero-h1-wr { position: relative; width: fit-content; }

.btn-action {
    background-color: var(--primary); color: var(--white); width: fit-content; min-width: 15rem; /* 240px / 16 if fluid, or keep absolute */
    outline: 2px solid var(--primary); border-radius: var(--radius-xs); padding: 1rem 2rem; font-size: var(--text-s); font-weight: 600; cursor: pointer;
}
.btn-action:hover { background-color: var(--primary-dark); outline: 2px solid var(--primary-dark); }

/* Slider & Ausstattung */
.slider-section { padding-bottom: 0; padding-top: 0; }
@media (max-width:767px) { .slider-section { padding-left: 0; margin-left: 0; padding-right: 0; margin-right: 0; max-width: 100%; } }
.slider-wrapper { margin: 0 auto; padding: 0; position: relative; }

.slider-button {
    position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; background: #ffffff; border-radius: 50%;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1); border: none; cursor: pointer; display: flex; justify-content: center; align-items: center; z-index: 50;
}
.slider-button img { width: 18px; height: 18px; }
.slider-button-prev { left: var(--space-xs); }
.slider-button-next { right: var(--space-xs); }

@media (min-width: 1280px) {
    .slider-button-prev { left: calc(-1 * var(--space-l)); background: transparent; box-shadow: none; }
    .slider-button-next { right: calc(-1 * var(--space-l)); background: transparent; box-shadow: none; }
    .slider-button img { width: 1.875rem; /* 3rem / 1.6 */ height: 1.875rem; }
}

.swiper-slide img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; box-shadow: 0 3px 10px rgba(0,0,0,0.1); cursor: pointer; }
@media (max-width:639px) { .swiper-slide img { border-radius: 0; } }
.slider-button-wr { margin-top: 0.3125rem; /* .5rem / 1.6 */ display: flex; align-items: center; justify-content: center; }

.ausstattung-container { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--container-gap); }
.ausstattung-grid {
    display: grid; grid-template-rows: auto; grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); /* 280px / 16 */
    gap: var(--grid-gap); width: 100%; padding: var(--space-xl); background-color: var(--primary-ulight); border-radius: var(--radius-xl);
}
@media (max-width:639px) { .ausstattung-grid { border-radius: 0; padding-left: var(--space-m); padding-right: var(--space-m); } }

.ausstattung-headline { color: var(--primary-dark); font-family: 'Open Sans' !important; font-size: var(--text-l); font-weight: 700; }
.ausstattung-card { display: flex; flex-direction: column; gap: 0.625rem; /* 1rem / 1.6 */ }
.ausstattung-icon { width: 3.125rem; /* 5rem / 1.6 */ height: 3.125rem; }
.ausstattung-sec { padding-bottom: 0; }
@media (max-width:639px) { .ausstattung-sec { padding-left: 0; margin-left: 0; padding-right: 0; margin-right: 0; max-width: 100%; } }

/* Header & Nav */
.menu-wrapper { display: flex; justify-content: center; align-items: center; margin-inline: auto; padding-inline: var(--section-padding-x); padding-block: var(--space-xs); background-color: var(--primary-light); max-width: 100%; }
.menu-logo { max-width: 21.875rem; /* 35rem / 1.6 */ height: auto; display: block; }
.nav-wrapper { display: flex; align-items: center; gap: var(--space-s); position: relative; }
.nav-list { list-style: none; margin: 0; padding: 0; display: none; gap: var(--space-s); }
.nav-link { color: #996733; font-size: var(--text-s); font-family: 'Open Sans'; text-decoration: none; padding: 0.3125rem 0; display: inline-block; transition: color 0.2s ease; font-weight: 600; }
.nav-link:hover, .nav-link:focus { color: var(--primary-dark); }
.nav-toggle { background: none; border: none; padding: 0.15625rem; cursor: pointer; display: none; flex-direction: column; gap: 0.15625rem; margin-left: var(--space-s); }
.nav-toggle-bar { width: 24px; height: 2px; background: var(--primary); transition: transform 0.2s ease, opacity 0.2s ease; }

@media screen and (max-width: 900px) {
    .menu-wrapper { position: relative; z-index: 100; }
    .nav-toggle { display: flex; position: relative; z-index: 300; }
    .nav-list {
        position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 80vw); background: #fff; flex-direction: column; padding-top: 15%;
        padding-inline: var(--section-padding-x); box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15); z-index: 200; padding-left: var(--space-m); padding-right: var(--space-m);
    }
    .nav-item { border-top: 1px solid rgba(0,0,0,0.05); }
    .nav-link { padding: 0.46875rem 0; width: 100%; }
    .nav-wrapper.nav-open .nav-list { display: flex; }
    .nav-wrapper.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(4px) rotate(45deg); }
    .nav-wrapper.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
    .nav-wrapper.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }
}
@media screen and (min-width: 901px) { .nav-toggle { display: none; } .nav-list { display: flex; position: static; background: transparent; } }

.menu-container { display: flex; align-items: center; justify-content: space-between; width: var(--content-width); padding-left: var(--gutter); padding-right: var(--gutter); }
.kontakt-container { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xxl); }
.kontakt-grid { display: grid; grid-template-columns: var(--grid-2-3); gap: var(--space-xxl); width: min(1100px, 95%); }
@media (max-width:1023px) { .kontakt-grid { grid-template-columns: var(--grid-1); } }
.kontakt-grid-left { display: flex; flex-direction: column; gap: var(--space-m); }
.kontakt-adresse { font-size: var(--text-s); color: var(--primary-dark); font-weight: 400; line-height: 1.4; font-style: normal; }
.h4-headline { color: var(--primary-dark); font-weight: 600; font-size: var(--text-l); }
.kontakt-stars { max-width: 6.25rem; /* 10rem / 1.6 */ }

/* Formular */
.form { max-width: 760px; display: flex; flex-direction: column; gap: var(--space-m); }
.form__title { margin: 0 0 var(--space-s); font-size: var(--text-l); font-weight: 700; color: var(--primary-dark); }
.field { display: flex; flex-direction: column; gap: 0.5rem; /* .8rem / 1.6 */ }
.field__label { font-size: var(--text-s); font-weight: 700; color: var(--primary-dark); }
.field__control { width: 100%; font-size: var(--text-s); padding: var(--space-s); border-radius: var(--radius-l); border: 1px solid #d5d5d5; background: #fff; }
.field__control::placeholder { font-size: var(--text-xs); color: #a8a8a8; }
.field__control--textarea { min-height: 13.75rem; /* 220px / 16 */ resize: vertical; }
.check { display: grid; grid-template-columns: 22px 1fr; gap: var(--space-s); align-items: start; }
.check__box { width: 22px; height: 22px; margin-top: 2px; }
.check__label { font-size: var(--text-xs); line-height: 1.5; color: #444; }
.btn { align-self: flex-start; margin-top: var(--space-s); padding: var(--space-s) var(--space-m); font-size: var(--text-s); font-weight: 700; border-radius: var(--radius-m); border: none; background: var(--primary-dark); color: #fff; cursor: pointer; }

.home-hero-section { padding-top: 0; background-color: #FFFDF8; }
.bg-base { background-color: #FFFDF8; }

/* Footer */
.site-footer { background-color: var(--primary-dark); color: var(--white); border-top: 1px solid rgba(255,255,255,0.25); }
.site-footer__container { width: 100%; max-width: var(--content-width); margin-inline: auto; padding-inline: var(--gutter); padding-block: var(--space-m); }
.site-footer__inner { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr; column-gap: var(--space-xxl); row-gap: var(--space-m); align-items: end; justify-content: space-between; }
.site-footer__text { font-size: var(--text-xs); line-height: 1.45; color: rgba(255,255,255,0.95); }
.site-footer__label { font-weight: 700; }
.site-footer__link { display: inline-block; margin-top: var(--space-xs); font-size: var(--text-xs); font-weight: 700; color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.site-footer__col--nav { justify-self: end; display: flex; align-items: flex-end; }
.site-footer__nav { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-m); justify-content: flex-end; align-items: flex-end; text-align: right; font-size: var(--text-s) !important; }
.site-footer__nav-link { font-size: var(--text-xs); font-weight: 700; color: var(--white); text-decoration: none; padding: 0.125rem 0; /* 0.2rem / 1.6 */ }

@media (max-width: 900px){
    .site-footer__inner { grid-template-columns: 1fr; row-gap: var(--space-s); }
    .site-footer__col--nav { justify-self: start; align-items: flex-start; }
    .site-footer__nav { justify-content: flex-start; text-align: left; gap: var(--space-s); }
}

.fuxbau-illu { max-width: min(21.875rem, 95%); } /* 35rem / 1.6 */
.hero-divider { display: inline-block; width: 1px; height: 1.25em; background-color: var(--primary-dark); margin: 0 0.75rem; /* 12px / 16 */ }
.slider-icon { color: var(--primary); width: var(--text-xxl); height: var(--text-xxl); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.standard-content-container { display: flex; gap: var(--space-m); flex-direction: column; }
.galerie-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); gap: var(--space-xs); row-gap: var(--space-xs); }
.galerie-grid figure { margin: 0px !important; }
.hero-btn-wrapper { display: flex; flex-direction: column; gap: var(--space-xs); }

.btn-outline {
    background: transparent; color: var(--primary); padding: 1rem 2rem; width: fit-content; min-width: 15rem; /* 240px / 16 */
    outline: 2px solid var(--primary); border-radius: var(--radius-xs); font-size: var(--text-s); font-weight: 600;
}
.btn-outline:hover { background: var(--primary); color: var(--white); }