/* =========================
   BREMER PARALL-LOCKERER
   ========================= */


/* =========================
   FONTS
   ========================= */

@font-face {
    font-family: "Barlow";
    src: url("fonts/Barlow-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Barlow";
    src: url("fonts/Barlow-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Barlow";
    src: url("fonts/Barlow-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Barlow Semi Condensed";
    src: url("fonts/BarlowSemiCondensed-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Barlow Semi Condensed";
    src: url("fonts/BarlowSemiCondensed-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Barlow Semi Condensed";
    src: url("fonts/BarlowSemiCondensed-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* =========================
   BASIS
   ========================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family: var(--bremer-body-font, "Barlow",
        Arial,
        Helvetica,
        sans-serif);

    color: #f4f6f7;
    background: #1b2025;
}


/* =========================
   HEADER
   ========================= */

header {
    position: relative;
    height: 142px;

    padding: 0 5%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: #101d29;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}


/* =========================
   LOGO
   ========================= */

.logo {
    display: flex;
    align-items: center;

    text-decoration: none;
}

.logo img {
    display: block;

    width: 295px;
    height: auto;
}


/* =========================
   NAVIGATION
   ========================= */

nav {
    display: flex;
    align-items: center;

    gap: 46px;
}

nav a {
    font-family: var(--bremer-nav-font, "Barlow",
        Arial,
        Helvetica,
        sans-serif);

    color: #f4f6f7;

    text-decoration: none;

    font-size: var(--bremer-nav-size, 16px);
    font-weight: var(--bremer-nav-weight, 500);

    text-transform: uppercase;

    letter-spacing: 0.09em;

    white-space: nowrap;

    transition:
        opacity 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

nav a:hover {
    opacity: 0.65;
}


/* =========================
   BERATUNGSBUTTON NAVIGATION
   ========================= */

nav .nav-beratung {
    font-family: var(--bremer-button-font, "Barlow Semi Condensed",
        "Barlow",
        Arial,
        Helvetica,
        sans-serif);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-left: 8px;

    padding: 15px 24px;

    background: #0077c8;
    color: #ffffff;

    font-size: var(--bremer-button-size, 15px);
    font-weight: var(--bremer-button-weight, 600);

    letter-spacing: 0.09em;

    text-transform: uppercase;

    border-radius: 2px;

    opacity: 1;
}

nav .nav-beratung:hover {
    background: #1593d1;

    opacity: 1;

    transform: translateY(-1px);
}


/* =========================
   HERO
   ========================= */

main.hero-parallax {
    position: relative;

     height: 43vw;

    display: flex;
    align-items: center;

    overflow: hidden;

    background-image: none;
}


/* bewegte Hintergrundebene */

main.hero-parallax::before {
    content: "";

    position: absolute;
    z-index: 0;

    /* Horizontal unverändert vollflächig.
       Nur oben/unten Reserve für den Parallax-Weg. */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background-image: url("bremer_parall_hero_studio_dark_3840.jpg");
    background-size: auto 100%;
    background-position: center top;
    background-repeat: no-repeat;

    transform:
        translate3d(0, var(--hero-parallax-y, 0px), 0)
        scale(calc(var(--hero-parallax-scale, 1) * var(--hero-cinematic-zoom, 1)));

    transform-origin: center center;

    will-change: transform;

    pointer-events: none;
}



/* DESKTOP HERO – CINEMATIC ZOOM */
@media (min-width: 851px) {
    @property --hero-cinematic-zoom {
        syntax: "<number>";
        inherits: true;
        initial-value: 1;
    }

    @keyframes desktopHeroZoom {
        from {
            --hero-cinematic-zoom: 1;
        }
        to {
            --hero-cinematic-zoom: 1.20;
        }
    }

    main.hero-parallax {
        animation: desktopHeroZoom 12s ease-in-out infinite alternate;
    }

    @media (prefers-reduced-motion: reduce) {
        main.hero-parallax {
            animation: none;
        }
    }
}


/* =========================
   HERO TEXTBEREICH
   ========================= */

main section {
    position: relative;

    z-index: 2;

    width: 48%;

    padding-left: 4.5vw;
    padding-right: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    transform: translateY(0%);

    color: #f4f6f7;

    background: transparent;
}

/* HERO – Textblock nur auf Desktop absenken */
@media (min-width: 601px) {
    .hero-parallax > section {
        transform: translateY(40px);
    }
}


/* =========================
   KICKER
   BREMER PARALL-LOCKERER
   ========================= */

main section > p:first-child {
    margin: 0 0 30px;

    font-family: var(--bremer-kicker-font, "Barlow",
        Arial,
        Helvetica,
        sans-serif);

    color: var(--bremer-kicker-color, #009fe3);

    font-size: var(--bremer-kicker-size, 18px);
    font-weight: var(--bremer-kicker-weight, 600);

    line-height: var(--bremer-kicker-line-height, 1);

    letter-spacing: var(--bremer-kicker-letter-spacing, 0.46em);

    text-transform: uppercase;
}

/* =========================
   HEADLINE
   ========================= */

h1 {
    margin: 0;

    max-width: 800px;

    font-family: var(--bremer-display-font, "Barlow Semi Condensed",
        "Barlow",
        Arial,
        Helvetica,
        sans-serif);

    font-size: var(--bremer-display-size, clamp(68px, 5.7vw, 98px));

    line-height: var(--bremer-display-line-height, 0.96);

    letter-spacing: var(--bremer-display-letter-spacing, -0.02em);

    font-weight: var(--bremer-display-weight, 600);

    color: #f4f6f7;
}



/* =========================
   HERO FLIESSTEXT
   ========================= */

h1 + p {
    max-width: 540px;

    /* vorher 36px */
    margin: 40px 0 0;

    font-family: var(--bremer-body-font, "Barlow",
        Arial,
        Helvetica,
        sans-serif);

    color: #aeb7be;

    /* vorher 18px */
    font-size: var(--bremer-intro-size, 20px);
    font-weight: 400;

    line-height: 1.6;
}

/* ==================================
   HERO – TEXT FADE-IN
   ================================== */

.hero-parallax .hero-kicker,
.hero-parallax h1,
.hero-parallax h1 + p,
.hero-parallax button {
    opacity: 0;
    transform: translateY(8px);

    transition:
        opacity 1.8s ease,
        transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Headline besonders sanft */

.hero-parallax h1 {
    transform: translateY(4px);

    transition:
        opacity 2.6s ease-in-out,
        transform 2.6s ease-out;
}

/* Sichtbarer Zustand */

.hero-parallax .hero-kicker.is-visible,
.hero-parallax h1.is-visible,
.hero-parallax h1 + p.is-visible,
.hero-parallax button.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Barrierefreiheit */

@media (prefers-reduced-motion: reduce) {
    .hero-parallax .hero-kicker,
    .hero-parallax h1,
    .hero-parallax h1 + p,
    .hero-parallax button {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =========================
   HERO BUTTON
   ========================= */

button {
    align-self: flex-start;

    margin-top: 38px;

    /* vorher 17px 25px */
    padding: 19px 28px;

    border: 0;

    border-radius: 2px;

    background: #0077c8;
    color: #ffffff;

    font-family: var(--bremer-button-font, "Barlow Semi Condensed",
        "Barlow",
        Arial,
        Helvetica,
        sans-serif);

    /* vorher 15px */
    font-size: var(--bremer-button-size, 16px);
    font-weight: var(--bremer-button-weight, 600);

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

button:hover {
    background: #1593d1;

    transform: translateY(-2px);
}


/* =========================================================
   ABSCHNITT 2
   BODENAUFBRUCH OHNE WENDEN
   ========================================================= */

.bodenaufbruch {
    position: relative;

    margin-top: -2px;

    min-height: 900px;

    overflow: hidden;

    color: #0b2135;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #ffffff 31%,
            rgba(255, 255, 255, 0.97) 36%,
            rgba(255, 255, 255, 0.82) 42%,
            rgba(255, 255, 255, 0.30) 49%,
            rgba(255, 255, 255, 0.00) 56%
        );

    background-size: cover;
    background-position:
    center calc(50% + var(--boden-parallax-y, 0px));
    background-repeat: no-repeat;
}

.bodenaufbruch::before {
  content: "";
  position: absolute;
  inset: 0;

  background-image: url("/parallockerer/bremer_parall_bodenbearbeitung.jpg");
  background-size: cover;
  background-position: 65% calc(50% + var(--boden-parallax-y, 0px));
  background-repeat: no-repeat;

  transform: scale(var(--boden-parallax-scale, 1));
  transform-origin: center;

  z-index: 0;
  pointer-events: none;
}

/* =========================
   ABSCHNITT 2
   INHALT LINKS
   ========================= */

.bodenaufbruch-inhalt {
    position: relative;

    z-index: 2;

    width: 44%;

    padding: 105px 0 115px 7vw;
}


/* =========================
   ABSCHNITT 2
   KICKER
   ========================= */

.bodenaufbruch-kicker {
    margin: 0 0 18px;

    font-family: var(--bremer-kicker-font, "Barlow",
        Arial,
        Helvetica,
        sans-serif);

  color: var(--bremer-kicker-color, #0077c8);

    /* GEÄNDERT: 17px → 18px */
    font-size: var(--bremer-kicker-size, 18px);
    font-weight: var(--bremer-kicker-weight, 600);

    line-height: var(--bremer-kicker-line-height, 1);

    /* GEÄNDERT: 0.32em → 0.42em */
    letter-spacing: var(--bremer-kicker-letter-spacing, 0.42em);

    text-transform: uppercase;
}


/* =========================
   ABSCHNITT 2
   HAUPTÜBERSCHRIFT
   ========================= */

.bodenaufbruch h2 {
    margin: 0;

    /* GEÄNDERT: 560px → 650px */
    max-width: 650px;

    font-family: var(--bremer-display-font, "Barlow Semi Condensed",
        "Barlow",
        Arial,
        Helvetica,
        sans-serif);

    color: #071c2f;

    /* GEÄNDERT: clamp(62px, 5vw, 86px)
       → clamp(68px, 5.7vw, 98px) */
    font-size: var(--bremer-display-size, clamp(68px, 5.7vw, 98px));

    font-weight: var(--bremer-display-weight, 700);

    line-height: var(--bremer-display-line-height, 0.96);

    letter-spacing: var(--bremer-display-letter-spacing, -0.02em);
}


/* =========================
   BLAUE TRENNLINIE
   ========================= */

.bodenaufbruch-linie {
    width: 36px;
    height: 2px;

    margin-top: 27px;

    background: #087ef5;
}


/* =========================
   META / AUTOR
   ========================= */

.bodenaufbruch-meta {
    margin: 22px 0 0;

    max-width: 560px;

    color: #20374d;

    font-size: 17px;
    font-weight: 400;

    line-height: 1.5;
}


/* =========================
   EINLEITUNG
   ========================= */

.bodenaufbruch-einleitung {
    margin: 19px 0 0;

    max-width: 555px;

    color: #263d52;

    font-size: 20px;
    font-weight: 400;

    line-height: 1.45;
}


/* =========================
   ZWEITES TEXTTHEMA
   ========================= */

.bodenaufbruch-thema {
    margin-top: 50px;

    max-width: 555px;
}


/* =========================
   NUMMER 02
   ========================= */

.bodenaufbruch-nummer {
    display: block;

    margin-bottom: 7px;

    color: #087ef5;

    font-size: 18px;
    font-weight: 600;

    line-height: 1;
}


/* =========================
   ZWISCHENÜBERSCHRIFT
   ========================= */

.bodenaufbruch h3 {
    margin: 0;

    font-family: var(--bremer-sub-font, "Barlow Semi Condensed",
        "Barlow",
        Arial,
        Helvetica,
        sans-serif);

    color: #071c2f;

    font-size: var(--bremer-sub-size, 44px);
    font-weight: var(--bremer-sub-weight, 600);

    line-height: var(--bremer-sub-line-height, 1.05);

    letter-spacing: var(--bremer-sub-letter-spacing, -0.015em);
}

.bodenaufbruch-thema .bodenaufbruch-linie {
    margin-top: 17px;
}


/* =========================
   TEXT ABSCHNITT 02
   ========================= */

.bodenaufbruch-thema p {
    margin: 17px 0 0;

    max-width: 540px;

    color: #263d52;

    font-size: var(--bremer-body-size, 19px);
    font-weight: 400;

    line-height: 1.45;
}


/* =========================
   MEHR-ERFAHREN-BUTTON
   ========================= */

.bodenaufbruch-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 20px;

    margin-top: 75px;

    padding: 14px 27px;

    background: #087ef5;
    color: #ffffff;

    border-radius: 100px;

    font-family: var(--bremer-button-font, "Barlow",
        Arial,
        Helvetica,
        sans-serif);

    font-size: var(--bremer-button-size, 14px);
    font-weight: var(--bremer-button-weight, 600);

    letter-spacing: 0.18em;

    text-decoration: none;
    text-transform: uppercase;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.bodenaufbruch-button span {
    font-size: 22px;
    font-weight: 400;

    line-height: 0;
}

.bodenaufbruch-button:hover {
    background: #1593d1;

    transform: translateY(-2px);
}

/* =========================
   ABSCHNITT 2
   SCROLL REVEAL
   ========================= */

.bodenaufbruch-reveal {
    opacity: 0;
transform: translateY(8px);

transition:
    opacity 1.8s ease,
    transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);

    transition-delay: 0ms;
}

.bodenaufbruch-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ABSCHNITT 2 – HEADLINE SANFTER EINBLENDEN */

.bodenaufbruch h2.bodenaufbruch-reveal {
    transform: translateY(4px);

    transition:
        opacity 2.6s ease-in-out,
        transform 2.6s ease-out;
}

.bodenaufbruch h2.bodenaufbruch-reveal.is-visible {
    transform: translateY(0);
}

/* =========================================================
   ABSCHNITT 2
   MOBILE
   ========================================================= */

@media (max-width: 850px) {

    .bodenaufbruch {
        min-height: auto;

        padding-top: 390px;

        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.00) 0%,
                rgba(255, 255, 255, 0.00) 55%,
                rgba(255, 255, 255, 0.88) 78%,
                #ffffff 100%
            ),
            url("/parallockerer/bremer_parall_bodenbearbeitung.jpg");

        background-size: auto 500px;
        background-position: 65% top;
        background-repeat: no-repeat;

        background-color: #ffffff;
    }

    .bodenaufbruch-inhalt {
        width: 100%;

        padding: 55px 24px 65px;
    }

    .bodenaufbruch-kicker {
        font-size: 13px;

        letter-spacing: 0.28em;
    }

    .bodenaufbruch h2 {
        max-width: 100%;

        font-size: clamp(48px, 13vw, 64px);
    }

    .bodenaufbruch-meta {
        font-size: 15px;
    }

    .bodenaufbruch-einleitung {
        max-width: 100%;

        font-size: 17px;
    }

    .bodenaufbruch-thema {
        max-width: 100%;

        margin-top: 45px;
    }

    .bodenaufbruch h3 {
        font-size: 36px;
    }

    .bodenaufbruch-thema p {
        max-width: 100%;

        font-size: 17px;
    }
}

/* =========================================================
   ABSCHNITT 3
   DAS BREMER PRINZIP
   ========================================================= */

.bremer-prinzip {
    width: 100%;

    padding: 90px 7% 100px;

    background: #CFD9E0;
    color: #102638;
}


.bremer-prinzip-inhalt {
    width: 100%;
    max-width: 1680px;

    margin: 0 auto;

    text-align: center;
}


/* =========================
   KICKER
   ========================= */

.bremer-prinzip-kicker {
    margin: 0;
    text-align: center;

    font-family: var(--bremer-kicker-font, "Barlow",
        Arial,
        Helvetica,
        sans-serif);

    color: var(--bremer-kicker-color, #0077c8);

    font-size: var(--bremer-kicker-size, 18px);
    font-weight: var(--bremer-kicker-weight, 600);

    line-height: var(--bremer-kicker-line-height, 1);

    letter-spacing: var(--bremer-kicker-letter-spacing, 0.12em);

    text-transform: uppercase;
}


.bremer-prinzip-linie {
    width: 170px;
    height: 2px;

    margin: 16px auto 54px;

    background: #009fe3;
}


/* =========================
   HEADLINE
   ========================= */

.bremer-prinzip-headline {
    margin: 0;

    font-family: var(--bremer-display-font, "Barlow Semi Condensed",
        "Barlow",
        Arial,
        Helvetica,
        sans-serif);

    color: #102638;

    font-size: var(--bremer-display-size, clamp(64px, 5.2vw, 94px));
    font-weight: var(--bremer-display-weight, 600);

    line-height: var(--bremer-display-line-height, 1);

    letter-spacing: var(--bremer-display-letter-spacing, -0.015em);
}


/* =========================
   EINLEITUNG
   ========================= */

.bremer-prinzip-einleitung {
    max-width: 1420px;

    margin: 48px auto 0;

    font-family: "Barlow",
        Arial,
        Helvetica,
        sans-serif;

    color: #263b4b;

    font-size: 20px;
    font-weight: 400;

    line-height: 1.55;
}

/* =========================================================
   BREMER PRINZIP – ANIMATION / DESKTOP
   ========================================================= */

@media (min-width: 851px) {

    .bremer-prinzip-video-wrap {
        width: 85%;
        margin: 64px auto 0;
        padding: 10px;

        background: #172b3a;
        border: 1px solid #304657;
        border-radius: 6px;

        box-sizing: border-box;
    }

    .bremer-prinzip-video {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 2px;
    }

    /* Erklärungsspalten näher an die Animation */

    .bremer-prinzip-schritte {
        margin-top: 48px;
        gap: 48px;
    }

    .bremer-prinzip-schritt h3 {
        margin-top: 0;
    }

}

/* =========================================================
   BREMER PRINZIP – ANIMATION / MOBILE
   ========================================================= */

@media (max-width: 850px) {

    .bremer-prinzip-video-wrap {
        width: 100%;
        max-width: 100%;
        margin: 36px auto 0;
        padding: 5px;

        background: #172b3a;
        border: 1px solid #304657;
        border-radius: 6px;
        box-sizing: border-box;
    }

    .bremer-prinzip-video {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        border-radius: 2px;
    }
}

/* =========================================================
   BREMER PRINZIP – TEXTBLÖCKE / MOBILE
   ========================================================= */

@media (max-width: 850px) {

    .bremer-prinzip-schritte {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 28px;
        padding: 0;
    }

    .bremer-prinzip-schritt {
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 18px 22px 28px;
    box-sizing: border-box;
    border: none;
    }

    /* Helle Trennlinien zwischen den Schritten */

    .bremer-prinzip-schritt + .bremer-prinzip-schritt {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.22);
    }

    .bremer-prinzip-schritt h3 {
        margin: 0;
        font-size: 23px;
        line-height: 1.2;
    }

    .bremer-prinzip-schritt p {
        margin: 14px auto 0;
        font-size: 17px;
        line-height: 1.5;
    }
}

/* =========================
   DREI SCHRITTE
   ========================= */

.bremer-prinzip-schritte {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 0;

    margin-top: 36px;
    background: #102638;
    border-radius: 8px;
    overflow: hidden;
}


/* BREMER PRINZIP – DYNAMISCHER INFORMATIONSBALKEN */

.bremer-prinzip-dynamisch {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 24px;
    min-height: 170px;
    gap: 0;
}

.bremer-prinzip-dynamisch .bremer-prinzip-phase {
    display: none;
    text-align: center;
}

.bremer-prinzip-dynamisch .bremer-prinzip-phase.is-active {
    display: block;
}

.bremer-prinzip-dynamisch h3 {
    margin: 0;
    color: #009fe3;
    font-size: 25px;
    font-weight: 700;
}

.bremer-prinzip-dynamisch p {
    margin: 14px 0 0;
    color: #e1eaf0;
    font-size: 17px;
    line-height: 1.5;
}

.bremer-prinzip-fortschritt {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
}

.bremer-prinzip-fortschritt span {
    width: 38px;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.bremer-prinzip-fortschritt span.is-active {
    background: #20a7ed;
}

/* BREMER PRINZIP – INFORMATIONSBALKEN / MOBILE */

@media (max-width: 850px) {
    .bremer-prinzip-dynamisch {
        padding: 20px 18px;
        min-height: 135px;
    }

    .bremer-prinzip-dynamisch h3 {
        font-size: 20px;
    }

    .bremer-prinzip-dynamisch p {
        font-size: 15px;
        margin-top: 10px;
    }

    .bremer-prinzip-fortschritt {
        margin-top: 16px;
    }
}


/* einzelne Spalten */
.bremer-prinzip-schritt {
    min-width: 0;
    padding: 34px 34px 30px;
    text-align: center;
}


/* helle Trennlinien zwischen den 3 Feldern */
.bremer-prinzip-schritt:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.18);
}


/* die kleinen Bilder im Textblock ausblenden */
.bremer-prinzip-schritt img {
    display: none;
}


/* =========================
   SCHRITT HEADLINES
   ========================= */

.bremer-prinzip-schritt h3 {
    margin: 0;

    font-family: var(--bremer-sub-font, "Barlow Semi Condensed",
        "Barlow",
        Arial,
        Helvetica,
        sans-serif);

    color: #ffffff;

    font-size: var(--bremer-sub-size, 25px);
    font-weight: var(--bremer-sub-weight, 700);

    line-height: var(--bremer-sub-line-height, 1.15);
    text-transform: uppercase;
}


/* =========================
   SCHRITT TEXTE
   ========================= */

.bremer-prinzip-schritt p {
    max-width: 430px;
    margin: 22px auto 0;

    font-family: var(--bremer-body-font, "Barlow",
        Arial,
        Helvetica,
        sans-serif);

    color: rgba(255, 255, 255, 0.82);

    font-size: var(--bremer-body-size, 18px);
    font-weight: 400;

    line-height: 1.55;
}



/* =========================================================
   ABSCHNITT 3 / MOBILE
   ========================================================= */

@media (max-width: 850px) {

  
    @media (max-width: 850px) {

    .bremer-prinzip-schritt {
        padding: 18px 22px 28px;
    }

    .bremer-prinzip-schritt h3 {
        color: #009fe3;
    }

    .bremer-prinzip {
        padding: 70px 24px 80px;
    }
    .bremer-prinzip {
        padding: 70px 24px 80px;
    }


    .bremer-prinzip-kicker {
        font-size: 14px;

        letter-spacing: 0.12em;
    }


    .bremer-prinzip-linie {
        width: 190px;

        margin-top: 14px;
        margin-bottom: 38px;
    }


   .bremer-prinzip-headline {
    font-size: clamp(35px, 9.5vw, 43px);
    line-height: 1.08;
    font-weight: 800;
}


    .bremer-prinzip-einleitung {
    max-width: 620px;
    margin-top: 32px;
    font-size: 17px;
    line-height: 1.55;
    text-align: center;
}


 .bremer-prinzip-schritte {
    grid-template-columns: 1fr;

    gap: 0;

    margin-top: 28px;
}


    .bremer-prinzip-schritt {
        max-width: 620px;

        margin: 0 auto;
    }


    .bremer-prinzip-schritt h3 {
    margin-top: 28px;
    font-size: 25px;
    text-align: center;
}


    .bremer-prinzip-schritt p {
    margin-top: 18px;
    font-size: 17px;
    text-align: center;
}

.bremer-prinzip-mehr .bodenaufbruch-button {
    margin-top: 15px;
}
}
}


.bremer-prinzip-headline {
    font-size: var(--bremer-display-size, clamp(35px, 9.5vw, 43px));
    line-height: var(--bremer-display-line-height, 1.08);
    font-weight: var(--bremer-display-weight, 800);
    text-align: center;
}


/* ABSCHNITT 3 – SANFTES EINBLENDEN */

.prinzip-reveal {
    opacity: 0;
    transform: translateY(18px);

    transition:
    opacity 2.2s ease-in-out,
    transform 2.2s ease-out;
}

.prinzip-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .prinzip-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
  



/* =========================================================
   ABSCHNITT 4
   ARBEITSTIEFE NACH BEDARF
   ========================================================= */

.arbeitstiefe {
    width: 100%;
    min-height: 720px;

    padding: 0;

    background: #101d29;
    color: #ffffff;

    overflow: hidden;
}


.arbeitstiefe-inhalt {
    width: 100%;
    min-height: 720px;

    margin: 0;

    display: grid;
    grid-template-columns: 44% 56%;

    align-items: stretch;
}


/* =========================
   TEXT
   ========================= */

.arbeitstiefe-text {
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 100px 8% 100px 14%;
}


.arbeitstiefe-kicker {
    margin: 0;

    font-family: var(--bremer-kicker-font, "Barlow",
        Arial,
        Helvetica,
        sans-serif);

    color: var(--bremer-kicker-color, #0077c8);

    font-size: var(--bremer-kicker-size, 18px);
    font-weight: var(--bremer-kicker-weight, 600);

    line-height: var(--bremer-kicker-line-height, 1);

    letter-spacing: var(--bremer-kicker-letter-spacing, 0.12em);
    text-transform: uppercase;
}


.arbeitstiefe-headline {
    margin: 30px 0 0;

    font-family: var(--bremer-display-font, "Barlow Semi Condensed",
        "Barlow",
        Arial,
        Helvetica,
        sans-serif);

    color: #ffffff;

    font-size: var(--bremer-display-size, clamp(54px, 4.2vw, 78px));
    font-weight: var(--bremer-display-weight, 600);

    line-height: var(--bremer-display-line-height, 1.02);
    letter-spacing: var(--bremer-display-letter-spacing, -0.015em);
}


.arbeitstiefe-linie {
    width: 32px;
    height: 2px;

    margin: 30px 0 0;

    background: #0077c8;
}


.arbeitstiefe-einleitung {
    max-width: 560px;

    margin: 30px 0 0;

    font-family: "Barlow",
        Arial,
        Helvetica,
        sans-serif;

    color: #c3ccd3;

    font-size: 18px;
    font-weight: 400;

    line-height: 1.55;
}


/* =========================
   BILD
   ========================= */

.arbeitstiefe-bild {
    min-width: 0;
    position: relative;

    overflow: hidden;
}


.arbeitstiefe-bild img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* sanfter Übergang vom dunklen Bereich ins Bild */

.arbeitstiefe-bild::before {
    content: "";

    position: absolute;
    z-index: 1;

    top: 0;
    bottom: 0;
    left: 0;

    width: 22%;

    pointer-events: none;

    background: linear-gradient(
        to right,
        #101d29 0%,
        rgba(16, 29, 41, 0.92) 20%,
        rgba(16, 29, 41, 0.55) 55%,
        rgba(16, 29, 41, 0) 100%
    );
}


/* =========================================================
   ABSCHNITT 4 / MOBILE
   ========================================================= */

@media (max-width: 850px) {

    .arbeitstiefe {
        min-height: 0;
    }


    .arbeitstiefe-inhalt {
        min-height: 0;

        grid-template-columns: 1fr;
    }


    .arbeitstiefe-text {
        padding: 70px 24px 60px;
    }


    .arbeitstiefe-kicker {
        font-size: 14px;
        letter-spacing: 0.12em;
    }


    .arbeitstiefe-headline {
        margin-top: 24px;

        font-size: clamp(46px, 12vw, 64px);
        line-height: 1.02;
    }


    .arbeitstiefe-linie {
        margin-top: 24px;
    }


    .arbeitstiefe-einleitung {
        max-width: 620px;

        margin-top: 24px;

        font-size: 17px;
        line-height: 1.55;
    }


    .arbeitstiefe-bild {
        min-height: 420px;
    }


    .arbeitstiefe-bild img {
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;
    }


    .arbeitstiefe-bild::before {
        display: none;
    }
}

/* =========================================================
   ABSCHNITT 4
   ARBEITSTIEFE NACH BEDARF
   ========================================================= */

.arbeitstiefe {
    width: 100%;
    padding: 0;

    background: #101d29;
    color: #ffffff;
}


.arbeitstiefe-inhalt {
    width: 100%;

    display: grid;
    grid-template-columns: 44% 56%;

    align-items: stretch;
}


/* =========================
   TEXT
   ========================= */

.arbeitstiefe-text {
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 100px 8% 100px 14%;
}


.arbeitstiefe-kicker {
    margin: 0;

    font-family: var(--bremer-kicker-font, "Barlow",
        Arial,
        Helvetica,
        sans-serif);

    color: var(--bremer-kicker-color, #0077c8);

    font-size: var(--bremer-kicker-size, 18px);
    font-weight: var(--bremer-kicker-weight, 600);

    line-height: var(--bremer-kicker-line-height, 1);

    letter-spacing: var(--bremer-kicker-letter-spacing, 0.12em);
    text-transform: uppercase;
}


.arbeitstiefe-headline {
    margin: 30px 0 0;

    font-family: var(--bremer-display-font, "Barlow Semi Condensed",
        "Barlow",
        Arial,
        Helvetica,
        sans-serif);

    color: #ffffff;

    font-size: var(--bremer-display-size, clamp(54px, 4.2vw, 78px));
    font-weight: var(--bremer-display-weight, 600);

    line-height: var(--bremer-display-line-height, 1.02);
    letter-spacing: var(--bremer-display-letter-spacing, -0.015em);
}


.arbeitstiefe-linie {
    width: 32px;
    height: 2px;

    margin: 30px 0 0;

    background: #0077c8;
}


.arbeitstiefe-einleitung {
    max-width: 560px;

    margin: 30px 0 0;

    font-family: "Barlow",
        Arial,
        Helvetica,
        sans-serif;

    color: #c3ccd3;

    font-size: 18px;
    font-weight: 400;

    line-height: 1.55;
}


/* =========================
   BILD
   ========================= */

.arbeitstiefe-bild {
    min-width: 0;
    position: relative;

    overflow: hidden;
}


.arbeitstiefe-bild img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* sanfter Übergang vom dunklen Hintergrund ins Bild */

.arbeitstiefe-bild::before {
    content: "";

    position: absolute;
    z-index: 1;

    top: 0;
    bottom: 0;
    left: 0;

    width: 20%;

    pointer-events: none;

    background: linear-gradient(
        to right,
        #101d29 0%,
        rgba(16, 29, 41, 0.82) 30%,
        rgba(16, 29, 41, 0) 100%
    );
}


/* =========================================================
   HOTSPOTS
   ========================================================= */

.hotspot {
    position: absolute;
    z-index: 4;

    width: 46px;
    height: 46px;

    padding: 0;

    border: 3px solid #ffffff;
    border-radius: 50%;

    background: #0077c8;
    color: #ffffff;

    font-family: "Barlow",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 18px;
    font-weight: 600;

    line-height: 40px;
    text-align: center;

    cursor: pointer;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}


/* =========================
   HOTSPOT 01
   PFLUGSOHLE / CA. 30 CM
   ========================= */

.hotspot-01 {
    /*
       Position auf Höhe der Pflugsohle
       beim linken Zinken
    */

    left: 31%;
    top: 57%;

    transform: translate(-50%, -50%);
}


/* =========================
   HOTSPOT 02
   TIEFE FAHRGASSENSCHÄDEN
   ========================= */

.hotspot-02 {
    /*
       Position im tiefen Arbeitsbereich
       beim rechten Zinken
    */

    left: 79%;
    top: 67%;

    transform: translate(-50%, -50%);
}


/* =========================
   HOTSPOT 03
   STUFENLOSE TIEFENVERSTELLUNG
   ========================= */

.hotspot-03 {
    /*
       Position direkt am linken Zinken,
       im Bereich der Tiefenverstellung
    */

    left: 64%;
    top: 20%;

    transform: translate(-50%, -50%);
}

/* =========================
   INFOFENSTER
   ========================= */

.hotspot-info {
    position: absolute;
    z-index: 5;

    width: 310px;

    padding: 24px 26px 26px;

    background: rgba(16, 29, 41, 0.96);

    border-left: 3px solid #0077c8;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.30);

    color: #ffffff;

    opacity: 0;
    visibility: hidden;

    transform: translateY(8px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;

    pointer-events: none;
}


/* Infofenster Hotspot 01 */

.hotspot-info-01 {
    left: 36%;
    top: 52%;
}


/* Infofenster Hotspot 02 */

.hotspot-info-02 {
    left: 58%;
    top: 58%;
}

/* Infofenster Hotspot 03 */

.hotspot-info-03 {
    left: 35%;
    top: 39%;
}

/* =========================
   INFOFENSTER TYPOGRAFIE
   ========================= */

.hotspot-info-nummer {
    display: block;

    margin-bottom: 10px;

    font-family: "Barlow",
        Arial,
        Helvetica,
        sans-serif;

    color: #0077c8;

    font-size: 16px;
    font-weight: 600;

    letter-spacing: 0.08em;
}


.hotspot-info h3 {
    margin: 0;

    font-family: "Barlow Semi Condensed",
        "Barlow",
        Arial,
        Helvetica,
        sans-serif;

    color: #ffffff;

    font-size: 23px;
    font-weight: 700;

    line-height: 1.1;
}


.hotspot-info p {
    margin: 16px 0 0;

    font-family: var(--bremer-body-font, "Barlow",
        Arial,
        Helvetica,
        sans-serif);

    color: #d4dce2;

    font-size: var(--bremer-body-size, 17px);
    font-weight: 400;

    line-height: 1.5;
}


/* =========================================================
   INFO ANZEIGEN
   ========================================================= */


/* =========================
   HOTSPOT 01
   ========================= */

.hotspot-01:hover + .hotspot-info-01,
.hotspot-01:focus + .hotspot-info-01 {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


/* Position von Hotspot 01 beim Hover beibehalten */

.hotspot-01:hover,
.hotspot-01:focus,
.hotspot-01:active {
    transform: translate(-50%, -50%);
}


/* =========================
   HOTSPOT 02
   ========================= */

.hotspot-02:hover + .hotspot-info-02,
.hotspot-02:focus + .hotspot-info-02 {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


/* Position von Hotspot 02 beim Hover beibehalten */

.hotspot-02:hover,
.hotspot-02:focus,
.hotspot-02:active {
    transform: translate(-50%, -50%);
}


/* =========================
   HOTSPOT 03
   ========================= */

.hotspot-03:hover + .hotspot-info-03,
.hotspot-03:focus + .hotspot-info-03 {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


/* Position von Hotspot 03 beim Hover beibehalten */

.hotspot-03:hover,
.hotspot-03:focus,
.hotspot-03:active {
    transform: translate(-50%, -50%);
}

/* =========================================================
   ABSCHNITT 4 / MOBILE
   ========================================================= */

@media (max-width: 850px) {

    .arbeitstiefe-inhalt {
        grid-template-columns: 1fr;
    }


    .arbeitstiefe-text {
        padding: 70px 24px 60px;
    }


    .arbeitstiefe-kicker {
        font-size: 14px;
        letter-spacing: 0.12em;
    }


    .arbeitstiefe-headline {
        margin-top: 24px;

        font-size: clamp(46px, 12vw, 64px);
        line-height: 1.02;
    }


    .arbeitstiefe-linie {
        margin-top: 24px;
    }


    .arbeitstiefe-einleitung {
        max-width: 620px;

        margin-top: 24px;

        font-size: 17px;
        line-height: 1.55;
    }


    .arbeitstiefe-bild::before {
        display: none;
    }


    .hotspot {
        width: 40px;
        height: 40px;

        font-size: 16px;
        line-height: 34px;
    }


    .hotspot-info {
        width: min(280px, 78vw);

        padding: 20px 22px 22px;
    }


    .hotspot-info h3 {
        font-size: 21px;
    }


    .hotspot-info p {
        font-size: 16px;
    }

}


/* =========================================================
   ABSCHNITT 2 – SUBTILER SCROLL-EFFEKT
   ========================================================= */

.bodenaufbruch {
    --boden-parallax-y: 0px;

    background-position:
        center center,
        center calc(50% + var(--boden-parallax-y));
}


/* =========================================
   MOBILE VERSION – HEADER
   ========================================= */

@media (max-width: 850px) {

    header {
    height: 76px;
    padding: 0 20px;
    align-items: center;
}
      .logo img {
        width: 170px;
        height: auto;
    }

    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 44px;
        box-sizing: border-box;
        height: 44px;
        padding: 8px;
        border: 0;
        background: transparent;
            cursor: pointer;
        z-index: 20;
        transform: none;
}


.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus,
.mobile-menu-toggle:active {
    background: transparent;
    transform: none;
}



    .mobile-menu-toggle span {
        display: block;
        width: 28px;
        height: 2px;
        background: #ffffff;
        border-radius: 2px;
        position: relative;
        top: -18px;
    }

   header nav {
    display: none;
}


header nav.mobile-open {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;

    
position: absolute;
    top: 100%;
    left: 0;
    width: 100%;

    padding: 36px 20px;
    box-sizing: border-box;
    background: #101d29;
    z-index: 19;
}
}

/* Hamburger auf Desktop ausblenden */
@media (min-width: 851px) {
    .mobile-menu-toggle {
        display: none;
    }
}


/* ==========================================
   MOBILE VERSION – HERO
   Nur Smartphones, Desktop unverändert
   ========================================== */

@media (max-width: 600px) {

    main.hero-parallax {
        height: auto;
        min-height: calc(100svh - 76px);

        display: flex;
        align-items: flex-end;

        padding: 390px 24px 48px;
        background: #111c26;
    }



main.hero-parallax::before {
    background-image: url("bremer_parall_hero_studio_dark_mobil.jpg");
    background-size: auto 100%;
    background-position: center top;
    background-repeat: no-repeat;
    transform: none;
}
  

    main.hero-parallax section {
        position: relative;
        z-index: 2;

        width: 100%;
        padding: 0;
        margin: 0;

        transform: none;
        background: transparent;
    }

   

main.hero-parallax .hero-kicker {
    font-size: 12px;
    letter-spacing: 0.22em;
    color: #56baff;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.85);
    margin-bottom: 8px;
}

    main.hero-parallax h1 {
    font-size: clamp(35px, 9.5vw, 43px);
    line-height: 1.08;
    margin-bottom: -16px;
}

    main.hero-parallax section > p:not(.hero-kicker) {
        font-size: 16px;
        line-height: 1.5;
    }

    main.hero-parallax button {
        width: 100%;
        min-height: 60px;
    }
}


/* =====================================
   MOBILE HERO – SANFTE TEXTANIMATION
   Nur Smartphones
===================================== */

@media (max-width: 600px) {

    @keyframes mobileHeroFadeIn {
        from {
            opacity: 0;
            translate: 0 12px;
        }

        to {
            opacity: 1;
            translate: 0 0;
        }
    }

    main.hero-parallax .hero-kicker {
        animation: mobileHeroFadeIn 1.2s ease-out 0.3s both;
    }

    main.hero-parallax h1 {
        animation: mobileHeroFadeIn 1.2s ease-out 0.5s both;
    }

    main.hero-parallax section > p:not(.hero-kicker) {
        animation: mobileHeroFadeIn 1.2s ease-out 0.7s both;
    }

    @media (prefers-reduced-motion: reduce) {
        main.hero-parallax .hero-kicker,
        main.hero-parallax h1,
        main.hero-parallax section > p:not(.hero-kicker) {
            animation: none;
        }
    }
}

/* MOBILE HERO – SANFTER BILDZOOM */
@media (max-width: 600px) {
    @keyframes heroMobileZoom {
        from {
            transform: scale(1);
        }
        to {
            transform: scale(1.06);
        }
    }
}





/* MOBILE HERO – SANFTE BILDEINBLENDUNG */
/* Nur Smartphones, Desktop unverändert */

@media (max-width: 600px) {

    @keyframes mobileHeroImageFade {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    main.hero-parallax::before {
        animation:
    mobileHeroImageFade 3.2s ease-in-out both,
    heroMobileZoom 12s ease-in-out infinite alternate;
    }

    @keyframes heroMobileZoom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.20);
    }
}

    @media (prefers-reduced-motion: reduce) {
        main.hero-parallax::before {
            animation: none;
        }
    }
}





/* ==========================================
   MOBILE – ABSCHNITT 2
   Bild oberhalb des Textes mit Verlauf
   Desktop bleibt unverändert
========================================== */

.bodenaufbruch-mobile-bild {
    display: none;
}

@media (max-width: 600px) {

    .bodenaufbruch {
        display: flex;
        flex-direction: column;
        min-height: 0;
        margin-top: 0;
        padding-top: 760px;
        background: #e6ecf1;
        overflow: hidden;
    }

   .bodenaufbruch::before {
    background-image: url("bremer_parall_hero_bodenaufbruch_mobil.jpg");

    bottom: auto;
    height: 760px;

    animation:
    mobileHeroImageFade 3.2s ease-in-out both,
    heroMobileZoom 12s ease-in-out infinite alternate;
}
.bodenaufbruch-inhalt {
    margin-top: 0;
    background: #e6ecf1;
}

    .bodenaufbruch-mobile-bild {
    display: none;
}

    /* Weißer Verlauf am unteren Bildrand */
    .bodenaufbruch-mobile-bild::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
    to bottom,
    transparent 55%,
    rgba(255,255,255,0.15) 70%,
    rgba(255,255,255,0.65) 88%,
    #ffffff 100%
);
        pointer-events: none;
    }

    .bodenaufbruch-mobile-bild.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .bodenaufbruch-inhalt {
        order: 2;
        width: 100%;
        box-sizing: border-box;
        padding: 35px 24px 65px;
    }
}

@media (max-width: 600px) and
       (prefers-reduced-motion: reduce) {
    .bodenaufbruch-mobile-bild {
        opacity: 1;
        transform: none;
        transition: none;
    }
}




/* MOBILE – Button Abschnitt 2 */
@media (max-width: 600px) {
    .bodenaufbruch-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: fit-content;
        padding: 9px 16px;
        margin-top: 48px;
        font-size: 11px;
        letter-spacing: 2px;
    }

    .bodenaufbruch-button span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        line-height: 1;
        transform: translateY(-1px);
    }
}



/* MOBILE – Headlines wie Hero */
@media (max-width: 600px) {

    .bodenaufbruch h2,
    .bodenaufbruch h3 {
        font-size: clamp(35px, 9.5vw, 43px);
        line-height: 1.08;
        font-weight: 800;
    }

}




/* MOBILE – Abschnitt 3: Linie exakt so breit wie der Schriftzug */
@media (max-width: 600px) {

   .bremer-prinzip-label {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
}

    .bremer-prinzip-kicker {
        width: auto;
        margin: 0;
        white-space: nowrap;
    }

    .bremer-prinzip-linie {
        width: 100%;
        max-width: none;
        margin: 14px 0 38px;
        box-sizing: border-box;
    }

}

/* =========================================
   ABSCHNITT 4 – SCROLL REVEAL
   ========================================= */

.arbeitstiefe-reveal {
    opacity: 0;
    transform: translateY(18px);

    transition:
        opacity 2.4s ease-in-out,
        transform 2.4s ease-out;
}

.arbeitstiefe-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Zeitliche Staffelung */

.arbeitstiefe-kicker {
    transition-delay: 0s;
}

.arbeitstiefe-headline,
.arbeitstiefe-linie {
    transition-delay: 0.2s;
}

.arbeitstiefe-einleitung {
    transition-delay: 0.4s;
}


/* ABSCHNITT 4 – Hero-Blau übernehmen */

.arbeitstiefe-kicker {
    color: var(--bremer-kicker-color, #56baff);
}

.arbeitstiefe-linie {
    background-color: #56baff;
}


/* ABSCHNITT 4 – Helles Bremer Blau für alle Infofenster */

.hotspot-info {
    border-left-color: #56baff;
}

.hotspot-info-nummer {
    color: #56baff;
}


/* ABSCHNITT 4 – MOBILE INFOFENSTER */

@media (max-width: 600px) {

    .hotspot-info {
        box-sizing: border-box;
        width: calc(100% - 48px);
        max-width: 340px;

        left: 50%;
        right: auto;
        bottom: 24px;
        top: auto;

        transform: translateX(-50%);

        padding: 18px 20px;
    }

    .hotspot-info h3 {
        font-size: 20px;
        line-height: 1.2;
    }

    .hotspot-info p {
        font-size: 15px;
        line-height: 1.45;
    }
}



/* =========================================
   ABSCHNITT 4 – MOBILE INFOFENSTER
   ========================================= */

@media (max-width: 600px) {

    .arbeitstiefe-bild .hotspot-info {
        box-sizing: border-box;
        width: calc(100% - 48px);
        max-width: 340px;

        padding: 18px 20px;

        /* Zentrierung */
        left: 50%;
        right: auto;
        top: auto;
        bottom: 24px;

        transform: translateX(-50%);
    }

    /* Alle drei Fenster an derselben Position */

    .arbeitstiefe-bild .hotspot-info-01,
    .arbeitstiefe-bild .hotspot-info-02,
    .arbeitstiefe-bild .hotspot-info-03 {
        left: 50%;
        right: auto;
        top: auto;
        bottom: 24px;
    }

    /* Typografie */

    .arbeitstiefe-bild .hotspot-info h3 {
        font-size: 19px;
        line-height: 1.2;
        overflow-wrap: break-word;
    }

    .arbeitstiefe-bild .hotspot-info p {
        font-size: 15px;
        line-height: 1.45;
    }
}




/* MOBILE – Infofenster zentriert einblenden */
@media (max-width: 600px) {

    
.arbeitstiefe-bild .hotspot-info {
    transform: translate(-50%, 8px) !important;
}

    .arbeitstiefe-bild .hotspot-info.active,
    .arbeitstiefe-bild .hotspot-info.is-active,
    .arbeitstiefe-bild .hotspot-info.is-visible {
        transform: translate(-50%, 0);
    }
}


/* =====================================
   ABSCHNITT 4 – MOBILER INFOBEREICH
   ===================================== */

/* Auf Desktop vollständig ausblenden */
.arbeitstiefe-mobile-infos {
    display: none;
}

@media (max-width: 600px) {

    /* Bisherige Infofenster im Bild ausblenden */
    .arbeitstiefe-bild > .hotspot-info {
        display: none !important;
    }

    /* Neuer Infobereich unter dem Bild */
    .arbeitstiefe-mobile-infos {
        display: block;
        background: #142330;
        padding: 0 24px 32px;
        min-height: 180px;
    }

    
/* Mobile Infokarten */
.arbeitstiefe-mobile-info {
    display: none;
    color: #ffffff;
    border-left: none;
    padding: 20px 0 28px;
}

/* Ausgewählte Infokarte */
.arbeitstiefe-mobile-info.active {
    display: block;
}

/* Nummer */
.arbeitstiefe-mobile-info .hotspot-info-nummer {
    display: block;
    color: #56baff;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}

/* Kurze blaue Linie unter der Nummer */
.arbeitstiefe-mobile-info .hotspot-info-nummer::after {
    content: "";
    display: block;
    width: 54px;
    height: 3px;
    background: #56baff;
    margin-top: 12px;
}

/* Headline */
.arbeitstiefe-mobile-info h3 {
    margin: 22px 0 16px;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
}

/* Beschreibung */
.arbeitstiefe-mobile-info p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
}
}


/* ACTIONBILD – VOLLE BILDSCHIRMBREITE */

.bremer-actionbild {
    width: 100%;
    height: 760px; /* vorher 540px */
    overflow: hidden;
    background: #142330;
}

.bremer-actionbild img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    /* Scroll-Parallax nur Desktop */
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center center;
    will-change: transform;
}

@media (max-width: 600px) {
  .bremer-actionbild img {
    will-change: transform;
  }
}


    @media (max-width: 600px) {
    .bremer-actionbild {
         height: auto;
    }

    .bremer-actionbild img {
    object-fit: cover;
    object-position: center center;
}
}

@media (max-width: 600px) {

    .bremer-actionbild-kicker,
    .bremer-actionbild-teaser h2,
    .bremer-actionbild-linie {
        position: relative;
        top: -240px;
    }
    .bremer-actionbild-text {
        position: relative;
        top: 60px;
    }

    
}


/* ==========================================
   BREMER FOOTER – DESKTOP
   Eigenständiger Bereich
   ========================================== */

.bremer-footer {
  box-sizing: border-box;
  width: 100%;
  padding: 80px 6% 32px;
  background: #101d29;
  color: #f4f6f8;
  font-family: var(--bremer-body-font, "Barlow", Arial, sans-serif);
}

.bremer-footer *,
.bremer-footer *::before,
.bremer-footer *::after {
  box-sizing: border-box;
}

.bremer-footer-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 0.7fr;
  gap: 70px;
  padding-bottom: 65px;
}

.bremer-footer-logo {
  display: block;
  width: 100%;
  max-width: 290px;
  height: auto;
  margin-bottom: 32px;
}

.bremer-footer-company p {
  margin: 0;
  font-size: var(--bremer-body-size, 19px);
  line-height: 1.7;
}

.bremer-footer h3 {
  margin: 0 0 32px;
  color: #a9bed1;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.bremer-footer-contact address {
  margin-bottom: 25px;
  font-size: var(--bremer-body-size, 19px);
  font-style: normal;
  line-height: 1.7;
}

.bremer-footer-details {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 25px;
  row-gap: 10px;
  font-size: var(--bremer-body-size, 18px);
}

.bremer-footer a {
  color: #b8d9f5;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.bremer-footer a:hover {
  color: #ffffff;
}



@media (min-width: 601px) {
  .bremer-footer-social h3 {
    text-align: center;
  }
}



.bremer-footer-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}




.bremer-footer-icon svg {
  width: 29px;
  height: 29px;
}



.bremer-footer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 12px;
  background: transparent;
  color: #009fe3;
  font-size: 34px;
  font-weight: 700;
}



/* Untere Leiste */

.bremer-footer-bottom {
  max-width: 1600px;
  margin: 0 auto;
  padding-top: 30px;
  border-top: 1px solid #637282;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.bremer-footer-bottom p {
  margin: 0;
  font-size: var(--bremer-small-size, 15px);
}

.bremer-footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
}

.bremer-footer-bottom nav a {
  color: #f4f6f8;
  font-size: var(--bremer-small-size, 15px);
}

/* ==========================================
   BREMER FOOTER – MOBILE
   ========================================== */

@media (max-width: 600px) {

  .bremer-footer {
    padding: 55px 7% 30px;
  }

  .bremer-footer-inner {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-bottom: 45px;
  }

  .bremer-footer-logo {
    max-width: 290px;
    margin-bottom: 25px;
  }

  .bremer-footer-company p,
  .bremer-footer-contact address {
    font-size: 16px;
  }

  .bremer-footer h3 {
    margin-bottom: 22px;
    font-size: 15px;
  }

  .bremer-footer-details {
    grid-template-columns: 1fr;
    gap: 5px;
    font-size: 16px;
  }

  .bremer-footer-details a,
  .bremer-footer-details span:nth-child(even) {
    margin-bottom: 12px;
  }

  .bremer-footer-icon {
    width: 52px;
    height: 52px;
  }

  

/* Social Media – Mobile */
.bremer-footer-social {
  width: max-content;
  max-width: 100%;
}

.bremer-footer-social .bremer-footer-icons {
  justify-content: flex-start;
  width: max-content;
  margin-left: 0;
  transform: translateX(-10px);
}


  .bremer-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
  }

.bremer-footer-bottom nav {
    gap: 8px;
    flex-wrap: nowrap;
}

}


/* =====================================
   HINWEISFENSTER – SEITEN IM AUFBAU
   DESKTOP UND MOBILE
   ===================================== */

.aufbau-overlay[hidden] {
  display: none;
}

.aufbau-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.65);
}

.aufbau-fenster {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 520px;
  min-height: 340px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 55px 35px;
  box-sizing: border-box;
  background: #101d29;
  color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.aufbau-schliessen {
  position: absolute;
  top: 16px;
  right: 20px;
  border: 0;
  padding: 4px;
  background: transparent;
  color: #b9c8d4;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.aufbau-inhalt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  text-align: center;
}

.aufbau-icon {
  color: #56baff;
  font-size: 42px;
  line-height: 1;
}

.aufbau-inhalt h2 {
  margin: 0;
  color: #ffffff;
  font-family: var(--bremer-section-font, "Barlow", Arial, sans-serif);
  font-size: var(--bremer-section-size, 29px);
  font-weight: var(--bremer-section-weight, 700);
  line-height: var(--bremer-section-line-height, 1.2);
}

.aufbau-inhalt p {
  margin: 0;
  color: #b9c8d4;
  font-family: var(--bremer-body-font, "Barlow", Arial, sans-serif);
  font-size: var(--bremer-body-size, 17px);
  line-height: 1.6;
}

.aufbau-linie {
  width: 48px;
  height: 3px;
  flex-shrink: 0;
  background: #56baff;
  border-radius: 3px;
}

/* Nur das Hinweisfenster auf Mobile */

@media (max-width: 600px) {
  .aufbau-fenster {
    min-height: 300px;
    padding: 50px 25px;
  }

  .aufbau-inhalt h2 {
    font-size: 24px;
  }

  .aufbau-inhalt p {
    font-size: 15px;
  }
}



/* =========================================
   KONTAKTSEITE – FORMULAR
   Nur kontakt.html
   ========================================= */

.kontakt-formular-panel[hidden] {
    display: none !important;
}

.kontakt-formular-panel:not([hidden]) {
    display: block;
    width: 100%;
    max-width: 900px;
    margin-top: 36px;
}

.kontakt-formular {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.kontakt-formular-zeile {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.kontakt-formular label {
    display: flex;
    flex-direction: column;
    gap: 9px;
    color: #172c3d;
    font-size: var(--bremer-small-size, 15px);
    font-weight: 600;
}

.kontakt-formular input:not([type="checkbox"]),
.kontakt-formular select,
.kontakt-formular textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1px solid #cbd5df;
    border-radius: 4px;
    background: #ffffff;
    color: #172c3d;
    font: inherit;
    font-weight: 400;
}

.kontakt-formular textarea {
    min-height: 150px;
    resize: vertical;
}

.kontakt-formular input:focus,
.kontakt-formular select:focus,
.kontakt-formular textarea:focus {
    outline: 2px solid #1681c4;
    outline-offset: 2px;
}

.kontakt-formular .kontakt-datenschutz {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
}

.kontakt-datenschutz input {
    flex: 0 0 auto;
    margin-top: 4px;
    accent-color: #0875bf;
}

.kontakt-formular .kontakt-senden {
    align-self: flex-start;
    padding: 15px 28px;
    border: 0;
    border-radius: 3px;
    background: #0875bf;
    color: #ffffff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.kontakt-formular .kontakt-senden:hover:not(:disabled) {
    background: #075f9b;
}

.kontakt-formular .kontakt-senden:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Smartphone */
@media (max-width: 600px) {
    .kontakt-formular-zeile {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .kontakt-formular-panel:not([hidden]) {
        margin-top: 28px;
    }

    .kontakt-formular .kontakt-senden {
        width: 100%;
    }
}

/* Abschnitt 2 – links am Hero ausrichten */
@media (min-width: 851px) {
  .bodenaufbruch-inhalt {
    padding-left: 4.5vw;
  }
}

/* =====================================
   ERFAHRUNGEN AUS DER PRAXIS
===================================== */

.bremer-erfahrung {
    display: grid;
    grid-template-columns: 55% 45%;
    width: 100%;
    min-height: 700px;
    background: #101d29;
    overflow: hidden;
}

.bremer-erfahrung-bild {
    position: relative;
    width: 100%;
    min-height: 700px;
    z-index: 1;
}

.bremer-erfahrung-bild::after {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    bottom: 0;
    width: 42%;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(16, 29, 41, 0) 0%,
        rgba(16, 29, 41, 0.18) 18%,
        rgba(16, 29, 41, 0.58) 48%,
        rgba(16, 29, 41, 0.90) 76%,
        #101d29 100%
    );
}

.bremer-erfahrung-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.bremer-erfahrung-inhalt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 70px 11% 70px 12%;
}

.bremer-erfahrung-kicker {
    margin: 0 0 20px;
    font-family: var(--bremer-kicker-font, "Barlow", Arial, Helvetica, sans-serif);
    font-size: var(--bremer-kicker-size, 14px);
    font-weight: var(--bremer-kicker-weight, 600);
    line-height: var(--bremer-kicker-line-height, 1);
    letter-spacing: var(--bremer-kicker-letter-spacing, 0.14em);
    text-transform: uppercase;
    color: var(--bremer-kicker-color, #009fe3);
}

.bremer-erfahrung-headline {
    margin: 0;
    max-width: 560px;
    font-family:
        var(--bremer-display-font, "Barlow Semi Condensed",
        "Barlow",
        Arial,
        Helvetica,
        sans-serif);
    font-size: var(--bremer-display-size, clamp(52px, 4vw, 72px));
    font-weight: var(--bremer-display-weight, 700);
    line-height: var(--bremer-display-line-height, 0.98);
    letter-spacing: var(--bremer-display-letter-spacing, -0.015em);
    color: #ffffff;
}

.bremer-erfahrung-headline::after {
    content: "";
    display: block;
    width: 34px;
    height: 2px;
    margin: 30px 0 26px;
    background: #009fe3;
}

.bremer-erfahrung-text {
    max-width: 590px;
    margin: 0;
    font-family: var(--bremer-body-font, "Barlow", Arial, Helvetica, sans-serif);
    font-size: var(--bremer-body-size, 17px);
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.80);
}

@media (max-width: 760px) {
    .bremer-erfahrung {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .bremer-erfahrung-bild {
        min-height: 320px;
    }

    .bremer-erfahrung-bild::after {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 32%;

    background: linear-gradient(
        to bottom,
        rgba(16, 29, 41, 0) 0%,
        rgba(16, 29, 41, 0.18) 25%,
        rgba(16, 29, 41, 0.58) 58%,
        rgba(16, 29, 41, 0.90) 82%,
        #101d29 100%
    );
}

    .bremer-erfahrung-inhalt {
        padding: 55px 24px 65px;
    }

    .bremer-erfahrung-headline {
        font-size: clamp(42px, 11vw, 58px);
    }

    .bremer-erfahrung-text {
        font-size: 16px;
    }
}


/* =========================================================
   FAZIT & TECHNISCHE DATEN
   ========================================================= */

.bremer-fazit {
    width: 100%;
    padding: 110px 0 105px;
    background: #101d29;
    color: #ffffff;
}

.bremer-fazit-inhalt {
    width: min(1320px, 86%);
    margin: 0 auto;
    text-align: center;
}

.bremer-fazit-kicker {
    margin: 0;
    font-family: var(--bremer-kicker-font, "Barlow", Arial, Helvetica, sans-serif);
    color: var(--bremer-kicker-color, #0077c8);
    font-size: var(--bremer-kicker-size, 17px);
    font-weight: var(--bremer-kicker-weight, 600);
    line-height: var(--bremer-kicker-line-height, 1);
    letter-spacing: var(--bremer-kicker-letter-spacing, 0.12em);
    text-transform: uppercase;
}

.bremer-fazit-headline {
    margin: 28px 0 0;
    font-family: var(--bremer-display-font, "Barlow Semi Condensed", "Barlow", Arial, Helvetica, sans-serif);
    color: #ffffff;
    font-size: var(--bremer-display-size, clamp(54px, 4.4vw, 76px));
    font-weight: var(--bremer-display-weight, 600);
    line-height: var(--bremer-display-line-height, 1.02);
    letter-spacing: var(--bremer-display-letter-spacing, -0.015em);
}

.bremer-fazit-einleitung {
    max-width: 760px;
    margin: 30px auto 0;
    font-family: "Barlow", Arial, Helvetica, sans-serif;
    color: #c3ccd3;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.6;
}


/* 3 VORTEILE */

.bremer-fazit-vorteile {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 70px;
    max-width: 1120px;
    margin: 75px auto 0;
}

.bremer-fazit-vorteil {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bremer-fazit-vorteil img {
    display: block;
    width: 190px;
    height: 190px;
    object-fit: contain;
}

.bremer-fazit-vorteil h3 {
    margin: 28px 0 0;
    font-family: var(--bremer-sub-font, "Barlow", Arial, Helvetica, sans-serif);
    color: #ffffff;
    font-size: var(--bremer-sub-size, 21px);
    font-weight: var(--bremer-sub-weight, 600);
    line-height: var(--bremer-sub-line-height, 1.25);
    letter-spacing: var(--bremer-sub-letter-spacing, 0.015em);
}


/* MOBILE */

@media (max-width: 760px) {

    .bremer-fazit {
        padding: 75px 0 70px;
    }

    .bremer-fazit::before {
    content: "";
    display: block;
    width: 68%;
    height: 2px;
    margin: -30px auto 100px;

    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 151, 227, 0.25) 20%,
        #0097e3 50%,
        rgba(0, 151, 227, 0.25) 80%,
        transparent 100%
    );

    box-shadow:
        0 0 10px rgba(0, 151, 227, 0.30),
        0 0 24px rgba(0, 151, 227, 0.16);
}

    .bremer-fazit-inhalt {
        width: calc(100% - 48px);
    }

    .bremer-fazit-kicker {
        font-size: 14px;
    }

    .bremer-fazit-headline {
        margin-top: 24px;
        font-size: clamp(46px, 12vw, 62px);
    }

    .bremer-fazit-einleitung {
        margin-top: 24px;
        font-size: 17px;
    }

    .bremer-fazit-vorteile {
        grid-template-columns: 1fr;
        gap: 50px;
        margin-top: 60px;
    }

    .bremer-fazit-vorteil img {
    width: 135px;
    height: 135px;

    }

    .bremer-fazit-vorteil h3 {
        margin-top: 22px;
        font-size: 20px;
    }
}

/* =========================================================
   FAZIT – BREMER BLAU TEXTAKZENTE
   ========================================================= */

.bremer-fazit-kicker,
.bremer-fazit-einleitung,
.bremer-fazit-vorteil p {
    color: #009fe3;
}

/* =========================================================
   FAZIT – VORTEILE REVEAL
   ========================================================= */

.bremer-fazit-vorteil {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 2.4s ease-in-out,
        transform 2.4s ease-out;
}

.bremer-fazit-vorteil.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .bremer-fazit-vorteil {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =========================================================
   FAZIT – TECHNISCHE DATEN TABELLE
   ========================================================= */

.bremer-fazit-tabelle {
    width: min(1180px, 92%);
    margin: 85px auto 0;
    text-align: left;
}

.bremer-fazit-tabelle > h3 {
    margin: 0 0 50px;
    text-align: center;
    font-family: var(--bremer-section-font, "Barlow Semi Condensed", "Barlow", Arial, sans-serif);
    color: #ffffff;
    font-size: var(--bremer-section-size, 34px);
    font-weight: var(--bremer-section-weight, 600);
}

.bremer-tabelle-scroll {
    width: 100%;
    overflow-x: auto;
}

.bremer-fazit-tabelle table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Barlow", Arial, sans-serif;
    color: #ffffff;
}

.bremer-fazit-tabelle th {
    padding: 0 18px 18px;
    border-bottom: 2px solid #009fe3;
    color: #009fe3;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    vertical-align: bottom;
}

.bremer-fazit-tabelle td {
    padding: 17px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    color: #d7dee3;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    text-align: left;
}

.bremer-fazit-tabelle td:first-child {
    color: #ffffff;
    font-weight: 600;
}

.bremer-tabelle-hinweis {
    margin: 18px 18px 0;
    color: #8797a4;
    font-family: "Barlow", Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
}


/* MOBILE */

@media (max-width: 760px) {

    .bremer-fazit-tabelle {
        width: 100%;
        margin-top: 70px;
    }


    .bremer-fazit-tabelle::before {
    content: "";
    display: block;
    width: 55%;
    height: 2px;
    margin: 0 auto 70px;

    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 151, 227, 0.20) 20%,
        #0097e3 50%,
        rgba(0, 151, 227, 0.20) 80%,
        transparent 100%
    );

    box-shadow:
        0 0 8px rgba(0, 151, 227, 0.24),
        0 0 18px rgba(0, 151, 227, 0.12);
}

    .bremer-fazit-tabelle > h3 {
        font-size: 25px;
        margin-bottom: 25px;
    }
    

    .bremer-fazit-tabelle table {
        min-width: 850px;
    }

    .bremer-fazit-tabelle th {
        font-size: 14px;
        padding: 0 14px 16px;
    }

    .bremer-fazit-tabelle td {
        font-size: 15px;
        padding: 15px 14px;
    }

    /* MOBILE – TECHNISCHE DATEN ALS KARTEN */

.bremer-fazit-tabelle thead {
    display: none;
}

.bremer-fazit-tabelle table {
    min-width: 0;
    width: 100%;
}

.bremer-fazit-tabelle tbody tr {
    display: block;
    margin: 0 24px 22px;
    padding: 22px 20px;
    border: 1px solid rgba(0, 151, 227, 0.28);
    border-radius: 14px;
}

.bremer-fazit-tabelle tbody tr td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.bremer-fazit-tabelle tbody tr td:last-child {
    border-bottom: 0;
}

.bremer-fazit-tabelle tbody tr td::before {
    content: attr(data-label);
    color: #009fe3;
    font-size: 13px;
    font-weight: 500;
}

.bremer-fazit-tabelle tbody tr td:first-child {
    font-size: 20px;
    font-weight: 600;
}

.bremer-fazit-tabelle tbody tr td:first-child::before {
    display: none;
}

.bremer-tabelle-hinweis {
    margin-left: 0;
    margin-right: 0;
}

/* =========================================================
   MOBILE – TECHNISCHE DATEN KARTEN + ICONS
   ========================================================= */

.bremer-fazit-tabelle tbody tr {
    padding: 26px 24px 22px;
}

.bremer-fazit-tabelle tbody tr td {
    position: relative;
}

.bremer-fazit-tabelle tbody tr td:first-child {
    min-height: 0;
    padding: 0 0 18px;
    margin-bottom: 4px;
    font-size: 22px;
}


/* Datenzeilen */

.bremer-fazit-tabelle tbody tr td:not(:first-child) {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    column-gap: 10px;
    align-items: center;
    padding: 10px 0;
}


/* Labels */

.bremer-fazit-tabelle tbody tr td:not(:first-child)::before {
    grid-column: 2;
    content: attr(data-label);
    color: #009fe3;
    font-size: 13px;
    font-weight: 500;
}


/* Werte */

.bremer-fazit-tabelle tbody tr td:not(:first-child) {
    color: #ffffff;
}


/* =========================================================
   TECHNISCHE DATEN – ICONS
   ========================================================= */

.bremer-fazit-tabelle tbody tr td:not(:first-child)::after {
    grid-column: 1;
    grid-row: 1;
    width: 24px;
    height: 24px;
    display: block;

    background-color: #9aaebb;

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}


/* Arbeitsbreite – horizontale Pfeile */

.bremer-fazit-tabelle tbody tr td:nth-child(2)::after {
    content: "";

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 12h26M8 7l-5 5 5 5M24 7l5 5-5 5'/%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 12h26M8 7l-5 5 5 5M24 7l5 5-5 5'/%3E%3C/svg%3E");
}


/* Zinken – senkrechte Boden-/Zinkenlinien */

.bremer-fazit-tabelle tbody tr td:nth-child(3)::after {
    content: "";

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M5 3c0 3 4 3 4 6s-4 3-4 6 4 3 4 6M12 3c0 3 4 3 4 6s-4 3-4 6 4 3 4 6M19 3c0 3 4 3 4 6s-4 3-4 6 4 3 4 6'/%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M5 3c0 3 4 3 4 6s-4 3-4 6 4 3 4 6M12 3c0 3 4 3 4 6s-4 3-4 6 4 3 4 6M19 3c0 3 4 3 4 6s-4 3-4 6 4 3 4 6'/%3E%3C/svg%3E");
}


/* Rahmenhöhe – vertikaler Doppelpfeil */

.bremer-fazit-tabelle tbody tr td:nth-child(4)::after {
    content: "";

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 2v24M7 7l5-5 5 5M7 21l5 5 5-5'/%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 2v24M7 7l5-5 5 5M7 21l5 5 5-5'/%3E%3C/svg%3E");
}


/* Schlepperleistung – Referenz-Icon */

.bremer-fazit-tabelle tbody tr td:nth-child(5)::after {
    content: "";
   width: 32px;
   height: 30px;
    display: block;

    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 32' fill='none' stroke='%239aaebb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 23h30'/%3E%3Ccircle cx='13' cy='22' r='6'/%3E%3Ccircle cx='30' cy='23' r='4'/%3E%3Cpath d='M8 16h11l3 6h8'/%3E%3Cpath d='M19 16V7h7l4 9'/%3E%3Cpath d='M17 7h12'/%3E%3Cpath d='M22 16h7'/%3E%3Cpath d='M31 10v6'/%3E%3Cpath d='M32 10h3'/%3E%3Cpath d='M25 11h4'/%3E%3Cpath d='M25 14h4'/%3E%3Ccircle cx='13' cy='22' r='2'/%3E%3Ccircle cx='30' cy='23' r='1.4'/%3E%3C/svg%3E") center / contain no-repeat;

    -webkit-mask: none !important;
    mask: none !important;
}


/* Eigengewicht – Referenz-Icon */

.bremer-fazit-tabelle tbody tr td:nth-child(6)::after {
    content: "";
    width: 28px;
    height: 28px;
    display: block;

    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 36' fill='none' stroke='%239aaebb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 7h10l4 25H7L11 7Z'/%3E%3Cpath d='M13 7V4c0-2 1.5-3 3-3s3 1 3 3v3'/%3E%3C/svg%3E") center / contain no-repeat;

    -webkit-mask: none !important;
    mask: none !important;
}

}

/* =========================================================
   FAQ
   ========================================================= */

.bremer-faq {
    width: 100%;
    padding: 115px 0 125px;
    background: #f3f5f6;
    color: #101d29;
}

.bremer-faq-inhalt {
    width: min(1180px, 86%);
    margin: 0 auto;
}

.bremer-faq-kicker {
    margin: 0;
    font-family: var(--bremer-kicker-font, "Barlow", Arial, Helvetica, sans-serif);
    color: var(--bremer-kicker-color, #009fe3);
    font-size: var(--bremer-kicker-size, 15px);
    font-weight: var(--bremer-kicker-weight, 600);
    line-height: var(--bremer-kicker-line-height, 1);
    letter-spacing: var(--bremer-kicker-letter-spacing, 0.12em);
    text-transform: uppercase;
}

.bremer-faq-headline {
    max-width: 760px;
    margin: 25px 0 70px;
    font-family: var(--bremer-display-font, "Barlow Semi Condensed", "Barlow", Arial, Helvetica, sans-serif);
    color: #101d29;
    font-size: var(--bremer-display-size, clamp(48px, 4vw, 68px));
    font-weight: var(--bremer-display-weight, 600);
    line-height: var(--bremer-display-line-height, 1.02);
    letter-spacing: var(--bremer-display-letter-spacing, -0.015em);
}


/* FAQ LISTE */

.bremer-faq-liste {
    width: 100%;
    border-top: 1px solid rgba(16, 29, 41, 0.18);
}

.bremer-faq-item {
    padding: 30px 0 32px;
    border-bottom: 1px solid rgba(16, 29, 41, 0.18);
}

.bremer-faq-item h3 {
    margin: 0;
    padding-right: 70px;
    font-family: var(--bremer-sub-font, "Barlow", Arial, Helvetica, sans-serif);
    color: #101d29;
    font-size: var(--bremer-sub-size, 22px);
    font-weight: var(--bremer-sub-weight, 600);
    line-height: var(--bremer-sub-line-height, 1.35);
}

.bremer-faq-item p {
    max-width: 980px;
    margin: 20px 0 0;
    font-family: var(--bremer-body-font, "Barlow", Arial, Helvetica, sans-serif);
    color: #53616c;
    font-size: var(--bremer-body-size, 17px);
    font-weight: 400;
    line-height: 1.65;
}


/* MOBILE */

@media (max-width: 760px) {

    .bremer-faq {
        padding: 80px 0 90px;
    }

    .bremer-faq-inhalt {
        width: calc(100% - 48px);
    }

    .bremer-faq-kicker {
        font-size: 13px;
    }

    .bremer-faq-headline {
        margin-top: 22px;
        margin-bottom: 55px;
        font-size: clamp(44px, 12vw, 58px);
    }

    .bremer-faq-item {
        padding: 25px 0 27px;
    }

    .bremer-faq-item h3 {
        padding-right: 0;
        font-size: 19px;
    }

    .bremer-faq-item p {
        margin-top: 17px;
        font-size: 16px;
        line-height: 1.6;
    }
}

/* =========================================================
   FAQ – ACCORDION TEST
   ========================================================= */

.bremer-faq-frage {
    appearance: none;
    -webkit-appearance: none;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;

    width: 100%;
    margin: 0;
    padding: 0;

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;

    font-family: "Barlow", Arial, Helvetica, sans-serif;
    color: #101d29;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;

    cursor: pointer;

    transform: none;
    transition: color 0.25s ease;
}

.bremer-faq-frage:hover,
.bremer-faq-frage:focus,
.bremer-faq-frage:active {
    background: transparent;
    box-shadow: none;
    transform: none;
}

.bremer-faq-frage:hover {
    color: #009fe3;
}

.bremer-faq-plus {
    flex: 0 0 auto;
    color: #009fe3;
    font-size: 32px;
    font-weight: 300;
    line-height: 1;
}

/* =========================================================
   FAQ – ANTWORT AUF / ZU
   ========================================================= */

.bremer-faq-antwort {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(-12px);

  transition:
    grid-template-rows 1.8s cubic-bezier(0.19, 1, 0.22, 1),
    opacity 1.6s ease-in-out,
    transform 1.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.bremer-faq-antwort > p {
    overflow: hidden;
    margin: 0;
    padding-top: 24px;
}

.bremer-faq-item.is-open .bremer-faq-antwort {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: translateY(0);
}

.bremer-faq-plus {
    transition: transform 0.35s ease;
}

/* Geöffnete FAQ-Frage bleibt BREMER-blau */
.bremer-faq-item.is-open .bremer-faq-frage {
    color: #009fe3;
}

/* =========================================================
   DETAILFENSTER – BASIS
   ========================================================= */

.bremer-detail {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 40px;

    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    transition:
        opacity 0.8s ease-in-out,
        visibility 0.8s;
}

/* =========================================================
   DETAILFENSTER – BODENAUFBRUCH
   Nur Klassen innerhalb .bremer-detail
   ========================================================= */

.bremer-detail-overlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 12, 18, 0.82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}


/* PANEL */

.bremer-detail-panel {
    position: relative;
    z-index: 1;

    width: min(1100px, 82vw);
    max-height: 84vh;

    background: #101d29;

    overflow-y: auto;
    overscroll-behavior: contain;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.38);

    opacity: 0;
    transform: translateY(28px);

    transition:
        opacity 1.2s ease-in-out,
        transform 1.4s cubic-bezier(0.19, 1, 0.22, 1);
}


/* INHALT */

.bremer-detail-inhalt {
    padding: 75px 90px 85px;
}


/* KICKER */

.bremer-detail-kicker {
    margin: 0 0 24px;

    font-family: var(--bremer-kicker-font, "Barlow", Arial, Helvetica, sans-serif);
    color: var(--bremer-kicker-color, #009fe3);

    font-size: var(--bremer-kicker-size, 14px);
    font-weight: var(--bremer-kicker-weight, 600);
    line-height: var(--bremer-kicker-line-height, 1);
    letter-spacing: var(--bremer-kicker-letter-spacing, 0.12em);

    text-transform: uppercase;
}


/* HAUPTÜBERSCHRIFT */

.bremer-detail-inhalt > h2 {
    margin: 0 0 65px;

    font-family: var(--bremer-display-font, "Barlow Semi Condensed", "Barlow", Arial, Helvetica, sans-serif);
    color: #ffffff;

    font-size: var(--bremer-display-size, clamp(48px, 5vw, 72px));
    font-weight: var(--bremer-display-weight, 600);
    line-height: var(--bremer-display-line-height, 0.98);
    letter-spacing: var(--bremer-display-letter-spacing, -0.015em);
}


/* ORIGINALTEXT */

.bremer-detail-text {
    max-width: 850px;
}

.bremer-detail-text h3 {
    margin: 0 0 22px;

    font-family: var(--bremer-sub-font, "Barlow Semi Condensed", "Barlow", Arial, Helvetica, sans-serif);
    color: #009fe3;

    font-size: var(--bremer-sub-size, 30px);
    font-weight: var(--bremer-sub-weight, 600);
    line-height: var(--bremer-sub-line-height, 1.18);
}

.bremer-detail-text h3:not(:first-child) {
    margin-top: 60px;
}

.bremer-detail-text p {
    margin: 0;

    font-family: var(--bremer-body-font, "Barlow", Arial, Helvetica, sans-serif);
    color: #c8d1d8;

    font-size: var(--bremer-body-size, 18px);
    font-weight: 400;
    line-height: 1.7;
}


/* SCHLIESSEN */

.bremer-detail-close {
    position: absolute;
    top: 28px;
    right: 32px;
    z-index: 2;

    width: 48px;
    height: 48px;

    padding: 0;
    border: 0;
    border-radius: 50%;

    background: transparent;
    color: #ffffff;

    font-family: Arial, sans-serif;
    font-size: 38px;
    font-weight: 200;
    line-height: 1;

    cursor: pointer;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.bremer-detail-close:hover {
    background: transparent;
    color: #009fe3;
    transform: rotate(90deg);
}


/* MOBILE */

@media (max-width: 760px) {

    .bremer-detail {
        padding: 12px;
    }

    .bremer-detail-panel {
        width: 100%;
        max-height: calc(100vh - 24px);
    }

    .bremer-detail-inhalt {
        padding: 70px 28px 60px;
    }

    .bremer-detail-inhalt > h2 {
        margin-bottom: 50px;
        font-size: clamp(44px, 13vw, 60px);
    }

    .bremer-detail-text h3 {
        font-size: 25px;
    }

    .bremer-detail-text p {
        font-size: 16px;
        line-height: 1.65;
    }

    .bremer-detail-close {
        top: 18px;
        right: 18px;
    }
}

/* =========================================================
   DETAILFENSTER – GEÖFFNET
   ========================================================= */

.bremer-detail.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.bremer-detail.is-open .bremer-detail-panel {
    opacity: 1;
    transform: translateY(0);
}

body.bremer-detail-open {
    overflow: hidden;
}


/* =========================================================
   BREMER PRINZIP – MEHR ERFAHREN
   ========================================================= */

.bremer-prinzip-mehr {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
}

/* =========================================================
   ACTIONBILD – PRAXIS & ZUGKRAFT
   ========================================================= */

.bremer-actionbild {
    position: relative;
}

/* DUNKELBLAUER VERLAUF HINTER DEM TEXT */

.bremer-actionbild::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

 background: linear-gradient(
    90deg,
    rgba(16, 29, 41, 0.96) 0%,
    rgba(16, 29, 41, 0.88) 18%,
    rgba(16, 29, 41, 0.52) 28%,
    rgba(16, 29, 41, 0.16) 35%,
    rgba(16, 29, 41, 0.00) 42%
);
}

.bremer-actionbild-teaser {
    position: absolute;
    left: 7.5%;
    bottom: 15%;
    z-index: 2;

    max-width: 560px;

    padding: 0;
    background: transparent;

    opacity: 0;
transform: translateY(24px);
transition:
    opacity 1.8s ease,
    transform 1.8s ease;
}

.bremer-actionbild-teaser.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* KICKER */

.bremer-actionbild-kicker {
    margin: 0 0 20px;

    font-family: var(--bremer-kicker-font, "Barlow", Arial, Helvetica, sans-serif);
    color: var(--bremer-kicker-color, #009fe3);

    font-size: var(--bremer-kicker-size, 14px);
    font-weight: var(--bremer-kicker-weight, 600);
    line-height: var(--bremer-kicker-line-height, 1);
    letter-spacing: var(--bremer-kicker-letter-spacing, 0.14em);

    text-transform: uppercase;
}


/* HEADLINE */

.bremer-actionbild-teaser h2 {
    margin: 0;

    font-family: var(--bremer-display-font, "Barlow Semi Condensed", "Barlow", Arial, Helvetica, sans-serif);
    color: #ffffff;

    font-size: var(--bremer-display-size, clamp(64px, 5.8vw, 88px));
    font-weight: var(--bremer-display-weight, 700);
    line-height: var(--bremer-display-line-height, 0.98);
    letter-spacing: var(--bremer-display-letter-spacing, -0.015em);
}


/* BLAUE LINIE */

.bremer-actionbild-linie {
    width: 34px;
    height: 2px;

    margin: 28px 0 25px;

    background: #009fe3;
}


/* KURZER TEASER */

.bremer-actionbild-text {
    margin: 0 0 30px;

    font-family: var(--bremer-body-font, "Barlow", Arial, Helvetica, sans-serif);
    color: rgba(255, 255, 255, 0.78);

    font-size: var(--bremer-body-size, 17px);
    font-weight: 400;
    line-height: 1.55;
}


/* MOBILE */

@media (max-width: 760px) {

      .bremer-actionbild::before {
background: linear-gradient(
    to bottom,
    rgba(16, 29, 41, 1) 0%,
    rgba(16, 29, 41, 0.75) 10%,
    rgba(16, 29, 41, 0.25) 24%,
    rgba(16, 29, 41, 0) 36%,
    rgba(16, 29, 41, 0) 64%,
    rgba(16, 29, 41, 0.3) 76%,
    rgba(16, 29, 41, 0.78) 91%,
    rgba(16, 29, 41, 1) 100%
);
  }

    .bremer-actionbild-teaser {
        left: 24px;
        right: 24px;
        bottom: -20px;

        max-width: none;

        padding: 28px 25px 30px;
    }

    .bremer-actionbild-text {
    transform: translateY(-50px);
   }

    .bremer-actionbild-teaser button {
    transform: translateY(-50px);
   }

    .bremer-actionbild-teaser h2 {
        font-size: clamp(40px, 11vw, 54px);
    }

    .bremer-actionbild-text {
        font-size: 15px;
    }
}

/* =====================================
   RÜCKVERFESTIGUNG
===================================== */

.bremer-rueckverfestigung {
    position: relative;
    width: 100%;
    min-height: 500px;
    overflow: hidden;
    background: #101d29;
}


/* BILDFLÄCHE */

.bremer-rueckverfestigung-bild {
    position: absolute;
    inset: 0;
    z-index: 0;

    background-image: url("/parallockerer/bremer_polygonringwalze_rueckverfestigung.jpg");
    background-position: right center;
    background-size: cover;
    background-repeat: no-repeat;
}



@media (min-width: 851px) {
  .bremer-rueckverfestigung-bild {
    background-size: 100% auto;
    background-position: center top;
  }
}




/* DUNKLER VERLAUF FÜR DEN TEXT */

.bremer-rueckverfestigung::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(16, 29, 41, 0.98) 0%,
            rgba(16, 29, 41, 0.92) 27%,
            rgba(16, 29, 41, 0.55) 48%,
            rgba(16, 29, 41, 0.10) 70%,
            rgba(16, 29, 41, 0.00) 100%
        );
}


/* TEXTBEREICH */

.bremer-rueckverfestigung-inhalt {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: center;

    width: min(650px, 42%);
    min-height: 500px;

    margin-left: 7.5%;
    padding: 70px 0;
}


/* KICKER */

.bremer-rueckverfestigung-kicker {
    margin: 0 0 20px;

    font-family: var(--bremer-kicker-font, "Barlow", Arial, Helvetica, sans-serif);
    font-size: var(--bremer-kicker-size, 14px);
    font-weight: var(--bremer-kicker-weight, 600);
    line-height: var(--bremer-kicker-line-height, 1);
    letter-spacing: var(--bremer-kicker-letter-spacing, 0.14em);
    text-transform: uppercase;

    color: var(--bremer-kicker-color, #009fe3);
}


/* HEADLINE */

.bremer-rueckverfestigung-headline {
    margin: 0;

    font-family:
        var(--bremer-display-font, "Barlow Semi Condensed",
        "Barlow",
        Arial,
        Helvetica,
        sans-serif);

    font-size: var(--bremer-display-size, clamp(54px, 4.4vw, 76px));
    font-weight: var(--bremer-display-weight, 700);
    line-height: var(--bremer-display-line-height, 0.98);
    letter-spacing: var(--bremer-display-letter-spacing, -0.015em);

    color: #ffffff;
}


/* KLEINE BLAUE LINIE */

.bremer-rueckverfestigung-headline::after {
    content: "";
    display: block;

    width: 34px;
    height: 2px;

    margin: 30px 0 26px;

    background: #009fe3;
}


/* ORIGINALTEXT */

.bremer-rueckverfestigung-text {
    max-width: 610px;
    margin: 0 0 32px;

    font-family: var(--bremer-body-font, "Barlow", Arial, Helvetica, sans-serif);
    font-size: var(--bremer-body-size, 17px);
    font-weight: 400;
    line-height: 1.55;

    color: rgba(255, 255, 255, 0.80);
}


/* MOBILE */

@media (max-width: 760px) {

    .bremer-rueckverfestigung {
        min-height: auto;
    }

    .bremer-rueckverfestigung-bild {
        position: relative;
        height: 320px;
    }

    .bremer-rueckverfestigung::after {
        display: none;
    }

    .bremer-rueckverfestigung-inhalt {
        width: auto;
        min-height: auto;

        margin: 0;
        padding: 55px 24px 65px;
    }

    .bremer-rueckverfestigung-headline {
        font-size: clamp(42px, 11vw, 58px);
    }

    .bremer-rueckverfestigung-text {
        font-size: 16px;
    }
}

/* =====================================
   TECHNISCHE HIGHLIGHTS & AUSSTATTUNG
===================================== */

.bremer-ausstattung {
    width: 100%;
    padding: 95px 7.5% 110px;
    background: #f3f2ee;
    color: #101d29;
}


/* INTRO */

.bremer-ausstattung-intro {
    max-width: 850px;
    margin: 0 auto 65px;
    text-align: center;
}

.bremer-ausstattung-kicker {
    margin: 0 0 18px;

    font-family: var(--bremer-kicker-font, "Barlow", Arial, Helvetica, sans-serif);
    font-size: var(--bremer-kicker-size, 14px);
    font-weight: var(--bremer-kicker-weight, 600);
    line-height: var(--bremer-kicker-line-height, 1);
    letter-spacing: var(--bremer-kicker-letter-spacing, 0.14em);
    text-transform: uppercase;

    color: var(--bremer-kicker-color, #009fe3);
}

.bremer-ausstattung-headline {
    margin: 0;

    font-family:
        var(--bremer-display-font, "Barlow Semi Condensed",
        "Barlow",
        Arial,
        Helvetica,
        sans-serif);

    font-size: var(--bremer-display-size, clamp(48px, 4vw, 68px));
    font-weight: var(--bremer-display-weight, 700);
    line-height: var(--bremer-display-line-height, 1);
    letter-spacing: var(--bremer-display-letter-spacing, -0.015em);

    color: #101d29;
}


/* DREI SPALTEN */

.bremer-ausstattung-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 70px;

    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}


/* EINZELNE KARTE */

.bremer-ausstattung-card {
    display: flex;
    flex-direction: column;

    min-width: 0;
    margin: 0;
}


/* BILDFLÄCHE – BILDER KOMMEN SPÄTER */

.bremer-ausstattung-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.bremer-ausstattung-bild {
    width: 100%;
    max-width: 345px;
    aspect-ratio: 1 / 1;
    margin-left: 0;
    margin-right: auto;
    overflow: hidden;
}

.bremer-ausstattung-bild {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 1.5s ease,
        transform 1.5s ease;
}

.bremer-ausstattung-card:nth-child(2) .bremer-ausstattung-bild {
   transition-delay: 0.45s;
}

.bremer-ausstattung-card:nth-child(3) .bremer-ausstattung-bild {
    transition-delay: 0.9s;
}

.bremer-ausstattung-bild.is-visible {
    opacity: 1;
    transform: translateY(0);
}




/* KARTEN-HEADLINE */

.bremer-ausstattung-card h3 {
    margin: 22px 0 18px;

    font-family:
        var(--bremer-sub-font, "Barlow Semi Condensed",
        "Barlow",
        Arial,
        Helvetica,
        sans-serif);

    font-size: var(--bremer-sub-size, 28px);
    font-weight: var(--bremer-sub-weight, 700);
    line-height: var(--bremer-sub-line-height, 1.05);

    color: #101d29;
}


/* ORIGINALTEXT */

.bremer-ausstattung-card p {
    margin: 0;
    

    font-family: var(--bremer-body-font, "Barlow", Arial, Helvetica, sans-serif);
    font-size: var(--bremer-body-size, 16px);
    font-weight: 400;
    line-height: 1.6;

    color: rgba(16, 29, 41, 0.76);
}

/* MEHR-LINK */
.bremer-ausstattung-mehr {
    align-self: flex-start;
    margin-top: 18px;
    padding: 0;
    border: 0;
    background: none;

    font-family: "Barlow", Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #009fe3;

    cursor: pointer;
}

.bremer-ausstattung-mehr span {
    display: inline-block;
    margin-left: 5px;
    transition: transform 0.25s ease;
}

.bremer-ausstattung-mehr:hover span {
    transform: translateX(4px);
}

.bremer-ausstattung-mehr:hover,
.bremer-ausstattung-mehr:focus,
.bremer-ausstattung-mehr:active {
    background: none;
    color: #009fe3;
    box-shadow: none;
}


/* MOBILE */

@media (max-width: 900px) {

    .bremer-ausstattung {
        padding: 70px 24px 80px;
    }

    .bremer-ausstattung-intro {
        margin-bottom: 45px;
        text-align: left;
    }

    .bremer-ausstattung-headline {
        font-size: clamp(42px, 11vw, 58px);
        -webkit-text-stroke: 1px currentColor;
    }

    .bremer-ausstattung-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .bremer-ausstattung-bild {
        margin-bottom: 24px;
    }
}

/* =====================================
   HINWEISFENSTER – SEITEN IM AUFBAU
   DESKTOP UND MOBILE
   ===================================== */

.aufbau-overlay[hidden] {
  display: none;
}

.aufbau-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.65);
}

