@charset "UTF-8";
/*
 * Estrel Tower — Nachhaltigkeitsseite
 * Figma 1113:138 "1920 - Screendesign - Nachhaltigkeit" (1920x10194).
 *
 * Die Seite besteht fast ausschliesslich aus vorhandenen Contentelementen
 * (room_hero, text_intro, room_fokus, eco_stream, feature_list, faq). Nur die
 * Masse weichen ab — Ueberschriften sind hier 40-42u statt 84u, die Bilder
 * 512u hoch statt 938u. Diese Datei haelt genau diese Abweichungen.
 *
 * Scoping laeuft ueber cssID-Klassen am Contentelement (eco-lead, eco-note,
 * eco-statement, eco-split). Der Contao-Wrapper aus _base.html.twig traegt die
 * Klasse, das Section-Markup liegt darin — daher immer ".eco-x .estrel-y".
 * Bewusst KEIN body.is-nachhaltigkeit: das haette einen neuen Flag im
 * PageCategoryResolver plus Container-Rebuild verlangt, fuer reine Typo-Masse
 * unverhaeltnismaessig.
 */

/* ----------------------------------------------- Full-Bleed-Reset (wichtig) */
/* layout.css hebt die Contao-Container-Breite mit [class^="content-estrel"]
   auf — das trifft NUR zu, wenn das class-Attribut damit beginnt. Sobald am
   Contentelement eine cssID-Klasse gesetzt ist, stellt Contao sie voran
   (class="eco-split content-estrel-room-fokus"), der Attribut-Anfang passt
   nicht mehr und der Wrapper faellt auf die 1100u des Artikel-Containers
   zurueck. Ergebnis waere ein 940u breiter Hero statt 1672u.
   Darum hier alle Wrapper dieser Seite explizit freistellen. */
.eco-hero,
.eco-intro,
.eco-split,
.eco-lead,
.eco-stream,
.eco-note,
.eco-statement,
.eco-features,
.eco-faq {
    max-width: none !important;
    padding: 0;
    margin: 0;
    width: 100%;
}

/* ---------------------------------------------------------------- Hero */
/* Figma 1113:270: Bildmaske x=125..1797 (1672u) auf 951u Hoehe, darueber
   Rectangle 327 #14172D mit opacity .2 / blend DARKEN — kein deckendes
   Overlay, das Motiv bleibt sichtbar. Headline #FED3CD. */
.eco-hero .estrel-zimmer-hero__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #14172D;
    opacity: 0.2;
    mix-blend-mode: darken;
    pointer-events: none;
}

/* Hero-Geometrie und -Typografie NUR ab Desktop.
   zimmer-hero.css bringt fuer <=1024px einen vollstaendigen eigenen Satz mit
   (Bild im Flow mit aspect-ratio, Titel als clamp()-Groesse ueber dem Bild).
   Ohne diese Klammer gewinnen die 270u/280u-Werte auch auf dem Handy — dort
   sind das absolute Pixel jenseits der Bildschirmbreite. */
@media (min-width: 1025px) {
    /* Der Zimmer-Hero ist 1199u hoch (dort folgt die Kategorie-Navigation).
       Hier endet der Hero mit dem Bild bei 951u, das Intro beginnt bei 1058u. */
    .eco-hero .estrel-zimmer-hero__inner {
        height: calc(951 * var(--u));
    }

    /* Headline — Figma 1113:277 (Gruppe x=-23, y=244, 1966x514u):
         "Estrel Tow"     Soehne 400   270/284u  @x475
         "er"             Soehne 400   270/284u  @x-23
         "Nachhaltigkeit" GT Alpina Thin Italic 280/274u, ls -2.8u  @x280
       Die Zimmer-Werte (300u, padding-left 730u, top 227u) gehoeren zum
       dortigen Entwurf und wuerden die Zeile hier rechts hinausschieben. */
    .eco-hero .estrel-zimmer-hero__title {
        top: calc(244 * var(--u));
        left: calc(-23 * var(--u));
        width: calc(1966 * var(--u));
        line-height: normal;
    }

    .eco-hero .estrel-zimmer-hero__title-line1 {
        font-size: calc(270 * var(--u));
        /* 221u statt 284u: Figma setzt beide Zeilen absolut, der sichtbare
           Zeilenabstand ist 465-244=221u. */
        line-height: calc(221 * var(--u));
        padding-left: calc(498 * var(--u));
    }

    .eco-hero .estrel-zimmer-hero__title-line2 {
        gap: calc(57 * var(--u));
        line-height: calc(284 * var(--u));
        padding-left: 0;
    }

    .eco-hero .estrel-zimmer-hero__title-line2-prefix {
        font-size: calc(270 * var(--u));
    }

    .eco-hero .estrel-zimmer-hero__title-line2-accent {
        font-size: calc(280 * var(--u));
        letter-spacing: calc(-2.8 * var(--u));
    }
}

