/* Bebas Neue 2.000 – offizielle Fassung von Google Fonts, SIL Open Font License 1.1 (fonts.google.com/specimen/Bebas+Neue, Stand v16). Lokal ausgeliefert: Beim Aufruf der Seite geht KEINE Anfrage an Google. Zwei Teilmengen mit unicode-range wie in Googles eigener CSS – der Browser lädt nur, was er für den Text wirklich braucht. Deutsch mit Umlauten, ß und Anführungszeichen steckt vollständig in „latin". */ @font-face {font-family:Bebas;src:url('../fonts/bebas-neue-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face {font-family:Bebas;src:url('../fonts/bebas-neue-400-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* Manrope 4.504 – variable Schrift von Google Fonts, SIL Open Font License 1.1. Eine Datei deckt alle Gewichte von 200 bis 800 ab; vorher lagen hier zwei statische Schnitte (400 und 700) mit zusammen 61 KB, jetzt sind es 39 KB für mehr Auswahl. Lokal ausgeliefert, keine Anfrage an Google. Zwei Teilmengen mit unicode-range wie in Googles eigener CSS. */ @font-face {font-family:Manrope;src:url('../fonts/manrope-var.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face {font-family:Manrope;src:url('../fonts/manrope-var-ext.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} :root {--green:#728867;--deep:#4e6445;--ink:#2d2e2d;--soft:#f1f4ee;--line:#dce1d8} /* --------------------------------------------------------------------- Werte für den 3-iQ Standardbaukasten (3iq.css) 3iq.css beschreibt nur den Bau und bringt neutrale Vorgaben mit. Hier bekommt er die Sprache dieser Website: dieselben Maße wie .wrap und .section, dieselbe Palette. Die drei Flächen heißen im Backend "Fläche weiß / hellgrün / dunkelgrün". --------------------------------------------------------------------- */ :root { --3iq-flaeche-neutral:#fff; --3iq-flaeche-akzent-hell:var(--soft); --3iq-flaeche-akzent-dunkel:var(--deep); --3iq-text-auf-akzent-dunkel:#fff; --3iq-linie-auf-akzent-dunkel:rgba(255,255,255,.3); --3iq-linie:var(--line); --3iq-abschnitt-abstand:105px; --3iq-inhaltsbreite:1360px; --3iq-seitenrand:64px; } @media(max-width:1100px) { :root {--3iq-seitenrand:36px} } @media(max-width:760px) { :root {--3iq-seitenrand:23px;--3iq-abschnitt-abstand:64px} } * {box-sizing:border-box} /* scroll-behavior bewusst nicht auf smooth: Das native Weichscrollen läuft unabhängig von der Entfernung gleich schnell ab und wirkt über mehrere Bildschirmhöhen hektisch. Das Tempo regelt app.js entfernungsabhängig. */ html {scroll-padding-top:130px} body {margin:0;color:var(--ink);font-family:Manrope,Arial,sans-serif;font-size:16px;line-height:1.65;background:#fff} a {color:inherit;text-decoration:none} button {font:inherit;cursor:pointer} button, a {-webkit-tap-highlight-color:transparent} a:focus-visible, button:focus-visible, summary:focus-visible {outline:3px solid var(--deep);outline-offset:5px} img {display:block;max-width:100%;height:auto} h1, h2, h3, p {margin:0} h1, h2, h3 {font-family:Bebas,'Arial Narrow',sans-serif;font-weight:400;line-height:1.02} h1 {font-size:clamp(64px,6.2vw,100px)} h2 {font-size:clamp(46px,4.2vw,66px)} h3 {font-size:34px} p {max-width:620px} .eyebrow {font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:700;display:block;margin-bottom:22px} em {font-style:normal;color:var(--deep)} .wrap {max-width:1360px;margin:auto;padding:0 64px} .sitehead {height:115px;background:#fff;position:sticky;top:0;z-index:10;border-bottom:1px solid #ecefe9} .headinner {height:100%;display:flex;align-items:center;justify-content:space-between;gap:36px} .logo {width:320px;max-width:37vw} .nav {display:flex;align-items:center;gap:34px;font-size:14px} .nav a[aria-current=page]:not(.button) {border-bottom:1px solid var(--green)} .button {display:inline-flex;align-items:center;justify-content:space-between;gap:32px;padding:17px 24px;background:var(--deep);color:#fff;font-size:14px;font-weight:700;border:1px solid var(--deep);line-height:1.4;transition:background .2s} .button:hover {background:#3e5137} .button.outline {background:transparent;color:var(--ink)} .button.outline:hover {background:var(--soft)} .actions {display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:32px} .section {padding-top:105px;padding-bottom:105px} .intro {display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center} .introtext p {margin:25px 0} .introimage {position:relative} .introimage img {width:100%;aspect-ratio:1.15;object-fit:cover;object-position:58% center} .names {border-top:1px solid var(--line);margin-top:28px;padding-top:22px;display:flex;gap:35px;font-size:14px} .names small {display:block;font-size:12px;color:#666} /* Eigener Rahmen für den vollbreiten Grund: `.process` ist selbst das wrap-Element und wäre auf 1360 px begrenzt. */ .processzone {background:var(--soft)} .process {display:grid;grid-template-columns:1fr 1.1fr;gap:100px} .steps {counter-reset:steps} .step {display:grid;grid-template-columns:50px 1fr;gap:20px;border-top:1px solid var(--line);padding:26px 0} .step span {color:var(--deep);font-size:14px} .step h3 {font-family:Manrope;font-size:18px;font-weight:700;margin-bottom:12px} .step p {font-size:15px} .offers {border-top:1px solid var(--line)} .contactpeople {display:grid;gap:20px} .person {padding:24px 0;border-bottom:1px solid var(--line)} .person small {display:block;font-size:13px} .person strong {display:block;font-size:18px} .person a {display:inline-block;font-size:23px;margin-top:8px} .footer {padding:45px 0;background:#f4f5f2} .footergrid {display:flex;justify-content:space-between;gap:30px;align-items:start;font-size:13px} .footerlogo {width:270px;margin-bottom:20px;mix-blend-mode:multiply} .footer p {font-size:13px} .footerlinks {display:flex;gap:24px} .fine {margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:12px;display:flex;justify-content:space-between;gap:20px} .subhero {padding:80px 0 65px;background:var(--soft)} .subhero p {margin-top:25px} .contactpage {display:grid;grid-template-columns:1fr 1fr;gap:90px} .contactpage img {aspect-ratio:1.1;object-fit:cover;object-position:60% center} .address {margin:35px 0} .mobilemenu {display:none} @media(max-width:1100px) { .wrap {padding-left:36px;padding-right:36px} .nav {gap:20px} .logo {width:270px} .a .actions {gap:15px;max-width:330px} .intro, .process, .contactpage {gap:45px} .names {flex-direction:column;gap:10px} } @media(max-width:760px) { .sitehead {height:88px} .headinner {gap:16px} .wrap {padding-left:23px;padding-right:23px} .logo {max-width:68vw;width:275px} /* Beschriftung über zwei Balken, die sich beim Öffnen zum Kreuz drehen. Die Farbe wird ausdrücklich gesetzt: Ohne eigene Angabe färbt iOS Safari Schaltflächen in seiner Systemfarbe ein – das war das Blau. */ .mobilemenu {display:flex;flex-direction:column;align-items:center;justify-content:center; gap:7px;background:none;border:0;padding:6px 4px;color:var(--deep); -webkit-appearance:none;appearance:none;-webkit-text-fill-color:currentColor} .mobilemenu-wort {font-size:13px;line-height:1} .mobilemenu-striche {position:relative;display:block;width:28px;height:13px} .mobilemenu-striche i {position:absolute;left:0;right:0;height:2px;background:currentColor; border-radius:1px;transition:top .22s ease,transform .22s ease} .mobilemenu-striche i:first-child {top:1px} .mobilemenu-striche i:last-child {top:10px} /* Bootstrap setzt aria-expanded beim Auf- und Zuklappen selbst */ .mobilemenu[aria-expanded=true] .mobilemenu-striche i:first-child {top:5px;transform:rotate(45deg)} .mobilemenu[aria-expanded=true] .mobilemenu-striche i:last-child {top:5px;transform:rotate(-45deg)} .nav {display:none;position:absolute;top:88px;left:0;right:0;padding:25px;background:white;border-bottom:1px solid var(--line);box-shadow:0 10px 10px #0001;align-items:stretch} /* Im aufgeklappten Menü liegen die Einträge über die volle Breite – eine Unterstreichung liefe dann quer durchs Menü. Die aktuelle Seite wird stattdessen eingefärbt. */ .nav a[aria-current=page]:not(.button) {border-bottom:0;color:var(--deep)} .nav .button {justify-content:center} .a .actions {margin-top:25px;max-width:100%;gap:20px} .section {padding-top:64px;padding-bottom:64px} .intro, .process, .contactpage {display:flex;flex-direction:column;gap:35px;align-items:stretch} .introimage {order:2} .introtext {order:1} .introimage img {aspect-ratio:1.3;border-radius:0} .names {flex-direction:row;gap:20px;font-size:12px} .names small {font-size:11px} .footergrid {flex-direction:column} .footerlinks {flex-wrap:wrap} .fine {flex-direction:column;gap:10px} .footer {padding-bottom:64px} .subhero {padding:50px 0} .subhero h1 {font-size:65px} .person a {font-size:22px} } @media(prefers-reduced-motion:reduce) { html {scroll-behavior:auto} .referenz-bahn {transition:none} * {transition:none!important} } /* Refined first direction: quieter typography, conversational icons and outlines. */ /* Icons als CSS-Masken statt Icon-Schrift: Lucide (ISC-Lizenz, keine Namensnennung auf der Seite nötig). Die Maske nimmt die Textfarbe an, `font-size` steuert weiterhin die Größe – das Markup blieb unverändert. */ .lnr {display:inline-block;width:1em;height:1em;flex-shrink:0;vertical-align:-.125em; background-color:currentColor; -webkit-mask:var(--symbol) center/contain no-repeat; mask:var(--symbol) center/contain no-repeat} .lnr-apartment {--symbol:url("data:image/svg+xml,")} .lnr-arrow-down {--symbol:url("data:image/svg+xml,")} .lnr-arrow-right {--symbol:url("data:image/svg+xml,")} .lnr-bubble {--symbol:url("data:image/svg+xml,")} .lnr-earth {--symbol:url("data:image/svg+xml,")} .lnr-envelope {--symbol:url("data:image/svg+xml,")} .lnr-heart {--symbol:url("data:image/svg+xml,")} .lnr-home {--symbol:url("data:image/svg+xml,")} .lnr-magnifier {--symbol:url("data:image/svg+xml,")} .lnr-map-marker {--symbol:url("data:image/svg+xml,")} .lnr-map {--symbol:url("data:image/svg+xml,")} .lnr-phone-handset {--symbol:url("data:image/svg+xml,")} .a h1, .a h2, .a h3 {font-family:Bebas,"Arial Narrow",sans-serif;font-weight:400;line-height:1.15;letter-spacing:.2px;text-transform:uppercase;font-synthesis:none} .a h1 {font-size:clamp(38px,4vw,60px)} .a h2 {font-size:clamp(32px,3.25vw,46px)} .a h3 {font-size:27px} .a .eyebrow {font-size:15px;font-weight:400;line-height:1.5;text-transform:none;letter-spacing:0;color:var(--deep);margin-bottom:22px;display:flex;align-items:flex-start;gap:13px} /* Rundes Hausicon aus dem Logo, auf Schrifthöhe, anstelle der früheren Linie */ /* flex-start statt center, damit das Icon bei mehrzeiligen Eyebrows neben der ERSTEN Zeile steht und nicht mittig zwischen den Zeilen. Der Versatz zentriert es optisch auf dieser Zeile: (Zeilenhöhe 1.5em − Icon 1.3em) / 2. */ .a .eyebrow:before {content:'';width:1.3em;height:1.3em;flex-shrink:0;margin-top:.1em;background:url(../img/icon_hjl_immo.svg) center/contain no-repeat} .a .button, .a .button.outline {background:transparent;color:var(--deep);border:1px solid var(--green);font-weight:400;gap:22px;padding:15px 21px;transition:background .2s,color .2s} .a .button:hover, .a .button.outline:hover {background:#e9efe3;color:#304228} .a .button .lnr {font-size:20px} /* Gefüllter Button für den jeweils wichtigsten Weg. `.a` nötig, um den zurückhaltenden Grundstil dieser Richtung zu schlagen. */ .a .button.primary {background:var(--deep);color:#fff;border-color:var(--deep)} .a .button.primary:hover {background:#3e5137;color:#fff} /* ========================================================================= Hero – Foto über die volle Breite, Textkarte davor. Bewusst ohne Schleier über dem Bild: Der Kontrast kommt aus der Karte. Alle Hero-Regeln stehen hier; es gibt keine weiteren an anderer Stelle. ========================================================================= */ .hero {position:relative;background:var(--soft);padding-bottom:78px} .heropic {height:600px} .heroimage {width:100%;height:100%;object-fit:cover;object-position:60% 42%} .herocopy {position:relative;margin-top:-170px;background:#fff;padding:52px 56px 56px;max-width:660px;box-shadow:0 26px 70px rgba(32,44,30,.16)} .hero h1 {font-size:clamp(38px,3.7vw,54px);line-height:1.04;letter-spacing:0} /* ★ Bebas Neue gibt es bei Google ausschließlich im Gewicht 400 – und wir setzen bewusst nur Google Fonts ein, keinen Schnitt aus anderer Quelle. Die Hero-Überschrift steht deshalb im Regular. Der Unterschied zwischen ihren beiden Zeilen entsteht ohnehin über die Farbe ( → grün), nicht über die Stärke; der umschließt beide Zeilen gleichermaßen. font-synthesis:none verhindert, dass der Browser eine künstliche Fettung rechnet – bei einer schmalen Display-Schrift sieht die schlecht aus. */ .hero h1 strong {font-family:Bebas,"Arial Narrow",sans-serif;font-weight:400;font-synthesis:none} .headline-line {display:block} .headline-line+.headline-line {margin-top:3px} .herocopy p {max-width:520px;font-size:17px;margin-top:30px} .herocopy .actions {margin-top:32px} @media(max-width:1100px) { .heropic {height:480px} .herocopy {margin-top:-130px;padding:40px 40px 44px} .hero h1 {font-size:clamp(34px,4.3vw,46px)} } @media(max-width:760px) { .hero {padding-bottom:50px;background:#fff} .heropic {height:auto;aspect-ratio:1.25} .heroimage {object-position:58% 42%} .herocopy {margin:-60px 0 0;padding:32px 26px 36px;max-width:none;box-shadow:0 16px 40px rgba(32,44,30,.14)} .hero h1 {font-size:clamp(32px,8.4vw,52px)} .herocopy p {font-size:16px;margin-top:24px;max-width:none} .herocopy .actions {margin-top:26px} } /* ========================================================================= Leistungen. Zwei Ausprägungen stehen zur Wahl, umgeschaltet wird über die Klasse am Abschnitt: `servicezone--spalten` oder `servicezone--karten`. Sobald entschieden ist, fliegt die ungenutzte wieder raus. Für beide gilt: eigenes Raster statt Bootstrap-Zeile. Deren negative Außenabstände (-28 px) werden über den Innenabstand der Spalten ausgeglichen – den überschrieb `.service {padding:30px 0}` als Kurzschreibweise mit 0, wodurch der Block 56 px zu breit stand. ========================================================================= */ .servicezone .section {padding-top:105px;padding-bottom:110px} .services-kopf {margin-bottom:54px} .services-kopf h2 {font-size:clamp(30px,3vw,42px);line-height:1.14} .services-kopf p {margin-top:26px;font-size:17px;max-width:none;text-wrap:pretty} .services {display:grid;grid-template-columns:repeat(3,1fr)} .service {display:flex;flex-direction:column;align-items:flex-start} .service h3 {font-size:28px;line-height:1.15;margin-bottom:15px} .service p {font-size:15.5px;line-height:1.62;flex:1;margin-bottom:26px;max-width:none;color:#3f463d} .service-link {display:inline-flex;align-items:center;gap:12px;font-size:14px;color:var(--deep); border-bottom:1px solid var(--green);padding-bottom:7px;transition:border-color .2s,color .2s} .service-link:hover {color:#2f4027;border-color:var(--deep)} .service-link .lnr {font-size:17px} /* Ausprägung A – offene Spalten mit klarer grüner Oberkante, auf Weiß */ .servicezone--spalten {background:#fff} .servicezone--spalten .services {gap:48px} .servicezone--spalten .service {border-top:3px solid var(--green);padding-top:30px} .servicezone--spalten .service-icon {margin-bottom:22px} .servicezone--spalten .service-icon .lnr {font-size:31px;color:var(--green)} /* Ausprägung B – Karten auf hellem Grund, Icon im grünen Kreis */ .servicezone--karten {background:var(--soft)} .servicezone--karten .services {gap:26px} .servicezone--karten .service {background:#fff;padding:38px 34px 34px;box-shadow:0 12px 34px rgba(32,44,30,.07)} .servicezone--karten .service-icon {width:58px;height:58px;border-radius:50%;background:#e9efe3; display:grid;place-items:center;margin-bottom:26px} .servicezone--karten .service-icon .lnr {font-size:27px;color:var(--deep)} @media(min-width:761px) { /* Bei den Karten teilen sich Hero und Leistungen denselben hellen Grund. Dann zählt nur noch deren Innenabstand – der des Heros addierte sich sonst. */ .hero:has(+ .servicezone--karten) {padding-bottom:0} } @media(max-width:1100px) { .servicezone .section {padding-top:90px;padding-bottom:95px} .services-kopf {margin-bottom:42px} .servicezone--spalten .services {gap:32px} .servicezone--karten .services {gap:24px} .servicezone--karten .service {padding:30px 26px 28px} .servicezone--karten .service-icon {width:50px;height:50px;margin-bottom:20px} .service h3 {font-size:25px} .service p {font-size:15px} } @media(max-width:760px) { .servicezone .section {padding-top:65px;padding-bottom:70px} .services-kopf {margin-bottom:34px} .services-kopf p {margin-top:20px;font-size:16px} .services {grid-template-columns:1fr} .servicezone--spalten .services {gap:34px} .servicezone--karten .services {gap:20px} .service p {margin-bottom:22px} } /* ========================================================================= Seitenkopf mit Foto – Text links, Bild randabfallend auf der rechten Hälfte. Wird von „Über uns" und „Unser Angebot" genutzt. Der linke Innenabstand folgt dem Seitenraster, damit der Text auf derselben Kante steht wie alle übrigen Inhalte (104 px bei 1440 px Fensterbreite). ========================================================================= */ .subhero--bild {display:grid;grid-template-columns:1fr 1fr;align-items:stretch;padding:0} .subhero--bild .subhero-text {align-self:center; padding:86px 60px 86px max(23px,calc((100vw - 1360px)/2 + 64px))} .subhero--bild .subhero-text p {margin-top:25px} .subhero--bild .subhero-foto {position:relative;min-height:460px} .subhero--bild .subhero-foto img {position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center} /* Bildausschnitt je Motiv – gehört zum Foto, nicht zum Layout */ .subhero--team .subhero-foto img {object-position:45% 28%} .subhero--buero .subhero-foto img {object-position:45% center} /* Hochformat im Querformat-Rahmen: Der Ausschnitt muss die Sitzecke und die Logowand halten und Decke wie leere Bodenfläche wegschneiden. */ /* Kontaktseite: Das Logo an der grünen Wand sitzt oben rechts im Foto. Bei 42 % schnitt der Rahmen es oben an (gemessen: 46 px Beschnitt, das Logo beginnt bei 42 px). 28 % lässt ihm Luft und zeigt die Sitzgruppe weiterhin ganz. */ .subhero--lounge .subhero-foto img {object-position:center 28%} @media(max-width:1100px) { .subhero--bild .subhero-text {padding:62px 36px 62px max(23px,calc((100vw - 1360px)/2 + 36px))} .subhero--bild .subhero-foto {min-height:400px} .subhero--bild h1 {font-size:clamp(34px,4.4vw,52px)} } @media(max-width:760px) { /* Einspaltig: Foto oben, Text darunter – wie im Hero der Startseite */ .subhero--bild {display:flex;flex-direction:column} .subhero--bild .subhero-foto {order:1;min-height:0;height:auto;aspect-ratio:1.3} .subhero--bild .subhero-foto img {position:static;height:auto;aspect-ratio:1.3} /* align-self zurücknehmen: In der Spaltenrichtung wirkt es quer, der Textblock würde sonst auf Inhaltsbreite schrumpfen und mittig stehen statt linksbündig auf der Randkante des übrigen Inhalts. */ .subhero--bild .subhero-text {order:2;align-self:stretch;padding:44px 23px 50px} } /* ========================================================================= Referenzen – eine Stimme groß, Foto daneben. Die Bahn rastet nativ ein, funktioniert also per Wischen und Tastatur auch ohne JavaScript; die Knöpfe sind nur Komfort. ========================================================================= */ .referenzen {background:#fff} .referenzen-kopf {margin-bottom:44px} .referenzen-kopf h2 {font-size:clamp(30px,3vw,42px);line-height:1.14} .referenzen-raster {display:grid;grid-template-columns:2fr 1fr;gap:70px;align-items:stretch} /* Ohne min-width:0 bestimmt die Breite der Bahn die Spaltenbreite – die Textspalte sprengt dann das Raster und drückt die Bildspalte auf null. */ .referenzen-text, .referenzen-bild {min-width:0} .referenzen-bild {position:relative;min-height:440px} .referenzen-bild picture {position:absolute;inset:0;display:block} .referenzen-bild img {width:100%;height:100%;object-fit:cover;object-position:center 38%} .referenz-bahn {display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth; scrollbar-width:none;-ms-overflow-style:none} .referenz-bahn::-webkit-scrollbar {display:none} .referenz-folie {scroll-snap-align:start;flex:0 0 100%;max-width:100%} .referenz-zitat {margin:0;max-width:none} .referenz-zitat.ist-gekuerzt {display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical;overflow:hidden} .referenz-mehr {margin-top:14px;background:none;border:0;padding:0;font:inherit;font-size:14px; color:var(--deep);text-decoration:underline;text-underline-offset:4px;cursor:pointer} .referenz-mehr:hover {color:#2f4027} .referenz-fuss {margin-top:26px;padding-top:20px;border-top:1px solid var(--line)} .referenz-quelle {font-size:13px;color:#62685c} .referenz-name {display:block;font-size:16px;color:var(--ink);margin-top:2px} .referenz-steuerung {display:flex;align-items:center;gap:14px;margin-top:34px} .referenz-knopf {width:48px;height:48px;display:grid;place-items:center;background:transparent; border:1px solid var(--green);color:var(--deep);cursor:pointer;transition:background .2s} .referenz-knopf:hover:not(:disabled) {background:#e9efe3} .referenz-knopf:disabled {opacity:.35;cursor:default} .referenz-knopf .lnr {font-size:19px} .referenz-knopf--zurueck .lnr {transform:rotate(180deg)} .referenz-punkte {display:flex;gap:9px;margin-left:8px;flex-wrap:wrap} .referenz-punkt {width:9px;height:9px;padding:0;border-radius:50%;border:1px solid var(--green); background:transparent;cursor:pointer} .referenz-punkt[aria-current=true] {background:var(--deep);border-color:var(--deep)} @media(max-width:1100px) { .referenzen-raster {gap:40px} .referenzen-bild {min-height:380px} .referenzen-kopf {margin-bottom:34px} } @media(max-width:760px) { /* Auf dem Smartphone entfällt das Foto – es würde nur Weg kosten, ohne inhaltlich etwas beizutragen. */ .referenzen-raster {grid-template-columns:1fr;gap:0} .referenzen-bild {display:none} /* Ohne Foto daneben soll die Bedienung direkt unter der gezeigten Stimme sitzen. Die Folien stehen nebeneinander in einer Flex-Reihe – deren Höhe richtet sich sonst nach der längsten. Die passende Höhe setzt app.js; die Folien dürfen sich dafür nicht auf Reihenhöhe strecken. */ .referenz-bahn {overflow-y:hidden;transition:height .25s ease} .referenz-folie {align-self:flex-start} .referenz-zitat.ist-gekuerzt {-webkit-line-clamp:12} .referenz-steuerung {margin-top:26px} } .a .step {grid-template-columns:34px 1fr;gap:22px;padding:30px 0} .a .step>span {padding-top:4px} .a .step .lnr {font-size:25px;color:var(--green)} @media(max-width:760px) { .a h2 {font-size:34px} .a h3 {font-size:26px} .a .eyebrow {font-size:14px;gap:12px;margin-bottom:20px} .a .button {font-size:14px} } /* Pro is only resolved from an installed font until the licensed web embed arrives. */ .a .step h3 {font-family:Bebas,"Arial Narrow",sans-serif;font-weight:400;font-size:26px;line-height:1.2} @media(max-width:760px) { .a .step h3 {font-size:25px} } .a .button {justify-content:flex-start;gap:15px} .a .button .lnr {order:-1} .a .intro {grid-template-columns:.94fr 1.15fr;gap:60px;align-items:stretch} .a .introimage {min-height:0} .a .introimage img {position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:48% center} .a .introtext h2 {font-size:clamp(28px,2.75vw,40px);line-height:1.15} .a .intro-line {display:block;white-space:nowrap} .a .introtext p {margin:22px 0} .a .introtext .actions {margin-top:24px} .a .introtext .eyebrow {margin-bottom:19px} .a .photo-offers {position:relative;isolation:isolate;overflow:hidden;border:0;padding:0;background:#394335} .a .offer-backdrop {position:absolute;inset:0;width:100%;object-fit:cover;z-index:-2} .a .photo-offers:before {content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,29,16,.63),rgba(17,29,16,.12) 58%,rgba(17,29,16,.26));z-index:-1} .a .offer-inner {padding-top:78px;padding-bottom:78px;min-height:660px;display:flex;flex-direction:column;justify-content:space-between;gap:120px} .a .imagecredit {font-size:12px;color:#62685c;margin-top:30px;max-width:none} .a .imagecredit a {text-decoration:underline;text-underline-offset:3px} @media(max-width:1100px) { .a .intro {gap:35px;grid-template-columns:.85fr 1.15fr} .a .introtext h2 {font-size:clamp(25px,2.75vw,33px)} .a .offer-inner {gap:95px} } @media(max-width:760px) { .a .intro {display:flex;gap:28px} .a .introimage img {position:static;height:auto;aspect-ratio:1.4;object-position:48% center} .a .introtext h2 {font-size:clamp(24px,6.1vw,36px)} .a .intro-line {white-space:normal} .a .offer-inner {min-height:0;padding-top:55px;padding-bottom:55px;gap:70px} .a .offer-backdrop {object-position:45% center} .a .imagecredit {font-size:12px} } .a .offer-backdrop {top:-70px;bottom:auto;height:calc(100% + 140px);object-position:center 45%;transform:translate3d(0,var(--parallax-y,0px),0);will-change:transform} .a .regional-contact {background:var(--soft)} .a .regional-contact-grid {display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:95px} .a .regional-contact h2 {font-size:clamp(32px,3.2vw,46px);line-height:1.14} .a .regional-contact p {margin:26px 0;max-width:570px} .a .regional-address {display:flex;align-items:center;gap:12px;margin:30px 0;font-size:15px} .a .regional-address .lnr {color:var(--deep);font-size:21px} .a .contact-email {display:block;margin-top:16px;font-size:14px;color:var(--deep)} .a .regional-contact .person {padding:25px 0;border-bottom-color:#cad4c4} .a .regional-contact .person:first-child {border-top:1px solid #cad4c4} @media(min-width:761px) and (max-width:1100px) { .a .regional-contact-grid {gap:45px} } @media(max-width:760px) { .a .regional-contact-grid {display:flex;flex-direction:column;gap:40px;align-items:stretch} .a .regional-contact h2 {font-size:34px} .a .regional-contact .person a {font-size:22px} .a .offer-backdrop {will-change:auto} } @media(prefers-reduced-motion:reduce) { .a .offer-backdrop {transform:none;will-change:auto} } .a .centered-offer .offer-inner {min-height:570px;padding-top:100px;padding-bottom:100px;display:flex;justify-content:center;align-items:center;gap:34px;text-align:center} .a .centered-offer h2 {color:white;line-height:1.06;text-shadow:0 2px 22px #0004} .a .offer-title {display:block} .a .offer-message {display:block} .a .centered-offer .button {color:#fff;border-color:#fff;justify-content:center} .a .centered-offer .button:hover {background:#fff;color:var(--deep)} .a .footer {background:#344b38;color:#f3f6ef;padding-top:62px;padding-bottom:42px} .a .footerlogo {filter:grayscale(1) invert(1);mix-blend-mode:screen} .a .footer a:hover {text-decoration:underline;text-underline-offset:4px} .a .footer .imagecredit {color:#d4dfce} .a .footer .fine {border-color:#708370;color:#d4dfce} .a .footerlinks {gap:30px;font-size:14px} .a .legal-draft p {margin-bottom:30px} @media(max-width:760px) { .a .centered-offer .offer-inner {min-height:480px;padding-top:70px;padding-bottom:70px;gap:30px} .a .centered-offer h2 {font-size:48px} .a .footer {padding-top:48px;padding-bottom:56px} } .a .centered-offer h2 {font-size:clamp(32px,4.35vw,62px)} .a .offer-message {font-size:1em;line-height:1.15;white-space:nowrap} .a .offer-title {margin-bottom:14px} .a .centered-offer:before {background:rgba(20,35,22,.62)} .skip-link {position:fixed;left:20px;top:10px;transform:translateY(-200%);z-index:1000;background:white;color:#2d2e2d;padding:12px 22px;border:2px solid #4e6445} .skip-link:focus {transform:none} a:focus-visible, button:focus-visible {outline:2px solid #253524;outline-offset:4px;box-shadow:0 0 0 4px #fff} main:focus {outline:none} /* Sprungziele bekommen für die Tastaturbedienung den Fokus. Bei Mausklick soll dabei kein Systemrahmen aufblitzen – per Tastatur bleibt er sichtbar. */ [tabindex="-1"]:focus:not(:focus-visible) {outline:none} .footer a:focus-visible, .photo-offers a:focus-visible {outline-color:#fff;box-shadow:0 0 0 4px #253524} .nav a, .footerlinks a, .fine a, .imagecredit a {display:inline-flex;align-items:center;min-height:24px} .mobilemenu {min-height:44px;min-width:44px} .person a {padding:3px 0} .button.outline {border-color:#728867} @media(max-width:760px) { .a .offer-message {white-space:normal} .a .centered-offer h2 {font-size:clamp(30px,6.7vw,45px)} .a .intro-line {white-space:normal} .names {flex-wrap:wrap} .names>div {min-width:0} .footer p, .person strong {overflow-wrap:anywhere} } @media(forced-colors:active) { a:focus-visible, button:focus-visible {outline:2px solid Highlight;box-shadow:none} .button {border:1px solid ButtonText} .footerlogo {filter:none;mix-blend-mode:normal} } .person small {color:#656d61} .a .intro-line {white-space:normal} /* Bootstrap 5.3 integration: local framework, existing brand styling. */ body {--bs-body-font-family:Manrope,Arial,sans-serif;--bs-body-color:var(--ink)} a:hover {color:inherit} p, h1, h2, h3 {margin-bottom:0} .button.btn {border-radius:0;letter-spacing:normal;text-decoration:none} .button.btn:hover {border-color:var(--deep)} .wrap.container-fluid {width:100%} .nav {flex-wrap:nowrap} @media(min-width:761px) { .nav.collapse {display:flex!important;height:auto!important;visibility:visible} } @media(max-width:760px) { .nav.collapse:not(.show) {display:none} .nav.collapse.show, .nav.collapsing {display:flex;flex-direction:column;gap:20px} } /* --------------------------------------------------------------------- Dunkelgrüne Fläche des Standardbaukastens --------------------------------------------------------------------- ★ Dieser Block steht bewusst am DATEIENDE. Die Regeln haben dieselbe Spezifität wie die, die sie berichtigen (.a .eyebrow, .button.outline); bei Gleichstand gewinnt die spätere Stelle. Weiter oben wären sie wirkungslos – gemessen: Der Kontrast blieb bei 1,0. --------------------------------------------------------------------- */ .hintergrund-akzent-dunkel em {color:#cbd8c3} /* Die Eyebrow steht in .a auf var(--deep) – auf dunkelgrünem Grund ergab das einen Kontrast von 1,0, sie war schlicht unsichtbar. #eef2ec bringt 5,7:1 und damit mehr als die geforderten 4,5:1. Das Blattsymbol ist ein dunkles SVG und wird mitgehellt. */ .hintergrund-akzent-dunkel .eyebrow {color:#eef2ec} /* ★ Kein CSS-Filter für das Symbol. Es ist ein grüner Kreis mit einem weißen Haus darin; brightness(0) invert(1) färbt beides weiß und macht daraus eine Kugel – das Haus verschwindet. Stattdessen eine eigene Fassung, in der die Rollen getauscht sind: heller Kreis, dunkelgrünes Haus. */ .hintergrund-akzent-dunkel .eyebrow:before {background-image:url(../img/icon_hjl_immo_hell.svg)} /* Schalter auf dunklem Grund. Der Normalschalter ist auf dieser Website ein Umrissschalter in Dunkelgrün (.a .button) – auf der dunkelgrünen Fläche also unsichtbar, gemessener Kontrast 1,0. Er wird hell. Der gefüllte (.primary) kehrt sich ganz um: weiße Fläche, grüne Schrift. */ .hintergrund-akzent-dunkel .button, .hintergrund-akzent-dunkel .button.outline {color:#fff;border-color:rgba(255,255,255,.55)} .hintergrund-akzent-dunkel .button:hover, .hintergrund-akzent-dunkel .button.outline:hover {background:rgba(255,255,255,.12);color:#fff} .hintergrund-akzent-dunkel .button.primary {background:#fff;color:var(--deep);border-color:#fff} .hintergrund-akzent-dunkel .button.primary:hover {background:#eef2ec;color:var(--deep)}