.aufbau-fenster {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 520px;
  min-height: 340px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 55px 35px;
  box-sizing: border-box;
  background: #101d29;
  color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.aufbau-schliessen {
  position: absolute;
  top: 16px;
  right: 20px;
  border: 0;
  padding: 4px;
  background: transparent;
  color: #b9c8d4;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.aufbau-inhalt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  text-align: center;
}

.aufbau-icon {
  color: #56baff;
  font-size: 42px;
  line-height: 1;
}

.aufbau-inhalt h2 {
  margin: 0;
  color: #ffffff;
  font-family: var(--bremer-section-font, "Barlow", Arial, sans-serif);
  font-size: var(--bremer-section-size, 29px);
  font-weight: var(--bremer-section-weight, 700);
  line-height: var(--bremer-section-line-height, 1.2);
}

.aufbau-inhalt p {
  margin: 0;
  color: #b9c8d4;
  font-family: var(--bremer-body-font, "Barlow", Arial, sans-serif);
  font-size: var(--bremer-body-size, 17px);
  line-height: 1.6;
}

.aufbau-linie {
  width: 48px;
  height: 3px;
  flex-shrink: 0;
  background: #56baff;
  border-radius: 3px;
}

/* Nur das Hinweisfenster auf Mobile */

@media (max-width: 600px) {
  .aufbau-fenster {
    min-height: 300px;
    padding: 50px 25px;
  }

  .aufbau-inhalt h2 {
    font-size: 24px;
  }

  .aufbau-inhalt p {
    font-size: 15px;
  }
}

/* FOOTER – DATENSCHUTZEINSTELLUNGEN */

.bremer-footer-bottom .bremer-cookie-settings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;

    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;

    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;

    color: #009fe3;
    cursor: pointer;
    transition: color 0.2s ease;
}