/* ---------------------------------------------------------------- Intro */
/* Figma 1113:269: 1112u breit, Soehne 400 28/34, zentriert, y=1058.
   Entspricht exakt der Default-Paragraph-Variante von estrel_text_intro —
   hier nur der Abstand zum Hero (951 -> 1058 = 107u). */
.eco-intro .estrel-intro {
    padding-top: calc(107 * var(--u)) !important;
    padding-bottom: 0 !important;
}

/* ------------------------------------------------- Zentrierte Textbloecke */
/* Gemeinsame Basis fuer eco-lead / eco-note / eco-statement: der Fliesstext
   ist hier ueberall Soehne 18/27 statt der 28/34 aus der Intro-Default-Regel. */
.eco-lead .estrel-intro__inner,
.eco-note .estrel-intro__inner,
.eco-statement .estrel-intro__inner {
    font-size: calc(18 * var(--u));
    line-height: calc(27 * var(--u));
    color: #14172D;
}

.eco-lead .estrel-intro__inner p,
.eco-note .estrel-intro__inner p,
.eco-statement .estrel-intro__inner p {
    margin: 0 0 calc(12 * var(--u));
    color: #14172D;
}

.eco-lead .estrel-intro__inner p:last-child,
.eco-note .estrel-intro__inner p:last-child,
.eco-statement .estrel-intro__inner p:last-child {
    margin-bottom: 0;
}

/* "Platinstandard" — Figma 1113:349, GT Alpina 250 42/52, Lead 836u breit. */
.eco-lead .estrel-intro {
    padding-top: calc(302 * var(--u)) !important;
    padding-bottom: 0 !important;
}
.eco-lead .estrel-intro__inner {
    max-width: calc(836 * var(--u));
}
.eco-lead .estrel-intro__inner h2 {
    margin: 0 0 calc(6 * var(--u));
    /* Figma 1113:349 fontPostScriptName GTAlpina-ThinItalic. */
    font-family: var(--font-alpina);
    font-weight: 250;
    font-style: italic;
    font-size: calc(42 * var(--u));
    line-height: calc(52 * var(--u));
    color: #14172D;
}

/* Abschlusssatz unter dem Bildstreifen — Figma 1113:350, y=5635, 796u. */
.eco-note .estrel-intro {
    padding-top: calc(73 * var(--u)) !important;
    padding-bottom: 0 !important;
}
.eco-note .estrel-intro__inner {
    max-width: calc(796 * var(--u));
}

/* "Certicifed & Recognized" / "Ganzheitlich nachhaltig" — Soehne 400 40/52. */
.eco-statement .estrel-intro {
    padding-top: calc(194 * var(--u)) !important;
    padding-bottom: 0 !important;
}
.eco-statement .estrel-intro__inner {
    max-width: calc(796 * var(--u));
}
.eco-statement .estrel-intro__inner h2 {
    margin: 0 0 calc(34 * var(--u));
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(40 * var(--u));
    line-height: calc(52 * var(--u));
    color: #14172D;
}

/* Zweiter Statement-Block ("Ganzheitlich nachhaltig") sitzt 167u unter der
   vorherigen Section statt 194u. */
.eco-statement--tight .estrel-intro {
    padding-top: calc(167 * var(--u)) !important;
}

