/* ========================================================================== LMU Alumni – Layout-Korrekturen Wird NACH dem eingebauten CSS geladen und überschreibt es gezielt. Reihenfolge im ist wichtig: diese Datei muss zuletzt kommen. ========================================================================== */ /* --- 1 Luft zwischen den Abschnitten ---------------------------------- */ :root{ --pad: clamp(48px, 7vw, 78px); } /* --- 2 Einheitliche linke Kante --------------------------------------- */ /* Vorher liefen wrap (1080), wrap-l (1040) und wrap-s (780) nebeneinander. Weil alle zentriert sind, sprang die linke Kante von Abschnitt zu Abschnitt. Jetzt: gleiche Außenbreite, Zeilenlänge wird über die Inhalte begrenzt. */ .wrap-s, .wrap-m, .wrap-l{ max-width:1080px; } .wrap-s > h2, .wrap-s > .lede, .wrap-s > p{ max-width:720px; } .wrap-m > h2, .wrap-m > .lede{ max-width:820px; } /* --- 3 Hero mobil: Gesicht oben, Text darunter ------------------------ */ @media (max-width:1023.98px){ .hero{ min-height:0; padding-top:clamp(230px, 46vw, 340px); align-items:flex-end; } /* Portrait füllt die obere Fläche und blendet nach unten ins Grün aus */ .hero-b-img{ left:0; right:0; top:0; width:100%; height:clamp(300px, 60vw, 440px); background-size:cover !important; background-position:50% 14% !important; opacity:1; -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 54%,rgba(0,0,0,.35) 84%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 54%,rgba(0,0,0,.35) 84%,transparent 100%); } /* Oben durchsichtiger, damit das Gesicht sichtbar bleibt; unten kräftiger, damit der Text guten Kontrast hat */ .hero-scrim{ background: linear-gradient( 35deg, rgba(5,67,36,.92) 0%, rgba(5,67,36,.76) 28%, rgba(5,67,36,.52) 56%, rgba(5,67,36,.22) 78%, rgba(5,67,36,0) 100% )!important; } .hero-col{ margin-left:0; max-width:100%; } } /* === END HERO FINAL === */ /* ========================================================== HERO DESKTOP (V1 + V2) ========================================================== */ .hero__media img, .hero-v2__media img{ object-fit:cover !important; object-position:70% center !important; transform:scale(1.00) !important; } /* ========================================================== HERO MOBILE ========================================================== */ @media (max-width:768px){ .hero__media img, .hero-v2__media img{ object-position:72% center !important; transform:scale(1.18) !important; } } /* ========================================================== HERO POSITION (V1 + V2) ========================================================== */ .hero__media img, .hero-v2__media img{ object-fit: cover !important; /* Desktop */ object-position: 63% center !important; transform: scale(1.03) !important; } /* ========================================================== MOBILE ========================================================== */ @media (max-width:768px){ .hero__media img, .hero-v2__media img{ object-position:72% center !important; transform:scale(1.18) !important; } } /* ========================================================== HERO DESKTOP FINAL (nur Desktop) ========================================================== */ @media (min-width:1025px){ .hero-b-img{ right:-6% !important; width:clamp(420px,48%,640px) !important; height:112% !important; object-fit:contain !important; object-position:left center !important; transform:none !important; } .hero-col{ max-width:560px !important; margin-left:-24px !important; } .hero-scrim{ background: linear-gradient( 90deg, rgba(6,63,34,.92) 0%, rgba(8,78,42,.82) 28%, rgba(10,96,50,.60) 52%, rgba(12,112,58,.34) 74%, rgba(12,112,58,.08) 100% ) !important; } } /* ========================================================== HERO POSITIONING V1 + V2 Desktop identisch Mobile identisch ========================================================== */ /* ---------- Desktop ---------- */ @media (min-width:769px){ .hero__media img, .hero-v2__media img{ object-fit:cover !important; object-position:58% center !important; transform:scale(1.00) !important; } } /* ---------- Mobile ---------- */ @media (max-width:768px){ .hero__media img, .hero-v2__media img{ object-fit:cover !important; /* Frau etwas weiter rechts, damit das Gesicht nicht mittig, sondern wie bei V1 sitzt */ object-position:78% center !important; transform:scale(1.18) !important; } } /* ========================================================== HERO FINAL V1 + V2 Desktop + Mobile identisch ========================================================== */ /* Beide Hero-Varianten */ .hero, .hero-v2{ overflow:hidden; } .hero__media, .hero-v2__media{ position:absolute; inset:0; } .hero__media img, .hero-v2__media img{ width:100%; height:100%; object-fit:cover; transition:none; } /* ========================================================== DESKTOP ========================================================== */ @media (min-width:769px){ /* Person größer und weiter links wie Referenz */ .hero__media img, .hero-v2__media img{ object-position:58% center !important; transform:scale(1.03) !important; } /* schönerer Verlauf */ .hero__overlay, .hero-v2__overlay{ background: linear-gradient( 90deg, rgba(8,77,44,.96) 0%, rgba(12,96,55,.84) 36%, rgba(25,120,72,.42) 66%, rgba(25,120,72,.08) 100% ) !important; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width:768px){ /* Mehr Luft oben/unten */ .hero__content, .hero-v2__content{ padding-top:72px !important; padding-bottom:72px !important; } /* Person etwas weiter rechts, damit das Gesicht nicht mittig sitzt */ .hero__media img, .hero-v2__media img{ object-position:82% center !important; transform:scale(1.18) !important; } /* Verlauf links unten -> rechts oben */ .hero__overlay, .hero-v2__overlay{ background: linear-gradient( 35deg, rgba(8,77,44,.97) 0%, rgba(12,96,55,.90) 42%, rgba(25,120,72,.55) 72%, rgba(25,120,72,.12) 100% ) !important; } } /* ========================================================== HERO PORTRAITS – SINGLE SOURCE OF TRUTH ========================================================== */ /* ---------- Desktop ---------- */ @media (min-width:769px){ /* V1 Mann */ .hero__media img{ object-fit:cover !important; object-position:56% center !important; transform:scale(1.00) !important; } /* V2 Frau */ .hero-v2__media img{ object-fit:cover !important; object-position:56% center !important; transform:scale(1.10) !important; } } /* ---------- Mobile ---------- */ @media (max-width:768px){ /* V1 */ .hero__media img{ object-fit:cover !important; object-position:72% center !important; transform:scale(1.18) !important; } /* V2 */ .hero-v2__media img{ object-fit:cover !important; object-position:72% center !important; transform:scale(1.25) !important; } }