.bremer-footer-bottom .bremer-cookie-settings:hover {
    background: transparent;
    color: #56baff;
    transform: none;
}

/* BREMER PRINZIP – INFO-PANEL / DESKTOP */

@media (min-width: 851px) {

    .bremer-prinzip-schritte {
        width: 85%;
        margin: 40px auto 0;
        padding: 28px 20px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        background: #102638;
        border: 1px solid #102638;
        border-radius: 6px;
        box-sizing: border-box;
    }

    .bremer-prinzip-schritt {
        padding: 0 24px;
        text-align: center;
    }

    .bremer-prinzip-schritt + .bremer-prinzip-schritt {
        border-left: 1px solid #c0cdd6;
    }

    .bremer-prinzip-nummer {
        display: block;
        margin-bottom: 12px;
        color: #087efa;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.12em;
    }

    .bremer-prinzip-schritt h3 {
        margin: 0;
        font-size: 21px;
    }

    .bremer-prinzip-schritt p {
        margin: 14px auto 0;
        font-size: 16px;
        line-height: 1.5;
    }

    .bremer-prinzip-mehr {
        margin-top: 28px;
    }
}

/* BREMER PRINZIP – BUTTON-ABSTAND / DESKTOP */

@media (min-width: 851px) {
    .bremer-prinzip-mehr .bodenaufbruch-button {
        margin-top: 20px;
    }
}

/* BREMER PRINZIP – EINLEITUNG / DESKTOP */

@media (min-width: 851px) {
    .bremer-prinzip-einleitung {
        width: 85%;
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }
}