/* ------------------------------------------------ Split (room_fokus) */
/* Figma 1113:258 (y=1453) und 1113:323 (y=6363): Text 600u ab x=170u,
   Bild ab x=896u, 512u hoch — und im Entwurf 1125u breit, also 101u ueber die
   1920u-Kante hinaus. Statt das Bild ueberlaufen zu lassen (horizontale
   Scrollbar) laeuft die Bildspalte bis zum Viewport-Rand; object-fit: cover
   schneidet rechts genau den Teil weg, der im Figma ohnehin ausserhalb liegt. */
.eco-split .estrel-split {
    grid-template-columns: calc(600 * var(--u)) 1fr;
    gap: calc(126 * var(--u));
    padding: 0 0 0 calc(170 * var(--u)) !important;
    align-items: center;
}

.eco-split .estrel-split--image-right .estrel-split__media { grid-column: 2; }
.eco-split .estrel-split--image-right .estrel-split__text  { grid-column: 1; }

/* Bild links: Raster spiegeln — sonst stuende das Bild in der schmalen
   Textspalte mit Rand statt an der Kante anzuschneiden. Gleiches Problem wie
   auf der Karriere-Seite (Meldung Jana 27.07.2026); hier vorsorglich, damit ein
   Umstellen der Bildposition im Backend nicht dasselbe Ergebnis liefert. */
.eco-split .estrel-split--image-left {
    grid-template-columns: 1fr calc(600 * var(--u));
    padding: 0 calc(170 * var(--u)) 0 0 !important;
}

.eco-split .estrel-room-fokus {
    margin-top: calc(257 * var(--u)) !important;
}

/* Zweiter Split ("Teil einer nachhaltigen Strategie") — 286u Abstand. */
.eco-split--strategie .estrel-room-fokus {
    margin-top: calc(286 * var(--u)) !important;
}

.eco-split .estrel-split__media {
    height: calc(512 * var(--u));
    border-radius: calc(3 * var(--u));
}

.eco-split .estrel-split__heading {
    margin: 0 0 calc(28 * var(--u));
    font-size: calc(40 * var(--u));
}
.eco-split .estrel-split__heading-main {
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(40 * var(--u));
    line-height: calc(52 * var(--u));
}
/* Figma 1113:266/336: der FUEHRENDE Run ("Nachhaltigkeit " bzw. "Teil einer ")
   steht in GT Alpina Thin Italic 42 gegen Söhne 40, alles in EINEM Textfluss —
   der Umbruch laeuft im Design durch die Grenze kursiv/regular ("…als Teil /
   jeder Entscheidung"). Deshalb kommt der Akzent als ##…##-Highlight IM
   Haupt-Feld (EstrelEmHighlightListener → <em>), nicht ueber das Akzent-Feld,
   das im Template immer HINTER dem Haupt-Teil steht. 1.05em statt fixer
   Groesse, damit der Akzent bei 34u/28u mitskaliert (Asana "Nachhaltigkeit -
   Hintergrund, Schrift und Mobile", Jana 14.08.). */
.eco-split .estrel-split__heading-main em {
    font-size: 1.05em;
    line-height: inherit;
}

/* Guard: fuellt die Redaktion das Akzent-Feld doch, darf zimmer.css (84u +
   display:block = doppelte Groesse in eigener Zeile) nicht mehr durchschlagen. */
.eco-split .estrel-split__heading-accent {
    display: inline;
    font-size: 1.05em;
    line-height: inherit;
    margin-left: 0.25em;
}
/* Ohne Akzent-Teil darf das leere <em> keine Leerzeile erzeugen. */
.eco-split .estrel-split__heading-accent:empty { display: none; }

@media (min-width: 1025px) {
    /* Figma-Boxbreiten: 478u = zwei Zeilen, 574u = eine Zeile. */
    .eco-split .estrel-split__heading            { max-width: calc(478 * var(--u)); }
    .eco-split--strategie .estrel-split__heading { max-width: calc(574 * var(--u)); }
}

.eco-split .estrel-split__body {
    font-size: calc(18 * var(--u));
    line-height: calc(27 * var(--u));
    max-width: calc(600 * var(--u));
    margin-bottom: calc(48 * var(--u));
}
/* Farbe am <p> selbst, nicht nur am Container: typography.css setzt
   p { color: var(--text-secondary) } = 70 % Deckkraft, und ein direkt
   gesetzter Wert schlaegt den geerbten (Meldung Jana 27.07.). */
