@charset "UTF-8";
/* CSS Document */
.coolfoot-header {
background-color: #448b84;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding: 20px;
margin-top: 20px;
width: 100%;
z-index: -1;
}
.abgerundeter-hintergrund {
background: linear-gradient(135deg, #a7e9e3 0%, #d2f3f1 100%); /* Farbverlauf */
border-radius: 20px; /* Abgerundete Ecken */
padding: 40px; /* Innenabstand */
position: relative; /* Für die Positionierung von Elementen innerhalb */
overflow: hidden; /* Verhindert, dass überlaufende Blasen sichtbar sind */
}
.produkt-bild {
position: absolute;
top: 50%;
right: 50px;
transform: translateY(-50%) rotate(25deg);
max-width: 25%;
z-index: 10; /* Über dem Hintergrund */
}
.text-bereich {
max-width: 50%;
}
.ueberschrift {
font-size: 2.5rem;
font-weight: bold;
color: #2c3e50;
margin-bottom: 15px;
}
.marken-titel {
font-size: 2.5rem;
font-weight: lighter;
color: #2c3e50;
margin-bottom: 15px;
}
.beschreibung {
font-size: 1rem;
color: #34495e;
line-height: 1.6;
margin-bottom: 20px;
}
@keyframes schweben {
from {
transform: translateY(0) scale(1);
opacity: 0.8;
}
to {
transform: translateY(-20px) scale(1.05);
opacity: 0.5;
}
}
/* Hauptfarbe (Annahme basierend auf dem Bild, bitte anpassen) */
:root {
--coolfoot-primary-color: #2D8C8C; /* Der Türkis-Ton aus dem vorherigen Beispiel */
--coolfoot-text-color: #FFFFFF; /* Weißer Text */
--coolfoot-dark-text: #333333; /* Für Überschriften auf hellem Grund */
--coolfoot-muted-text: #555555; /* Für Untertitel/Fließtext auf hellem Grund */
--coolfoot-gradient-start: #38A5A5; /* Ein etwas hellerer Türkis-Ton */
--coolfoot-gradient-end: #277E7E; /* Ein etwas dunklerer Türkis-Ton */
--coolfoot-light-section-bg: #edfbf8; /* Hintergrund für den gesamten Abschnitt */
--coolfoot-title-color: #2c3e50; /* Dunkle Farbe für Überschriften */
--coolfoot-text-color-dark: #34495e; /* Dunkle Farbe für Fließtext */
--coolfoot-price-text-color: #2c3e50; /* Farbe für den Preis */
--coolfoot-button-bg: #3A6F7D; /* Hintergrundfarbe für den Button */
--coolfoot-button-bg-hover: #2E5A66; /* Hover-Hintergrundfarbe für den Button */
--coolfoot-button-text-color: #FFFFFF;/* Textfarbe für den Button */
}
.coolfoot-image-container {
background-color: var(--coolfoot-primary-color);
/* Starke Rundung rechts, keine Rundung links, um den Effekt zu erzielen */
/* Die genauen Werte musst du ggf. an die Proportionen deines Bildes/Layouts anpassen */
border-top-right-radius: 300px;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
padding: 30px; /* Innenabstand, damit das Bild nicht am Rand klebt */
display: flex; /* Um das Bild darin zentrieren zu können, falls gewünscht */
justify-content: center;
align-items: center;
min-height: 400px;
}
.coolfoot-image-container-left {
background-color: var(--coolfoot-primary-color);
/* Starke Rundung rechts, keine Rundung links, um den Effekt zu erzielen */
/* Die genauen Werte musst du ggf. an die Proportionen deines Bildes/Layouts anpassen */
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius: 300px;
border-bottom-left-radius: 20px;
padding: 30px; /* Innenabstand, damit das Bild nicht am Rand klebt */
display: flex; /* Um das Bild darin zentrieren zu können, falls gewünscht */
justify-content: center;
align-items: center;
min-height: 300px;
}
/* Optional: Wenn das Bild selbst noch einen inneren Rahmen oder Styling braucht */
.coolfoot-product-image {
max-width: 100%;
height: auto;
/* Falls das Bild auf einem "Podest" steht wie im Beispiel, */
/* könntest du hier weitere Styles für das Bild-Element hinzufügen */
}
.coolfoot-feature-box {
background-color: var(--coolfoot-primary-color);
color: var(--coolfoot-text-color);
padding: 20px;
border-radius: 15px; /* Deutlichere Rundung für die Feature-Boxen */
/* d-flex und align-items-center werden via Bootstrap Klassen hinzugefügt */
/* mb-3 (Bootstrap) sorgt für den Abstand nach unten */
}
.coolfoot-feature-icon img {
filter: brightness(0) invert(1);
max-height: 24px;
}
.coolfoot-feature-icon svg {
fill: var(--coolfoot-text-color);
width: 30px;
height: 30px;
}
/*Benefit */
.coolfoot-benefits-section {
/* Gesamter Container für diesen Block */
}
.coolfoot-benefits-section .coolfoot-section-title {
color: var(--coolfoot-dark-text);
font-weight: bold; /* Titel ist fett dargestellt */
margin-bottom: 0.75rem; /* Etwas Abstand zum Untertitel */
}
.coolfoot-benefits-section .coolfoot-section-subtitle {
color: var(--coolfoot-muted-text);
margin-bottom: 2.5rem; /* Größerer Abstand zu den Karten */
font-size: 1.1rem; /* Etwas größer für den Untertitel */
}
.coolfoot-benefit-card {
/* background-image: linear-gradient(135deg, var(--coolfoot-gradient-start), var(--coolfoot-gradient-end)); */
background-image: linear-gradient(0deg, rgb(29, 141, 132) 0%, rgb(112, 219, 219) 100%);
color: var(--coolfoot-text-color);
padding: 25px;
border-radius: 20px 150px 20px 20px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.coolfoot-benefit-icon {
margin-bottom: 1rem; /* Abstand unter dem Icon */
}
.coolfoot-benefit-icon img { /* Falls du ![]()
für Icons nutzt */
filter: brightness(0) invert(1); /* Macht dunkle Icons weiß */
max-height: 40px; /* Beispiel Icon-Größe, anpassen bei Bedarf */
display: block; /* Sicherstellen, dass es zentriert werden kann, falls es inline ist */
margin-left: auto;
margin-right: auto;
}
.coolfoot-benefit-icon svg { /* Falls du