@charset "UTF-8"; /* * Estrel Tower — Eco-Stream (Nachhaltigkeit) * Figma 1113:138, y=2391..5562. * * Sechs Bilder (357x512u) bilden einen durchgehenden Streifen in der Blattmitte * (x=824..1181u), die Textblöcke sitzen abwechselnd links (x=372u) und rechts * (x=1257u) und sind vertikal auf ihr Bild zentriert. * * Spaltenraster aus Figma: * 372u Rand | 452u Text-links | 357u Bild | 76u Lücke | 478u Text-rechts | Rest * Die Text-Spalten sind an den Überschriften-Boxen (478u) bemessen, nicht am * Fließtext (393u) — sonst brechen "Wasser und Ressourcen" bzw. "Intelligente * Steuerung" auf zwei Zeilen um. */ /* layout.css gibt jedem section[class^="estrel-"] die Container-Breite plus Section-Padding. Der Bildstreifen ist voll-bleed und bringt seine Masse selbst mit — daher explizit freistellen. !important ist hier noetig, nicht bequem: diese Datei wird ueber $GLOBALS['TL_CSS'] im Controller eingebunden und landet dadurch VOR layout.css im . Bei gleicher Spezifitaet (0,1,1) gewinnt sonst layout.css ueber die Quellreihenfolge. */ section.estrel-eco-stream { max-width: none !important; padding: 0 !important; /* Top-Abstand zum Lead-Text MUSS hier stehen: das !important dieser Freistellung schluckt jede margin-Regel aus nachhaltigkeit-page.css (so verpuffte der alte Figma-45u-Wert unbemerkt). Kundenfreigabe 30.07.: sichtbarer Ist-Abstand + 20px. */ margin: calc(20 * var(--u)) auto 0 !important; } .estrel-eco-stream { container-type: inline-size; --u: calc(min(100vw, 1920px) / 1920); --eco-navy: #14172D; /* Figma notiert an den Textebenen dieser Seite #000000, mischt es aber mit #14172D (Split-Ueberschrift) — offensichtlich unbeabsichtigt. Der restliche Auftritt setzt durchgaengig das Marken-Navy; reines Schwarz auf dem Creme-Grund #FEF5EC wirkt zudem haerter. Abstimmung 27.07.2026: einheitlich Navy. */ --eco-text: #14172D; /* Bildhöhe über den Rahmen hinaus, damit der Parallax-Versatz keine Lücken an Ober-/Unterkante reißt. parallax.js verschiebt maximal (Bildhöhe + vh/2) * speed. Bei speed 0.10 und 1200px Viewporthöhe sind das (512 + 600) * 0.10 ≈ 111px — 140u Reserve je Seite decken das mit Puffer ab. Wird die Stärke im Template erhöht, MUSS dieser Wert mitwachsen. */ --eco-bleed: calc(140 * var(--u)); position: relative; } .estrel-eco-stream__rows { display: flex; flex-direction: column; /* Figma: Bildunterkante zu Bildoberkante der Folgezeile = 24u. */ gap: calc(24 * var(--u)); } .estrel-eco-stream__row { display: grid; grid-template-columns: calc(372 * var(--u)) calc(452 * var(--u)) calc(357 * var(--u)) calc(76 * var(--u)) calc(478 * var(--u)) 1fr; align-items: center; } .estrel-eco-stream__media { grid-column: 3; /* grid-row zwingend: im DOM steht das Bild (Spalte 3) vor dem Text (Spalte 2). Ohne explizite Zeile schiebt die Autoplatzierung den Text in Zeile 2, weil der Platzierungs-Cursor Spalte 3 bereits passiert hat — Bild und Text stuenden dann untereinander statt nebeneinander. */ grid-row: 1; position: relative; height: calc(512 * var(--u)); overflow: hidden; border-radius: calc(3 * var(--u)); background: #D9D9D9; } .estrel-eco-stream__image { position: absolute; left: 0; top: calc(-1 * var(--eco-bleed)); width: 100%; height: calc(100% + 2 * var(--eco-bleed)); object-fit: cover; display: block; will-change: transform; } .estrel-eco-stream__text { grid-row: 1; } .estrel-eco-stream__row.is-left .estrel-eco-stream__text { grid-column: 2; } .estrel-eco-stream__row.is-right .estrel-eco-stream__text { grid-column: 5; } .estrel-eco-stream__title { margin: 0 0 calc(8 * var(--u)); /* Figma fontPostScriptName GTAlpina-ThinItalic. */ font-family: var(--font-alpina); font-style: italic; font-weight: 250; font-size: calc(42 * var(--u)); line-height: calc(52 * var(--u)); letter-spacing: 0; color: var(--eco-text); /* Figma bemisst die Ueberschriften-Box mit 478u — breiter als die linke Textspalte (452u). Ohne diese Breite bricht "Wasser und Ressourcen" auf zwei Zeilen. Die 26u Ueberhang liegen im Zwischenraum vor dem Bild; die tatsaechlichen Glyphen bleiben deutlich darunter. */ width: calc(478 * var(--u)); max-width: none; } .estrel-eco-stream__body { max-width: calc(393 * var(--u)); font-family: var(--font-soehne); font-weight: 400; font-size: calc(18 * var(--u)); line-height: calc(27 * var(--u)); color: var(--eco-text); } .estrel-eco-stream__body p { margin: 0 0 calc(16 * var(--u)); /* Farbe MUSS am

selbst stehen: typography.css setzt p { color: var(--text-secondary) } = 70 % Deckkraft. Ein direkt gesetzter Wert schlaegt einen geerbten immer — die Farbe am Container allein reicht daher nicht (Meldung Jana 27.07.). */ color: var(--eco-text); } .estrel-eco-stream__body p:last-child { margin-bottom: 0; } /* ---------------------------------------------------------------- Tablet */ /* Unter 1024px trägt das dreispaltige Raster nicht mehr: 357u Bild werden zu schmal für ein erkennbares Motiv. Bild und Text rücken nebeneinander in ein 50/50-Raster, die Seite bleibt erhalten (links/rechts alternierend). */ @media (max-width: 1024px) { .estrel-eco-stream { --u: calc(100vw / 1024); } /* !important, weil der Full-Bleed-Reset oben padding:0 !important setzt. */ section.estrel-eco-stream { padding: 0 calc(40 * var(--u)) !important; } /* Die 478u-Titelbreite gilt nur fuer das dreispaltige Desktop-Raster. Ab hier fuellt der Titel seine Spalte — 478px waeren auf schmalen Viewports breiter als der Bildschirm und wuerden die Seite horizontal aufreissen. */ .estrel-eco-stream__title { width: auto; } .estrel-eco-stream__rows { gap: calc(48 * var(--u)); } .estrel-eco-stream__row { grid-template-columns: 1fr 1fr; gap: calc(40 * var(--u)); } .estrel-eco-stream__media { height: calc(420 * var(--u)); } .estrel-eco-stream__row.is-left .estrel-eco-stream__media, .estrel-eco-stream__row.is-right .estrel-eco-stream__media { grid-column: 2; grid-row: 1; } .estrel-eco-stream__row.is-left .estrel-eco-stream__text, .estrel-eco-stream__row.is-right .estrel-eco-stream__text { grid-column: 1; grid-row: 1; padding-right: 0; } /* Rechts-Zeilen spiegeln: Bild links, Text rechts. */ .estrel-eco-stream__row.is-right .estrel-eco-stream__media { grid-column: 1; } .estrel-eco-stream__row.is-right .estrel-eco-stream__text { grid-column: 2; } .estrel-eco-stream__title { font-size: calc(36 * var(--u)); line-height: calc(44 * var(--u)); } .estrel-eco-stream__body { max-width: none; font-size: calc(17 * var(--u)); line-height: calc(26 * var(--u)); } } /* ---------------------------------------------------------------- Mobil */ /* parallax.js schaltet unter 768px ab (kein transform mehr) — der negative Versatz aus --eco-bleed muss hier zurückgenommen werden, sonst hängt das Bild dauerhaft zu hoch im Rahmen. */ @media (max-width: 767px) { .estrel-eco-stream { --u: calc(100vw / 375); } section.estrel-eco-stream { padding: 0 calc(20 * var(--u)) !important; } .estrel-eco-stream__rows { gap: calc(40 * var(--u)); } .estrel-eco-stream__row, .estrel-eco-stream__row.is-left, .estrel-eco-stream__row.is-right { grid-template-columns: 1fr; gap: calc(20 * var(--u)); } .estrel-eco-stream__row.is-left .estrel-eco-stream__media, .estrel-eco-stream__row.is-right .estrel-eco-stream__media { grid-column: 1; grid-row: 1; height: calc(280 * var(--u)); } .estrel-eco-stream__row.is-left .estrel-eco-stream__text, .estrel-eco-stream__row.is-right .estrel-eco-stream__text { grid-column: 1; grid-row: 2; padding-right: 0; } .estrel-eco-stream__image { top: 0; height: 100%; transform: none !important; } .estrel-eco-stream__title { font-size: calc(28 * var(--u)); line-height: calc(34 * var(--u)); } .estrel-eco-stream__body { font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); } } /* Bewegungsempfindliche Nutzer: kein Parallax-Versatz. */ @media (prefers-reduced-motion: reduce) { .estrel-eco-stream__image { top: 0; height: 100%; transform: none !important; } }