.eco-split .estrel-split__body p {
    margin: 0 0 calc(20 * var(--u));
    color: #14172D;
}
.eco-split .estrel-split__body p:last-child { margin-bottom: 0; }

/* Pill "Nachhaltigkeitsstrategie Estrel" — Figma 1113:339: 329x30u, r=41.5u,
   GT Alpina 250 19/22, letter-spacing 2.09u. */
.eco-split .estrel-split__cta-primary {
    min-width: 0;
    height: calc(30 * var(--u));
    padding: 0 calc(14 * var(--u));
    font-family: var(--font-alpina);
    font-weight: 250;
    font-size: calc(19 * var(--u));
    line-height: calc(22 * var(--u));
    letter-spacing: calc(2.09 * var(--u));
    border-radius: calc(41.5 * var(--u));
    color: #14172D;
}

/* Seite ist theme-fixiert hell (fe_page pinnt sunrise + is-eco) — der
   Sunset/Sunrise-Schalter haette keine Funktion und wird versteckt
   (Muster wie body.is-kontakt / body.is-karriere). */
body.is-eco .estrel-theme-toggle { display: none !important; }

/* ------------------------------------------------ Eco-Stream Abstaende */
/* Der Top-Abstand des Streams lebt in eco-stream.css (section.estrel-eco-stream):
   dessen Full-Bleed-Freistellung setzt margin mit !important — eine margin-Regel
   an dieser Stelle kommt nie an (der alte Figma-45u-Wert verpuffte genau so). */

/* ------------------------------------------------ Feature-List */
/* Figma 1113:351 ff.: Liste 1466u breit ab x=235u, 125u unter dem Statement. */
.eco-features .estrel-feature-list {
    padding-top: calc(125 * var(--u)) !important;
}

/* Titel-Akzent: Der Controller trennt jeden Titel in erstes Wort + Rest und
   setzt das erste Wort in GT Alpina Thin Italic (Meetings-Konvention, z.B.
   "LED Waende"). Das Screendesign zeigt die vier Titel hier zwar durchgehend
   in Soehne 400 40/80 (Figma 1113:354-356) — die Redaktion moechte den
   kursiven Akzent aber auch auf dieser Seite (Jana 27.07.), damit die Seite
   zu Meetings und Karriere passt. Daher KEIN Override: der Theme-Standard
   (GT Alpina Thin Italic 250, 43u) gilt bewusst. */

/* Der Controller trennt den Titel in zwei Spans; auf dieser Seite tragen beide
   denselben Schnitt, der Zwischenraum ist also ein normaler Wortabstand.
   Das kollabierte Leerzeichen aus dem Markup ergibt nur 4px bei 40px Schrift —
   viel zu eng (Meldung Jana 27.07.). Der 0.25em-Abstand aus feature-list.css
   bleibt deshalb stehen; frueher hatte ich ihn hier auf 0 gesetzt. */

/* Aufgeklappter Eintrag — Figma 1113:381: GT Alpina 250 45/80 in Creme. */
.eco-features .estrel-feature-list__item.is-expanded .estrel-feature-list__title-accent,
.eco-features .estrel-feature-list__item.is-expanded .estrel-feature-list__title-main {
    font-family: var(--font-alpina);
    font-style: italic;
    font-weight: 250;
    font-size: calc(45 * var(--u));
}

/* ------------------------------------------------ FAQ */
.eco-faq {
    display: block;
    margin-top: calc(232 * var(--u));
}

/* ---------------------------------------------------------------- Tablet */

/* Hero-Headline 768-1024u.
   zimmer-hero.css setzt in diesem Bereich zwar clamp()-Schriftgroessen, laesst
   aber padding-left:730u und width:2145u der Desktop-Regel stehen. Bei --u=1
   (dort auf 1024 verankert) sind das 730px Einzug auf 1024px Breite — "Estrel
   Tow" steht dann fast vollstaendig ausserhalb. Auf /zimmer faellt das kaum
   auf, weil dort nur "Zimmer" folgt; "Nachhaltigkeit" ist deutlich laenger.
   Loesung wie im Mobil-Block des Themes: Zeile 1 rechtsbuendig, Zeile 2 im
   Fluss — der Figma-Anschnitt bleibt erhalten. */
