/* ============================================================ HottConnect – Modernisierungs-Overrides Ergänzt styles.css, ersetzt keine der "FUNDAMENTAL FILES". Farben = offizielle Hottgenroth-Markenfarben (von hottgenroth.de abgegriffen): Rot #b51f1f, Anthrazit #2b2f33. ============================================================ */ :root { --hg-red: #b51f1f; --hg-red-dark: #8f1818; --hg-charcoal: #2b2f33; --hg-charcoal-soft: #3c4146; --hg-grey-100: #f7f7f7; --hg-grey-200: #ececed; --hg-border: #e3e3e5; --hg-text: #23262a; } /* ---------- Fluid Typografie für große/hochauflösende Bildschirme ---------- Fast die gesamte Schriftgröße auf dieser Seite (Überschriften, Fließtext, Buttons, Akkordeon) basiert auf rem und skaliert damit direkt mit der Root-Schriftgröße von . Ohne Anpassung bleibt diese Root-Größe bei jeder Bildschirmbreite fix bei den Browser-Standard-16px - auf sehr breiten Monitoren (v. a. 4K/UHD ohne Betriebssystem- Skalierung, dort meldet der Browser window.innerWidth oft als echte 3840px statt einer herunterskalierten logischen Auflösung) wirkt Text dadurch spürbar klein. Die Stufen unten heben die Root-Größe ab bestimmten Breakpoints moderat an, wodurch alle rem-basierten Größen im Verhältnis mitwachsen - auf normalen Laptop-/Desktop-Breiten (< 1600px) ändert sich nichts. */ @media (min-width: 1600px) { html { font-size: 17px; } } @media (min-width: 2200px) { html { font-size: 18.5px; } } @media (min-width: 3000px) { html { font-size: 20px; } } /* ---------- Grundkontraste ---------- */ body { color: var(--hg-text); } a { color: var(--hg-red); } a:hover, a:focus { color: var(--hg-red-dark); } /* ---------- Navigation ---------- */ #mainNav { box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 8px 24px -18px rgba(0,0,0,0.35); } #mainNav .nav-link { font-weight: 600; color: rgba(255, 255, 255, 0.92) !important; position: relative; } #mainNav .nav-link:hover { color: #ffffff !important; } #mainNav .nav-link::after { content: ""; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 4px; height: 2px; background: var(--hg-red); transform: scaleX(0); transform-origin: left; transition: transform .18s ease; } #mainNav .nav-link:hover::after { transform: scaleX(1); } /* Fester CTA-Button in der Navigation (immer sichtbar, da #mainNav fixed-top ist) */ .nav-cta-btn { padding: 0.5rem 1.1rem !important; font-size: 0.9rem !important; line-height: 1.2; box-shadow: none !important; } @media (max-width: 991.98px) { .nav-cta-btn.d-lg-none { margin-left: auto; margin-right: 0.75rem; } } /* Hamburger-Icon: #mainNav ist als "navbar-light" markiert, per Theme-Override aber dunkel eingefärbt (siehe styles.css #mainNav{background-color:#212529}) - das dunkle "light"-Icon war dadurch auf dem dunklen Hintergrund kaum sichtbar. Hier auf die helle Variante umgestellt. */ #mainNav .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } #mainNav .navbar-toggler { border-color: rgba(255, 255, 255, 0.3) !important; } /* ---------- Buttons ---------- */ .btn-primary { color: #ffffff !important; border-radius: 8px !important; font-weight: 600; letter-spacing: normal; text-transform: none; box-shadow: 0 10px 24px -12px rgba(181, 31, 31, 0.55); transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; } .btn-primary i.fa-arrow-right { font-size: 0.85em; transition: transform .15s ease; } .btn-primary:hover i.fa-arrow-right { transform: translateX(3px); } .btn-primary:hover, .btn-primary:focus { color: #ffffff !important; background-color: var(--hg-charcoal) !important; border-color: var(--hg-charcoal) !important; transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(0, 0, 0, 0.5); } .btn-xl { border-radius: 10px; } /* ---------- Cards: bewusst entfernt ---------- Auf Wunsch werden Module nicht mehr als abgegrenzte Boxen dargestellt - .card dient nur noch als unsichtbarer Struktur-Wrapper, Inhalte fließen direkt im Hintergrund des jeweiligen Abschnitts weiter. Akkordeon-Kopf/-Inhalt (card-header/card-body) behalten eine leichte Farbunterscheidung, damit klickbare FAQ-/Zielgruppen-Zeilen weiterhin erkennbar bleiben. */ .card { border: none !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; } /* ---------- Section rhythm ---------- */ .page-section { padding: 5.5rem 0; } .divider { border-color: var(--hg-red) !important; opacity: 0.9; width: 70px; border-width: 3px; } /* ---------- Dunkle Video-Sektion ("Überzeugen Sie sich selbst!") ---------- */ .hg-section-dark { background: var(--hg-charcoal); } .hg-section-dark h2, .hg-section-dark h3, .hg-section-dark p { color: #ffffff; } /* Video-Player deutlich schmaler als volle Containerbreite, zentriert */ .hg-video-narrow { max-width: 640px; padding-left: 0; padding-right: 0; } .hg-video-narrow .embed-responsive { border-radius: 10px; box-shadow: 0 20px 45px -20px rgba(0, 0, 0, 0.6); } /* ---------- Hero ---------- */ /* Generierter, ruhiger Hintergrund (Verlauf + dezentes Blueprint/Grundriss-Linienmotiv statt eines konkreten Geräte-Motivs) - wie zu Beginn des Projekts wieder mit generierter Grafik statt einer reinen Flächenfarbe, aber ohne Tablet-Illustration, da davor jetzt das echte Produktfoto sitzt. */ header.masthead { background: linear-gradient(160deg, rgba(43,47,51,0.55) 0%, rgba(60,65,70,0.75) 100%), url("../assets/img/bg-hero-generated.svg") !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; position: relative; overflow: hidden; } header.masthead h1 { text-shadow: 0 2px 18px rgba(0,0,0,0.35); } /* Produktbild (Hero-HottConnect-cropped.webp - auf den tatsächlichen Bildinhalt zugeschnitten, die Originaldatei hatte oben/unten viel transparenten Leerraum, der die Größenberechnung verzerrt hat): auf Mobile/Tablet ganz normal im Textfluss unterhalb des Buttons, ab lg (wenn der Hero fix 100vh hoch ist, der Textblock auf col-lg-6 verschmälert wurde und rechts entsprechend mehr Platz frei bleibt) deutlich größer, vertikal zentriert und absolut rechts positioniert - "im Vordergrund neben dem Text". Größe wird über die Breite der Spalte gesteuert (nicht über vh), da das zugeschnittene Bild ein breites/flaches Seitenverhältnis hat (~2,15:1). */ .hg-hero-visual-wrap { position: static; margin: 1.5rem auto 2.5rem; max-width: 460px; padding: 0 1.5rem; } .hg-hero-visual { width: 100%; height: auto; display: block; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.45)); } @media (min-width: 992px) { .hg-hero-visual-wrap { position: absolute; right: 1.5rem; top: 50%; bottom: auto; transform: translateY(-50%); margin: 0; padding: 0; max-width: 54%; z-index: 1; pointer-events: none; } .hg-hero-visual { width: 100%; height: auto; max-height: 62vh; } } @media (min-width: 1400px) { .hg-hero-visual-wrap { max-width: 50%; right: 3rem; } } /* Nicht mehr auf header.masthead beschränkt - die Kaufwarnung sitzt jetzt im Kaufsegment (#software) unter dem Kaufbutton, soll dort aber optisch gleich bleiben. */ .alert-warning { background-color: rgba(255, 255, 255, 0.96); border: none; border-left: 4px solid var(--hg-red); border-radius: 8px; color: var(--hg-charcoal); box-shadow: 0 14px 34px -18px rgba(0,0,0,0.5); } /* ---------- Feature checklist: brand-red checks ---------- */ #software i.fa-check.text-success { color: var(--hg-red) !important; } /* ---------- Accordion (persona + FAQ) modernized ---------- */ #accordionExample .card, #faqAccordion .card { margin-bottom: 0.6rem; } #accordionExample .card-header, #faqAccordion .card-header { background: #ffffff !important; border-left: 4px solid var(--hg-red); padding: 0; } #accordionExample .card-header .btn, #faqAccordion .card-header .btn { color: var(--hg-charcoal) !important; font-weight: 700; display: flex; align-items: center; justify-content: space-between; padding: 0.95rem 1.2rem; text-decoration: none; } #accordionExample .card-header .btn i, #faqAccordion .card-header .btn i { color: var(--hg-red); transition: transform 0.2s ease; } #accordionExample .card-header .btn[aria-expanded="true"] i, #faqAccordion .card-header .btn[aria-expanded="true"] i { transform: rotate(180deg); } #accordionExample .card-body, #faqAccordion .card-body { background: var(--hg-grey-100); border-top: 1px solid var(--hg-border); } /* ---------- Angebots-Bereich (Funktionen + Preis) ---------- */ #software .card h2 { color: var(--hg-charcoal); font-weight: 800; } .hg-feature-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.65rem; } .hg-feature-grid li { font-size: 0.95rem; line-height: 1.45; } @media (min-width: 992px) { .hg-offer-price-col { border-left: 1px solid var(--hg-border); padding-left: 2.5rem; } } /* ---------- Device frame for the looping preview videos ---------- */ .device-frame { position: relative; overflow: hidden; width: 100%; max-width: 210px; aspect-ratio: 9 / 15; margin: 0 auto; border-radius: 26px; background: #101214; box-shadow: 0 0 0 7px #1c1f22, 0 0 0 8px rgba(181, 31, 31, 0.35), 0 24px 40px -22px rgba(0,0,0,0.5); } .device-frame video { position: absolute; top: 50%; left: 50%; height: 132%; width: auto; max-width: none; transform: translate(-50%, -50%); object-fit: cover; } /* ---------- Portfolio screenshots ---------- */ /* Theme-Vorgabe (styles.css) begrenzt #portfolio .container-fluid fest auf max-width:1920px - auf entsprechend breiten/Ultrawide-Bildschirmen bleibt die Galerie dadurch nicht wirklich randlos, sondern zentriert mit sichtbarem Rand. Hier aufgehoben, damit der Screenshot-Bereich bei jeder Breite responsive über die volle Länge des Viewports läuft. */ #portfolio .container-fluid { max-width: none; } .portfolio-box { overflow: hidden; } /* Die Screenshot-Dateien sind alle exakt 650px breit. ".img-fluid" (max-width:100%) skaliert ein Bild nur nach UNTEN, nie nach OBEN - sobald eine Spalte breiter als 650px wird (z. B. auf großen Monitoren, seit der Bereich oben randlos läuft), blieb das Bild bei 650px stehen und füllte die Spalte nicht mehr aus - sichtbare Lücke am rechten/unteren Rand der Kachel. Fix: Bild wird per object-fit:cover exakt auf die volle Spaltenbreite/-höhe zugeschnitten, das feste aspect-ratio entspricht dem Originalformat der Screenshots (650/350), dadurch wird bei üblichen Spaltenbreiten praktisch nichts weggeschnitten - nur bei stark abweichenden Seitenverhältnissen (z. B. sehr schmale Handy-Spalte) wird minimal beschnitten statt eine Lücke zu lassen. */ .portfolio-box img { width: 100%; height: auto; aspect-ratio: 650 / 350; object-fit: cover; display: block; transition: transform .3s ease; } .portfolio-box:hover img { transform: scale(1.04); } /* ---------- Showcase-Teil ("Ihr Vorteil" / #infomation) ---------- */ /* Einleitungstext unter der zentrierten Überschrift war voller Breite und linksbündig - das wirkte im Wechsel mit der zentrierten Headline uneinheitlich. Jetzt als schmalerer, zentrierter Absatz - danach folgt das Akkordeon bewusst wieder in voller Breite. */ .hg-lead { max-width: 700px; margin-left: auto; margin-right: auto; } /* ---------- Kontaktformular ---------- */ #contact { scroll-margin-top: 90px; } /* Formular-Stil von der PV-Planer-Landingpage übernommen (Computed-Style live abgegriffen, 07.08.2026): roter Kasten, weiße abgerundete Eingabefelder, invertierter weißer Button. Bleed-nach-rechts-Effekt (vollflächig bis zum Viewport-Rand) wurde auf Wunsch wieder entfernt - .hg-contact-card ist jetzt wieder ein normaler, allseitig abgerundeter Kasten. */ .hg-contact-card { position: relative; background: var(--hg-red); border-radius: 12px; color: #ffffff; padding: 1.5rem; text-align: left; } @media (min-width: 768px) { .hg-contact-card { padding: 2rem; } } .hg-contact-card .form-control { background: #ffffff; color: #333333; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 8px; padding: 0.65rem 0.9rem; } .hg-contact-card .form-control::placeholder { color: #6c757d; opacity: 1; } .hg-contact-card label, .hg-contact-card .form-check-label, .hg-contact-card span { color: #ffffff; } .hg-contact-card a { color: #ffffff; text-decoration: underline; } .hg-contact-card a:hover { color: #ffffff; opacity: 0.85; } .hg-contact-card .btn-primary { background: #ffffff !important; color: var(--hg-red) !important; border-color: #ffffff !important; box-shadow: none !important; } .hg-contact-card .btn-primary:hover, .hg-contact-card .btn-primary:focus { background: var(--hg-charcoal) !important; color: #ffffff !important; border-color: var(--hg-charcoal) !important; } .hg-contact-card .alert { background: #ffffff !important; border: none; }