/* ==========================================================================
Angleichung an die FM-Seite (schaefernew.local)
--------------------------------------------------------------------------
Dieser Block buendelt die rein optischen Angleichungen an die FM-Seite an
EINER Stelle, damit man sie leicht wieder zuruecknehmen kann:
In functions.php einfach die Zeile mit 'go-fm-align-styles' auskommentieren
(oder entfernen) – dann ist alles wie vorher, ohne dass an anderen Dateien
etwas geaendert werden muss.
========================================================================== */
/* 1a) Logo buendig an die Oberkante ausrichten.
Auf der FM-Seite sitzt das Logo mit der Oberkante bei 0. Diese Seite
hatte 20px margin-top (Unterseiten) bzw. 12px (Startseite mit
Vollbild-Hero) plus 5px padding, wodurch das Logo tiefer sass. */
.logo_schaefer {
margin-top: 0;
padding: 0;
}
body.has-fullscreen-hero #headerWrapper .logo_schaefer {
margin-top: 0 !important;
}
/* 1b) Logo-Groesse an FM angleichen. FM steuert ueber die Hoehe (80px), diese
Seite ueber eine fixe Breite (232px) -> dadurch war es mit 77px etwas
kleiner. Ueber Hoehe 80px + Breite auto wird es 252 x 80px = wie FM.
Auch der verkleinerte Sticky-Zustand (.fixed) behaelt so das korrekte
Seitenverhaeltnis. */
#headerWrapper .logo_schaefer,
.fixed #headerWrapper .logo_schaefer {
width: auto !important;
height: 80px !important;
}
/* 2) Ueberschriften: die Helvetica-Body-Schrift erben wie auf der FM-Seite,
statt Open Sans zu erzwingen. */
h1, h2, h3, h4, h5, h6 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* Ausnahmen: diese Ueberschriften nutzt FM bewusst weiterhin in Open Sans –
u.a. die grossen schwarzen Startseiten-Ueberschriften (.front-large) sowie
die Hero-/Carousel-Titel. In Helvetica wirken sie sonst dicker als bei FM. */
.front-large,
.carousel-caption h2,
.carousel-caption h4,
.front-video-frame h2,
.headerImage h2,
.headerImage h4 {
font-family: "Open Sans", sans-serif;
}
/* 3) Logo exakt mittig ausrichten wie bei FM. Der Logo-Container hatte rechts
15px Padding (links 0), wodurch das zentrierte Logo ~8px zu weit links
sass. Ohne das Padding sitzt die Logo-Mitte genau auf der Seitenmitte –
das Logo steht dann auf beiden Seiten gleich, nur der Text rechts daneben
unterscheidet sich. */
.logocontainer {
padding-right: 0 !important;
}
/* 4) Per-Seite Header-Optionen (gesteuert ueber die ACF-Felder / Body-Klassen
aus functions.php).
4a) "Headline & Untertitel auf Bild anzeigen": Titel/Slogan sind sonst per
.header-background-image h2/h4 { display:none } ausgeblendet. Hier werden
sie eingeblendet und wie bei FM unten links, weiss ueber dem Bild
positioniert. */
body.sre-titel-auf-bild .headerImageNonFluid,
body.sre-titel-auf-bild .headerImage {
position: relative;
}
body.sre-titel-auf-bild .header-background-image h2,
body.sre-titel-auf-bild .header-background-image h4,
body.sre-titel-auf-bild .headerImage h2,
body.sre-titel-auf-bild .headerImage h4 {
display: block !important;
color: #fff !important;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
max-width: 60%;
margin: 0;
}
/* Titelblock unten links ueber dem Bild (FM-Layout).
padding-left 30px = linke Inhaltskante darunter: der Seiteninhalt sitzt in
einem Bootstrap `.container > .row > .col` -> Spalteninhalt liegt bei
Container + 15px (Container-Padding) + 15px (Spalten-Padding) = +30px. Titel/
Untertitel/Button fluchten damit exakt mit dem Inhalt unter dem Header. */
body.sre-titel-auf-bild .headerImageNonFluid .header-background-image {
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-bottom: 48px;
padding-left: 30px;
}
/* Fluid-Zweig (volle Breite): Text steckt in `.container.headline`; dessen
linke Kante ebenfalls auf die Inhaltskante (Container + 30px) bringen. */
body.sre-titel-auf-bild .headerImage .headline {
padding-left: 30px;
}
body.sre-titel-auf-bild .header-background-image h4 {
margin-top: 10px;
}
/* WICHTIG (Flucht mit dem Inhalt bei jeder Fensterbreite): Der Header-`.container`
sitzt in einem `.container-fluid` (`.headerImageNonFluid`/`.headerImage`) mit
15px seitlichem Innenabstand, der Seiteninhalt (`.mainContentArea`) aber direkt
im ohne Wrapper-Padding. Dadurch zentriert die innere Header-Spalte in
einer um 30px schmaleren Breite als der Inhalt -> bei Fensterbreiten nahe der
Container-Maximalbreite (typische Laptop-Breiten) laufen Titel und Video-/
Inhaltskante um einige Pixel auseinander (Titel steht rechts daneben). Fix:
den seitlichen Innenabstand des Header-`.container-fluid` entfernen, dann
zentriert die Header-Spalte identisch zum Inhalt -> Titel fluchtet exakt.
(Das Header-Bild fuellt weiterhin die volle Breite; es liegt auf ::before.) */
body.sre-titel-auf-bild .headerImageNonFluid,
body.sre-titel-auf-bild .headerImage {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* 4b) Statischer Modus: Ken-Burns-Zoom stoppen und den Zoom (scale)
zuruecksetzen, damit das Bild ruhig steht und der Titel sauber sitzt.
Gilt fuer den expliziten sre-static/sre-no-anim-Modus UND generell fuer
"Titel auf Bild": dort soll der Text NICHT mit dem Bild mitzoomen (der
Titel ist ein Kind des animierten Containers und lief sonst mit) – FM
zeigt den Inhaltsseiten-Header ebenfalls voellig ruhig/statisch. */
body.sre-static .header-background-image,
body.sre-no-anim .header-background-image,
body.sre-titel-auf-bild .header-background-image,
body.sre-titel-auf-bild .headerImage,
body.sre-titel-auf-bild .headerImage .header-background-image {
-webkit-animation: none !important;
animation: none !important;
-webkit-transform: none !important;
transform: none !important;
}
/* 4c) Animierter "Bild bis oben"-Modus: Ken-Burns laeuft weiter, aber der Zoom
geht vom unteren Bildrand aus – so bleibt der Titel unten ruhig sitzen,
waehrend das Bild sanft zoomt. */
body.sre-titel-auf-bild:not(.sre-static) .headerImageNonFluid .header-background-image {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
/* 4d) Titel steht dann auf dem Bild – die identische Content-Ueberschrift
darunter ausblenden, damit der Seitentitel nicht doppelt erscheint. */
body.sre-titel-auf-bild .main_text_area > h1 {
display: none;
}
/* 4e) Optionaler Header-Button (FM-Layout): halbtransparent grau, weisser
Rahmen, weisser Text. Sitzt ueber dem Bild/Video, unter dem Titel. */
.sre-header-btn {
display: inline-block;
align-self: flex-start;
margin-top: 18px;
padding: 10px 16px;
background-color: rgba(193, 193, 193, 0.61);
border: 2px solid #fff;
border-radius: 3px;
color: #fff !important;
font-size: 16px;
line-height: 1.1;
text-decoration: none !important;
}
.sre-header-btn:hover {
background-color: rgba(255, 255, 255, 0.28);
color: #fff !important;
}
/* Button im Video-Hero der Startseite mittig unter der Caption */
.carousel-caption .sre-header-btn {
margin-top: 22px;
}
/* Button linksbuendig in einer Flucht mit Titel/Untertitel. Der gemeinsame
linke Rand kommt vom Container (Abschnitt 4a, padding-left:20px); der grosse
Titel-Einzug (template.css padding-left:140px) wird in Abschnitt 13 auf 0
normalisiert, damit Titel, Untertitel und Button an DERSELBEN Kante stehen.
Vorher lag der Button 120px links daneben, weil er den 140px-Einzug nicht
mitbekam. */
body.sre-titel-auf-bild .header-background-image .sre-header-btn,
body.sre-titel-auf-bild .headerImage .sre-header-btn {
margin-left: 0;
}
/* 5) "Aktuelle Angebote" mit den uebrigen Startseiten-Ueberschriften fluchten
lassen. Diese Ueberschrift steckt (anders als die anderen) zusaetzlich in
.row > .col-md-12; dessen 15px Spalten-Padding schob sie 15px nach rechts.
Das Padding des Ueberschriften-Wrappers wird hier nur in der grauen
Angebots-Sektion entfernt, damit sie in einer Flucht steht. */
.container-gray .container-headline-front {
padding-left: 0;
}
/* 6) Die drei Startseiten-Teaser (Gewerbe / Wohnen / Grundstuecke) an FM
angleichen: FM zeigt die Titelleiste in normaler Schriftstaerke (400),
RE hatte sie fett (700) und 2px mehr Padding oben. */
.teaser-title.front-title {
font-weight: 400 !important;
padding: 8px 8px 8px 15px !important;
}
/* 7) Kategorie-/Archiv-Header wie FM.
7a) Das Header-Bild soll bis ganz oben laufen und vom weissen, leicht
transparenten Header ueberdeckt werden (auf diesen Seiten steht das Bild
am Seitenanfang, daher kann der 140px-Platzhalter #headerWrapperBackground
entfallen). Body-Klasse sre-headerimg-top kommt aus header.php. */
body.sre-headerimg-top #headerWrapperBackground {
display: none !important;
}
body.sre-headerimg-top .headerImage {
margin-top: 0 !important;
}
/* 7b) Headline & Untertitel ueber dem Bild in FM-Form: Open Sans, 36/24px,
Schriftstaerke 650 statt 46px/800. */
.headerImage_angebote h2 {
font-family: "Open Sans", sans-serif !important;
font-size: 36px !important;
font-weight: 650 !important;
}
.headerImage_angebote h4 {
font-family: "Open Sans", sans-serif !important;
font-size: 24px !important;
font-weight: 650 !important;
}
/* 7c) Roter Kasten als Symbol vor dem Untertitel (wie FM) – Alternative zum
Pfeil, umschaltbar im Konfigurations-Plugin. */
.sre-bullet-kasten {
display: inline-block;
width: 0.7em;
height: 0.7em;
margin-right: 0.5em;
background-color: #c70e1d;
vertical-align: baseline;
position: relative;
top: 0.02em;
}
/* 8) Graue Chevron-Buttons (z. B. "Immobilienangebote", "Abonnieren",
"Ansprechpartner finden"): kein Farbwechsel beim Hover – sie bleiben
unveraendert wie auf der FM-Seite (statt rot zu werden). Der rote Pfeil
davor bleibt rot (Inline-Style). Grauton = FM-Basis (#d3d3d3, Abschnitt 14),
damit Hover keinen Ton-Sprung macht. */
.contact-button:hover {
background-color: #d3d3d3 !important;
border-color: #d3d3d3 !important;
color: #000 !important;
}
.s-block-button-link:hover {
color: #000 !important;
}
/* ==========================================================================
9) Responsive-/Mobil-Feinschliff (Angleichung an FM in der Smartphone-Ansicht)
========================================================================== */
/* 9a) Burger-Menue in der Mobilansicht wieder klickbar machen.
Der fixierte #headerWrapper hat z-index 1000000; seine (unsichtbare) .row lag
damit ueber dem Burger (z-index 10001) und fing jeden Klick ab -> das Menue
liess sich nicht mehr oeffnen. Burger ueber den Header heben. */
.flyout-burger-bar .burger,
.burger.mobile-only,
.burger.desktop-only {
z-index: 1000002 !important;
}
/* 9-desktop) Obere Icons auch in der Desktop-Ansicht exakt gleich gross: die
Glocke war mit 30px groesser (wirkte dicker und haengte tiefer) als Stern (26px)
und Login (28px). Alle auf 24px vereinheitlichen und auf gleiche Hoehe bringen. */
@media (min-width: 769px) {
#headerWrapper .bellicon svg,
#headerWrapper .merklistelink .merk-star,
#headerWrapper .merklistelink svg,
#headerWrapper .myFacilityLogin .mfLoginIcon {
width: 24px !important;
height: 24px !important;
}
/* Login-SVG sitzt durch seine viewBox etwas hoch -> leicht nach unten.
Die Glocke wirkt durch ihren Kloeppel-Punkt optisch tiefer -> etwas hoch. */
#headerWrapper .bellicon svg { position: relative; top: 3px; }
#headerWrapper .myFacilityLogin .mfLoginIcon { position: relative; top: 2px; }
}
@media (max-width: 768px) {
/* 9b) Kompakter, vertikal zentrierter Header wie FM.
Vorher: Standard-Unterseiten hatten einen ~173px hohen, fast leeren weissen
Header (#headerWrapperBackground) und das Logo klebte oben am Rand. Den
Platzhalter auf eine kompakte Balkenhoehe bringen (64px) und Logo/Icons
vertikal mittig darin ausrichten. */
#headerWrapperBackground { height: 64px !important; }
/* Logo: fuellte mit fester 80px-Hoehe (~251px Breite) auf schmalen Handys den
zentrierten Container ueber und "haengte nach links". Kleiner + auf die halbe
Viewport-Breite gedeckelt und vertikal mittig -> sitzt wie bei FM. */
#headerWrapper .logo_schaefer,
.fixed #headerWrapper .logo_schaefer,
body.has-fullscreen-hero #headerWrapper .logo_schaefer {
height: 46px !important;
width: auto !important;
max-width: 44vw !important;
object-fit: contain !important;
margin-top: 0 !important;
}
#headerWrapper .logocontainer {
top: 0 !important;
height: 64px !important;
max-width: none !important;
display: flex !important;
align-items: center !important; /* Logo vertikal mittig im Balken */
justify-content: center !important;
}
/* 9c) Die oberen Icons (Merkliste/Stern, Login, Glocke) standen in der
Mobilansicht frei im Fluss ("kreuz und quer", unterschiedliche Hoehen).
Absolut, vertikal mittig im 64px-Balken und gleichmaessig rechts anordnen. */
#headerWrapper .merklistelink,
#headerWrapper .myFacilityLogin,
#headerWrapper .bellicon {
position: absolute !important;
top: 21px !important; /* mittig im 64px-Balken (24px hoch) */
margin: 0 !important;
float: none !important;
z-index: 3 !important;
height: 24px !important;
display: flex !important;
align-items: center !important;
}
#headerWrapper .bellicon { right: 12px !important; }
#headerWrapper .myFacilityLogin { right: 48px !important; }
#headerWrapper .merklistelink { right: 82px !important; }
/* Alle drei Icons exakt gleich gross (der Stern-SVG war mit 26px groesser). */
#headerWrapper .bellicon svg,
#headerWrapper .merklistelink .merk-star,
#headerWrapper .merklistelink svg,
#headerWrapper .myFacilityLogin .mfLoginIcon {
width: 22px !important;
height: 22px !important;
}
#headerWrapper .myFacilityLogin button i { font-size: 22px !important; }
#headerWrapper .merklistelink :before { font-size: 20px !important; margin-left: 0 !important; }
#headerWrapper .merklistelink .merk-count { font-size: 10px !important; }
/* Glocken- und Login-SVG sitzen durch ihre viewBox etwas hoch -> auf gleiche
Hoehe wie der Stern bringen. */
#headerWrapper .bellicon svg { position: relative; top: 4px; }
#headerWrapper .myFacilityLogin .mfLoginIcon { position: relative; top: 2px; }
/* Burger wie FM etwas kleiner (scale 0.8) und vertikal mittig im Balken. */
.burger.mobile-only {
transform: scale(0.8);
transform-origin: left center;
margin-top: 22px !important;
}
}
@media (max-width: 768px) {
/* 9f) Titel/Untertitel ueber dem Header-Bild ("Bild bis oben"): die
Ken-Burns-Zoom-Animation skalierte den ganzen Titel-Container (~1.2x mit
Ursprung unten-mitte) und schob dadurch den Titel bei schmaler Ansicht nach
links aus dem Bild heraus und vergroesserte die Schrift. Auf dem Handy den
Zoom ausschalten (Bild bleibt vollflaechig) und die Schrift auf FM-Groesse
bringen. */
body.sre-titel-auf-bild .header-background-image {
-webkit-animation: none !important;
animation: none !important;
-webkit-transform: none !important;
transform: none !important;
}
body.sre-titel-auf-bild .header-background-image h2,
body.sre-titel-auf-bild .headerImage h2,
.headerImage_angebote h2 {
font-size: 26px !important;
max-width: 88% !important;
}
body.sre-titel-auf-bild .header-background-image h4,
body.sre-titel-auf-bild .headerImage h4,
.headerImage_angebote h4 {
font-size: 15px !important;
max-width: 88% !important;
}
}
/* 9g) Sehr schmale Handys (<=380px): Logo und Icon-Abstaende etwas verkleinern,
damit sich das zentrierte Logo und die rechten Icons garantiert nicht
ueberlappen. */
@media (max-width: 380px) {
#headerWrapperBackground { height: 58px !important; }
#headerWrapper .logocontainer { height: 58px !important; }
#headerWrapper .logo_schaefer,
.fixed #headerWrapper .logo_schaefer,
body.has-fullscreen-hero #headerWrapper .logo_schaefer {
height: 40px !important;
max-width: 38vw !important;
}
#headerWrapper .merklistelink,
#headerWrapper .myFacilityLogin,
#headerWrapper .bellicon { top: 18px !important; }
#headerWrapper .bellicon { right: 8px !important; }
#headerWrapper .myFacilityLogin { right: 42px !important; }
#headerWrapper .merklistelink { right: 72px !important; }
#headerWrapper .bellicon svg,
#headerWrapper .merklistelink .merk-star,
#headerWrapper .merklistelink svg,
#headerWrapper .myFacilityLogin .mfLoginIcon {
width: 20px !important;
height: 20px !important;
}
.burger.mobile-only { margin-top: 19px !important; }
}
/* 9d) Footer in der Mobilansicht: alle Bereiche ("SCHÄFER RealEstate", Unternehmen,
Newsletter, Standort & Kontakt, Social Media) buendig an EINER linken Kante
ausrichten. Die gemischten negativen Bootstrap-Margins hatten die Spalten
unterschiedlich weit nach rechts geschoben. */
@media (max-width: 991px) {
.footer-meta .row {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Zusatz-Wrapper der ersten Zeile hatte 20px Extra-Einzug -> entfernen, damit
die erste Zeile buendig mit den uebrigen Bereichen steht. */
.footer-meta .footer-main-content {
padding-left: 0 !important;
margin-left: 0 !important;
}
.footer-meta [class*="col-"] {
padding-left: 15px !important;
padding-right: 15px !important;
margin-left: 0 !important;
margin-right: 0 !important;
float: none !important;
width: 100% !important;
}
.footer-meta .footer_element,
.footer-meta .socialfooter {
margin-left: 0 !important;
padding-left: 0 !important;
}
/* Social-Reihe war per transform:scale(0.8) verkleinert + nach rechts
verschoben -> zuruecksetzen, damit sie buendig links und normal gross steht. */
.footer-meta .corp-row .socialfooter {
transform: none !important;
}
}
/* 9e) Social-Media-Icons im Footer: waren per CSS auf 24x35px gezwungen und
dadurch verzerrt/zusammengequetscht. Wieder quadratisch darstellen. */
.socialfooter .social-box img {
width: 24px !important;
height: 24px !important;
object-fit: contain !important;
}
/* 9h) "Connect with Schäfer" buendig mit dem darunterliegenden Footer-Inhalt
("SCHÄFER RealEstate e.K.", Newsletter, …) ausrichten. Der Block sass auf der
.container-Kante und damit 15px weiter links als der zusaetzlich eingerueckte
Footer-Text. 15px Zusatz-Einzug (padding-left 15->30) gleicht das auf allen
Breiten an (Desktop 70->85px, Mobil 15->30px). */
.connectwithschaefer {
padding-left: 30px !important;
}
/* =====================================================================
10) "Schäfer Live" – Dark-Mode-Scroll-Effekt (wie Porsche-Website)
Sobald der "Schäfer Live"-Bereich in die vertikale Mitte des Viewports
scrollt, setzt fm-align.js die Klasse .sre-live-dark auf . Der
Seitenhintergrund blendet dann weich nach Schwarz und wieder zurück.
===================================================================== */
html {
transition: background-color 0.7s ease;
}
body {
transition: background-color 0.7s ease;
}
html.sre-live-dark,
html.sre-live-dark body {
background-color: #0a0a0a !important;
}
/* Die grosse schwarze Ueberschrift "Schäfer Live" waere auf Schwarz
unsichtbar -> im Dark-Mode hell einblenden. Wichtig: der Text-Farbwechsel
(schwarz<->weiss) muss SCHNELLER und ohne Verzoegerung laufen als der
Hintergrund (0.7s). So ist die Headline bereits weiss, bevor der Grund dunkel
wird -> nie schwarz-auf-schwarz. (Ein transition-delay macht genau das
Gegenteil: der Text bleibt schwarz, waehrend der Grund schon schwarz ist.) */
/* Wichtig: media.js ersetzt den Headline-Text zur Laufzeit durch einen Link
(Schäfer Live). Der sichtbare Text ist also das -Kind, und Links
erben die Farbe NICHT – sie werden von `.front-large a { color:black !important }`
schwarz gefaerbt. Deshalb muss die weisse Dark-Mode-Farbe auch explizit auf
`.schaefer-live a` gesetzt werden (sonst bleibt der Text schwarz auf schwarz). */
.schaefer-live,
.schaefer-live a {
transition: color 0.25s ease 0s;
}
html.sre-live-dark .schaefer-live,
html.sre-live-dark .schaefer-live a {
color: #ffffff !important;
/* dezenter dunkler Rand, damit die weisse Headline auch im kurzen
Uebergangsmoment (hell-auf-hell) immer eine klare Kante behaelt. */
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
/* Die Video-Kacheln haben einen 1px weissen Rahmen (Trennlinien). Auf Schwarz
wuerden sie als weisse Linien stoeren -> im Dark-Mode auf Schwarz umfaerben,
damit die Wall nahtlos in den dunklen Hintergrund uebergeht. */
.vwall .box {
transition: border-color 0.7s ease;
}
html.sre-live-dark .vwall .box {
border-color: #0a0a0a !important;
}
/* =====================================================================
11) Kontakt-Portrait (runde Box unten rechts) auf FM-Groesse angleichen.
RE rendert das Portrait mit 120px, FM verkleinert es per spaeterer Regel
auf 102px (schaefer-fm/style.css). Hier dieselbe Groesse fuer RE, damit die
Box nicht groesser wirkt als in der FM-Welt. Nur die Groesse angleichen,
Position (RE-Margins) bleibt unveraendert.
===================================================================== */
.contact-portrait,
#contact-image {
width: 102px !important;
height: 102px !important;
}
/* Gruene Status-Blase (online-Punkt) an der Kontaktbox: `.contact-status` (mit
dem gruenen Kreis) ist ein Geschwister des Portraits in `.contact-box` und war
mit top:40px auf das FRUEHERE 120px-Portrait ausgerichtet. Da das Portrait
jetzt 102px ist (18px kleiner), rutschte die Blase ~18px zu tief ("versetzt").
Position an die untere rechte Ecke des 102px-Portraits setzen – deckungsgleich
mit FM (rechte Kanten buendig, Blase 3px ueber der Unterkante). Werte
gemessen/verifiziert gegen die FM-Kontaktbox. */
.contact-box .contact-status {
top: 20px !important;
left: 71px !important;
right: auto !important;
}
/* Aufklappende Kontakt-Box (`.contact-box-content`, das graue Info-Feld mit
"Ihre persoenliche Ansprechpartner:in ...", erscheint beim Klick auf die
Kugel): war auf RE hoeher als die Kugel und ragte oben/unten darueber hinaus.
Ursache: RE nutzt `height:110px; bottom:190px`, FM verkleinert die Hoehe per
spaeterer Regel auf 100px (`schaefer-fm/style.css:6405`) und sitzt dadurch
buendig in der Kugel. Hier dieselbe Hoehe (100px) UND – da das RE-Portrait
anders im `.contact-box` sitzt – ein RE-spezifisches `bottom:205px`, damit die
Box exakt in der 102px-Kugel liegt (Oberkante buendig, 2px innerhalb unten –
gegen FM gemessen: content_top_vs_portrait=0, _bottom=-2). */
.contact-box-content {
height: 100px !important;
bottom: 205px !important;
/* Weiter nach rechts, damit die rechte (abgerundete) Kante hinter der Kugel
verschwindet: RE hatte `right:80px` -> rechte Kante nur 28px in die Kugel,
die Ecken lugten seitlich heraus. FM nutzt `right:50px` (rechte Kante ~23px
RECHTS der Kugelmitte). Da das RE-Portrait anders sitzt, hier RE-spezifisch
`right:33px` -> gleiche Relation wie FM (rechte Kante ~24px rechts der Mitte,
Ecken sauber hinter der Kugel). `!important` schlaegt auch den End-Wert der
Slide-in-Keyframe (`fadeInOpacity` 100% right:80px), sonst schnappt die Box
am Animationsende von 80 auf 33 zurueck. */
right: 33px !important;
}
/* =====================================================================
12) Flyout-Menue an FM angleichen
---------------------------------------------------------------------
(a) Burger ausblenden, solange ein Menue offen ist. Der Burger wurde in
9a bewusst auf z-index 1000002 gehoben (damit er ueber dem fixierten
Header klickbar bleibt) – dadurch schwebt er aber auch UEBER dem
geoeffneten Menue-Panel und dem Schliesskreuz. FM versteckt den
Burger im offenen Zustand; hier ebenso. Signale: der Desktop-Flyout
setzt body.menu-open, das Mobil-Panel #menuContainerMobile bekommt
.menu-active-1. Die .flyout-burger-bar steht im DOM NACH beiden
Panels (Geschwister), daher greift der ~-Kombinator fuers Mobil-Panel.
(b) Schliessen-Kreuz (✖) des Desktop-Flyouts bekommt – wie FM – einen
grauen Kreis-Hintergrund mit rotem X. RE zeigte nur das nackte Glyph.
===================================================================== */
body.menu-open .flyout-burger-bar .burger,
#menuContainerMobile.menu-active-1 ~ .flyout-burger-bar .burger {
opacity: 0 !important;
pointer-events: none !important;
}
/* FM-Schliessknopf: 40px grauer Kreis, rotes X, dezenter Schatten
(Port von schaefer-fm/style.css `#menuContainer .close`). Spezifitaet
(#id .class) schlaegt die nackte `.close`-Regel des RE-Themes.
WICHTIG zur Position: FM setzt den Knopf ueber `left:71%` an den rechten
Rand des sichtbaren Menue-Inhalts (nicht an den aeussersten Rand des 70vw-
Panels; das FM-`right:20px` wird durch `left` ueberschrieben). Deshalb hier
ebenfalls `left:71%` (= RE-Originalposition), sonst haengt der Knopf weit
rechts im leeren Bereich neben dem Menue. */
#menuContainer .close {
position: absolute;
top: 20px;
left: 71%;
right: auto;
width: 40px;
height: 40px;
border-radius: 50%;
background: #8d8d8d;
color: #cc0000 !important;
font-size: 18px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
text-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
/* FM setzt hier opacity:0.6; DORT sitzt der Kreis aber ueber einem freien
Header-Bereich. Bei RE liegt der Markentext "RealEsate e.K." exakt hinter
dem Kreis (gleiche Position left:71%) und schimmert durch die 60%-Fuellung
-> wirkt "durchsichtig". Deshalb bei RE den Kreis deckend machen, damit
kein Header-Text durchscheint (optisch = FM, wo nichts durchschimmert). */
opacity: 1 !important;
z-index: 9999;
transition: transform 0.2s ease, background 0.2s ease;
}
#menuContainer .close:hover {
transform: scale(1.15);
background: #111111;
}
/* (b2) Menue-Links: kein Unterstrich beim Hover. RE's template.css endet mit
`a:hover { text-decoration: underline }`, FM's mit `text-decoration: none`.
Dadurch bekamen die schlichten -Menuepunkte (z. B. "Junges Wohnen") beim
Hover einen Unterstrich, den FM nicht zeigt. Hier – wie FM – unterdruecken. */
#menuContainer a:hover,
#menuContainer a:focus,
#menuContainerMobile a:hover,
#menuContainerMobile a:focus {
text-decoration: none !important;
}
/* (b3) Seitenbeschreibung (die