@media (min-width: 768px) and (max-width: 1024px) {
    .eco-hero .estrel-zimmer-hero__title {
        left: 0;
        right: 0;
        width: 100%;
        padding: 0 calc(24 * var(--u));
    }
    .eco-hero .estrel-zimmer-hero__title-line1 {
        padding-left: 0;
        text-align: right;
        line-height: 0.94;
    }
    .eco-hero .estrel-zimmer-hero__title-line2 {
        /* Figma haelt 57u zwischen "er" und "Nachhaltigkeit"; die 0.4rem aus
           dem Mobil-Muster sind bei 110px-Glyphen praktisch unsichtbar und die
           Woerter lesen sich als eines. */
        gap: clamp(14px, 3.5vw, 34px);
        padding-left: 0;
        line-height: 0.94;
    }
    .eco-hero .estrel-zimmer-hero__title-line2-prefix,
    .eco-hero .estrel-zimmer-hero__title-line2-accent {
        font-size: clamp(70px, 11vw, 110px);
        letter-spacing: 0;
    }

    /* Der Hero endet auf Tablet mit dem Bild; 107u Desktop-Abstand ergeben
       hier zusammen mit dem Innenabstand des Heros ein zu grosses Loch. */
    .eco-intro .estrel-intro {
        padding-top: calc(56 * var(--u)) !important;
    }
}

/* Zwischen 901 und 1024u verankert zimmer.css --u fuer .estrel-split nirgends
   neu: der Wert bleibt auf 1920 bezogen (--u = 0.53), Ueberschrift und Text
   schrumpfen auf 21px bzw. 9px. Unterhalb 901u greift dort bereits eine eigene
   Regel, darum genau dieses Fenster nachziehen. */
@media (min-width: 901px) and (max-width: 1024px) {
    .eco-split .estrel-split {
        --u: calc(100cqi / 1024);
    }
    .eco-split .estrel-split__heading,
    .eco-split .estrel-split__heading-main {
        font-size: calc(34 * var(--u));
        line-height: calc(44 * var(--u));
    }
    .eco-split .estrel-split__body {
        font-size: calc(17 * var(--u));
        line-height: calc(26 * var(--u));
    }
}

@media (max-width: 1024px) {
    .eco-split .estrel-split {
        grid-template-columns: 1fr;
        gap: calc(32 * var(--u));
        padding: 0 calc(40 * var(--u)) !important;
    }
    .eco-split .estrel-split--image-right .estrel-split__media,
    .eco-split .estrel-split--image-right .estrel-split__text {
        grid-column: 1;
    }
    .eco-split .estrel-split__media { height: calc(380 * var(--u)); }
    .eco-split .estrel-split__body { max-width: none; }

    .eco-lead .estrel-intro__inner,
    .eco-note .estrel-intro__inner,
    .eco-statement .estrel-intro__inner {
        max-width: none;
        padding: 0 calc(40 * var(--u));
    }
}

@media (max-width: 767px) {
    .eco-intro .estrel-intro { padding-top: calc(48 * var(--u)) !important; }
    .eco-lead .estrel-intro { padding-top: calc(64 * var(--u)) !important; }
    .eco-note .estrel-intro { padding-top: calc(40 * var(--u)) !important; }
    .eco-statement .estrel-intro { padding-top: calc(64 * var(--u)) !important; }
    .eco-statement--tight .estrel-intro { padding-top: calc(56 * var(--u)) !important; }

    .eco-split .estrel-room-fokus,
    .eco-split--strategie .estrel-room-fokus {
        margin-top: calc(64 * var(--u)) !important;
    }
    .eco-split .estrel-split__heading,
    .eco-split .estrel-split__heading-main {
        font-size: calc(30 * var(--u));
        line-height: calc(38 * var(--u));
    }

    .eco-features .estrel-feature-list { padding-top: calc(56 * var(--u)) !important; }
    .eco-faq { margin-top: calc(64 * var(--u)); }

    /* Mobil greifen die Groessen aus feature-list.css (Akzent 20u / Main 18u) —
       hier bewusst kein Override, damit der kursive Akzent auch auf kleinen
       Bildschirmen sichtbar bleibt. */
}