/* ===================================================================
style.css für BawsTech
Version: 1.5 (Optimiert für PageSpeed)
=================================================================== */
/* ===================================================================
Empfehlung: Google Fonts optimiert laden
-------------------------------------------------------------------
Um das Blockieren des Renderings zu verhindern, sollten Google Fonts
asynchron geladen werden. Füge `&display=swap` zur URL hinzu.
Dieser Parameter sorgt dafür, dass der Text sofort mit einer
Fallback-Schriftart angezeigt wird, bis die Google Font geladen ist.
BEISPIEL FÜR DEINE HTML-DATEI ():
=================================================================== */
/* ===================================================================
Allgemeine Layout-Stile
=================================================================== */
/*
Der Abstand nach oben (padding-top) für wurde entfernt,
um die Lücke zwischen Navigation und Inhalt zu schließen.
(Dieser Teil war bereits korrekt)
*/
/* ===================================================================
Komponente: Navigation
=================================================================== */
/* Die Navigationsleiste selbst */
#mainNav {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/* Styling für das Logo */
#mainNav .navbar-brand img {
height: 45px;
/* width: auto; ist Standard für Bilder, kann weggelassen werden */
/* Performance-Optimierung: Browser-Rendering für Opacity-Änderung vorbereiten */
will-change: opacity;
transition: opacity 0.2s ease;
}
#mainNav .navbar-brand img:hover {
opacity: 0.9;
}
/* Styling für die Navigationslinks */
#mainNav .nav-link {
font-weight: 500;
transition: color 0.2s ease;
}
/* ===================================================================
Komponente: Karten (Cards)
=================================================================== */
.card {
/*
Performance-Optimierung: will-change gibt dem Browser einen Hinweis,
welche Eigenschaften animiert werden. Das kann die Performance von
Animationen verbessern, indem die GPU genutzt wird.
*/
will-change: transform, box-shadow;
transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
}
.card-link-wrapper .card {
overflow: hidden !important;
}
.card-link-wrapper:hover .card {
transform: translateY(-10px);
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.4) !important;
}
.card-link-wrapper a,
.card-link-wrapper a:hover,
.card-link-wrapper a:focus {
text-decoration: none;
color: inherit;
outline: none;
/* box-shadow: none; ist nicht nötig, da a das Elternelement ist */
}
.card-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.whatsapp-icon-in-footer {
font-size: 1.1rem;
color: white;
background-color: #25D366;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
flex-shrink: 0;
}
/* ===================================================================
Responsive Design (Anpassungen für mobile Ansicht)
=================================================================== */
/* Betrifft alle Bildschirme, die schmaler als 992px sind (Bootstrap 'lg' Breakpoint) */
@media (max-width: 991.98px) {
/* --- Navigation --- */
/* Fügt etwas Abstand hinzu, wenn das Menü aufklappt. */
.navbar-collapse {
margin-top: 1rem;
}
/*
**ROBUSTER FIX FÜR MOBILES MENÜ**
Wir verwenden Flexbox, um die Links zuverlässig zu zentrieren.
(Dieser Teil war bereits korrekt und gut gelöst)
*/
#mainNav .navbar-nav {
align-items: center;
}
}
/* WhatsApp-Icon in Card-Footer – sichtbar + animiert */
.whatsapp-icon-in-footer {
font-size: 1.1rem;
color: white;
background-color: #25D366;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
flex-shrink: 0;
opacity: 0;
transform: scale(0.9);
transition: opacity 0.3s ease, transform 0.3s ease;
}
/* Icon korrekt rendern – Font Awesome Brands */
.whatsapp-icon-in-footer i {
font-family: "Font Awesome 6 Brands";
font-style: normal;
font-weight: 400;
font-size: 1.2rem;
color: white;
}
/* Hover-Verhalten: Icon erscheint weich und skaliert leicht */
.card-link-wrapper:hover .whatsapp-icon-in-footer {
opacity: 1;
transform: scale(1.1);
}