*
* BEISPIELE:
* Hero-Bereich:
Kein Hover
* Service-Karten:
Mit Hover
* Feature-Karten:
Mit Hover
*/
/**
* Card Component - BASIS-KLASSE (Version 4.0)
* Wiederverwendbare Karten OHNE automatische Hover-Effekte
* ÄNDERUNG: Hover-Effekte wurden entfernt und in separate Klasse ausgelagert
*/
.card {
background: white; /* Weißer Hintergrund */
padding: 2.5rem; /* Großzügiger Innenabstand */
border-radius: 20px; /* Runde Ecken */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Basis-Schatten für normalen Zustand */
position: relative; /* Für Pseudo-Elemente */
overflow: hidden; /* Für Designelemente */
/* VERSION 4.0 ENTFERNT:
* - transition: all 0.3s ease; (nur noch bei .card-hover)
* - cursor: pointer; (nur noch bei .card-hover)
* - :hover Effekte (nur noch bei .card-hover)
*/
}
/**
* Card Hover Enhancement - NEUE KLASSE (Version 4.0)
* Fügt Hover-Effekte zu Basis-Karten hinzu
* VERWENDUNG: Kombinieren Sie mit .card für interaktive Karten
* BEISPIEL:
Interaktive Karte
*/
.card-hover {
transition: all 0.3s ease; /* Sanfte Übergänge für transform und box-shadow */
cursor: pointer; /* Zeigt dem Nutzer, dass das Element interaktiv ist */
}
/**
* Card Hover-Effekt - NUR FÜR .card-hover KLASSE (Version 4.0)
* Hebt die Karte beim Überfahren hervor
* ÄNDERUNG: Gilt nur noch für Elemente mit .card UND .card-hover Klassen
*/
.card.card-hover:hover {
transform: translateY(-10px); /* Bewegt Karte nach oben */
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); /* Verstärkter Schatten */
}
/**
* Card Akzent-Linie - UNVERÄNDERT
* Farbige Linie am oberen Rand jeder Karte
* HINWEIS: Funktioniert bei allen .card Elementen (mit und ohne Hover)
*/
.card:before {
content: ''; /* Leeres Pseudo-Element */
position: absolute; /* Absolute Positionierung */
top: 0; /* Am oberen Rand */
left: 0; /* Vollständige Breite */
right: 0;
height: 4px; /* Linienstärke */
background: linear-gradient(135deg, var(--accent-color), var(--secondary-accent)); /* Gradient */
}
/**
* Card Überschriften - UNVERÄNDERT
* Funktioniert bei allen .card Elementen
*/
.card h3 {
color: var(--primary-color); /* Primärfarbe */
margin-bottom: 1.5rem; /* Abstand zum Text */
font-size: 1.4rem; /* Moderate Größe */
}
/**
* Card Listen - UNVERÄNDERT
* Styling für Listen innerhalb von Karten
*/
.card ul {
list-style: none; /* Entfernt Standard-Listenpunkte */
padding: 0; /* Entfernt Standard-Padding */
}
.card li {
padding: 0.5rem 0; /* Vertikaler Abstand */
position: relative; /* Für Custom-Listenpunkt */
padding-left: 1.5rem; /* Platz für Custom-Listenpunkt */
color: var(--text-light); /* Hellere Textfarbe */
}
/**
* Custom Listenpunkte - UNVERÄNDERT
* Checkmarks anstelle von Standard-Bullets
*/
.card li::before {
content: '✓'; /* Checkmark-Symbol */
position: absolute; /* Absolute Positionierung */
left: 0; /* Am linken Rand */
color: var(--accent-color); /* Akzentfarbe */
font-weight: bold; /* Fett für bessere Sichtbarkeit */
}
/* =================================
9. PROCESS STEPS (Prozess-Darstellung)
================================= */
/**
* Process Step Container
* Für die Darstellung von Arbeitsschritten
*/
.process-step {
text-align: center; /* Zentrierte Ausrichtung */
position: relative; /* Für Verbindungslinien */
}
/**
* Process Number Circle
* Kreisförmige Nummer für jeden Schritt
*/
.process-number {
width: 80px; /* Feste Breite */
height: 80px; /* Feste Höhe (Kreis) */
border-radius: 50%; /* Vollständig rund */
background: linear-gradient(135deg, var(--accent-color), var(--secondary-accent)); /* Gradient */
color: white; /* Weiße Schrift */
display: flex; /* Flexbox für Zentrierung */
align-items: center; /* Vertikale Zentrierung */
justify-content: center; /* Horizontale Zentrierung */
font-size: 2rem; /* Große Schrift */
font-weight: bold; /* Fett */
margin: 0 auto 1.5rem; /* Zentrierung und Abstand */
position: relative; /* Über Verbindungslinie */
z-index: 2; /* Höher als Linie */
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); /* Schatten */
}
/**
* Verbindungslinien zwischen Process Steps
* Nur auf Desktop-Ansicht sichtbar
*/
.process-step::after {
content: ''; /* Leeres Pseudo-Element */
position: absolute; /* Absolute Positionierung */
top: 40px; /* Mittig der Nummer */
left: 50%; /* Startet in der Mitte */
width: 100%; /* Volle Breite zur nächsten Spalte */
height: 2px; /* Linienstärke */
background: rgba(255, 255, 255, 0.3); /* Semi-transparente weiße Linie */
z-index: 1; /* Unter der Nummer */
}
/**
* Entfernt Linie nach dem letzten Schritt
*/
.process-step:last-child::after {
display: none; /* Keine Linie nach dem letzten Element */
}
/* =================================
10. TESTIMONIALS (Kundenstimmen)
================================= */
/* ALTE TESTIMONIAL STYLES - WERDEN BEHALTEN FÜR KOMPATIBILITÄT */
/*
.testimonial {
background: white;
padding: 3rem;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
position: relative;
margin-top: 2rem;
}
.testimonial::before {
content: '"';
position: absolute;
top: -10px;
left: 30px;
font-size: 5rem;
color: var(--accent-color);
font-family: 'Playfair Display', serif;
line-height: 1;
}
.testimonial-text {
font-style: italic;
font-size: 1.2rem;
margin-bottom: 1.5rem;
color: var(--text-dark);
}
.testimonial-author {
font-weight: 600;
color: var(--primary-color);
}
*/
/* =================================
NEUE FUNKTIONALITÄT: TESTIMONIAL SLIDER
================================= */
/**
* Testimonial Slider Container
* Haupt-Container für den automatischen Testimonial-Slider
*/
.testimonial-slider {
position: relative; /* Für absolute positionierte Elemente */
margin-top: 2rem; /* Abstand von vorherigen Elementen */
background: transparent; /* Transparenter Hintergrund */
border-radius: 20px; /* Runde Ecken */
overflow: hidden; /* Verhindert Überlauf */
}
/**
* Testimonial Container
* Wrapper für alle Testimonials
*/
.testimonial-container {
position: relative; /* Relative Positionierung */
height: auto; /* Automatische Höhe */
min-height: 200px; /* Minimale Höhe für Konsistenz */
}
/**
* Einzelnes Testimonial
* Styling für jede Kundenstimme im Slider - ÜBERARBEITET
*/
.testimonial {
background: white; /* Weißer Hintergrund */
padding: 3rem; /* Großzügiger Innenabstand */
border-radius: 20px; /* Runde Ecken */
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); /* Sanfter Schatten */
position: absolute; /* Absolute Positionierung für Overlay */
top: 0; /* Am oberen Rand */
left: 0; /* Am linken Rand */
right: 0; /* Volle Breite */
opacity: 0; /* Startet unsichtbar */
transform: translateX(100px) scale(0.95); /* Startet nach rechts versetzt und kleiner */
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Sanfte, natürliche Übergänge */
z-index: 1; /* Basis z-index */
pointer-events: none; /* Verhindert Interaktion mit unsichtbaren Slides */
}
/**
* Aktives Testimonial
* Sichtbares Testimonial im Slider - ÜBERARBEITET
*/
.testimonial.active {
opacity: 1; /* Vollständig sichtbar */
transform: translateX(0) scale(1); /* In normaler Position und Größe */
z-index: 3; /* Höchster z-index */
position: relative; /* Relative Positionierung für aktives Element */
pointer-events: auto; /* Ermöglicht Interaktion */
}
/**
* Vorheriges Testimonial
* Slide das gerade ausgeblendet wird - NEU
*/
.testimonial.prev {
opacity: 0; /* Wird unsichtbar */
transform: translateX(-100px) scale(0.95); /* Bewegt sich nach links und wird kleiner */
z-index: 2; /* Mittlerer z-index */
pointer-events: none; /* Keine Interaktion möglich */
}
/**
* Testimonial Anführungszeichen
* Großes Anführungszeichen als Designelement
*/
.testimonial::before {
content: '"'; /* Anführungszeichen */
position: absolute; /* Absolute Positionierung */
top: -10px; /* Leicht über dem Container */
left: 30px; /* Links positioniert */
font-size: 5rem; /* Sehr große Schrift */
color: var(--accent-color); /* Akzentfarbe */
font-family: 'Playfair Display', serif; /* Elegante Serif-Schrift */
line-height: 1; /* Kompakte Linie */
}
/**
* Testimonial Text
* Der eigentliche Bewertungstext
*/
.testimonial-text {
font-style: italic; /* Kursive Schrift für Zitat */
font-size: 1.2rem; /* Leicht vergrößerte Schrift */
margin-bottom: 1.5rem; /* Abstand zum Autor */
color: var(--text-dark); /* Dunkle Textfarbe */
}
/**
* Testimonial Autor
* Name und Position des Bewerters
*/
.testimonial-author {
font-weight: 600; /* Semi-Bold */
color: var(--primary-color); /* Primärfarbe */
}
/**
* Testimonial Navigation Dots
* Navigations-Punkte unter dem Slider
*/
.testimonial-dots {
display: flex; /* Flexbox für horizontale Anordnung */
justify-content: center; /* Horizontale Zentrierung */
gap: 0.8rem; /* Abstand zwischen Punkten */
margin-top: 2rem; /* Abstand zum Testimonial */
padding: 1rem 0; /* Vertikaler Padding */
}
/**
* Einzelner Navigation Dot
* Klickbarer Punkt für Testimonial-Navigation
*/
.dot {
width: 12px; /* Feste Breite */
height: 12px; /* Feste Höhe (Kreis) */
border-radius: 50%; /* Vollständig rund */
background: rgba(255, 255, 255, 0.3); /* Semi-transparenter weißer Hintergrund */
cursor: pointer; /* Zeiger-Cursor */
transition: all 0.3s ease; /* Sanfte Übergänge */
border: 2px solid transparent; /* Transparenter Rahmen */
}
/**
* Aktiver Navigation Dot
* Hervorgehobener Punkt für aktuelles Testimonial
*/
.dot.active {
background: var(--accent-color); /* Akzentfarbe */
transform: scale(1.2); /* Leicht vergrößert */
box-shadow: 0 2px 8px rgba(74, 158, 255, 0.4); /* Farbiger Schatten */
}
/**
* Hover-Effekt für Navigation Dots
*/
.dot:hover {
background: rgba(255, 255, 255, 0.6); /* Hellerer Hintergrund */
transform: scale(1.1); /* Leichte Vergrößerung */
}
.dot.active:hover {
background: var(--accent-color); /* Behält Akzentfarbe bei */
}
/* =================================
NEUE FUNKTIONALITÄT: EXPANDABLE CONTACT ITEMS - ÜBERARBEITET
================================= */
/**
* Contact Item Styling - KOMPLETT ÜBERARBEITET
* Für einzelne Kontaktinformationen oder Features mit korrektem Layout
*/
.contact-item {
background: var(--bg-light); /* Heller Hintergrund */
border-radius: 15px; /* Runde Ecken */
transition: all 0.3s ease; /* Sanfte Übergänge */
cursor: pointer; /* Zeiger-Cursor für klickbare Items */
border: 2px solid transparent; /* Transparenter Rahmen für Hover-Effekt */
margin: 1rem 0; /* Vertikaler Außenabstand */
overflow: hidden; /* Verhindert Überlauf */
}
/**
* Contact Item Header - NEU
* Immer sichtbarer oberer Teil des Contact Items mit korrektem Layout
*/
.contact-item-header {
display: flex; /* Flexbox für horizontales Layout */
align-items: center; /* Vertikale Zentrierung */
gap: 1rem; /* Abstand zwischen Pfeil und Text */
padding: 1rem; /* Innenabstand */
width: 100%; /* Volle Breite */
}
/**
* Contact Arrow - NEU
* Pfeil-Icon für Expand/Collapse Funktionalität
*/
.contact-arrow {
font-size: 1.2rem; /* Größere Schrift für bessere Sichtbarkeit */
color: var(--accent-color); /* Akzentfarbe */
font-weight: bold; /* Fett */
transition: transform 2s ease; /* Sanfte Rotation */
flex-shrink: 0; /* Verhindert Verkleinerung */
line-height: 1; /* Kompakte Linie */
}
/**
* Contact Item Strong Text - NEU
* Styling für den Haupttext in der Header-Zeile
*/
.contact-item-header strong {
color: var(--text-dark); /* Dunkle Textfarbe */
font-weight: 600; /* Semi-Bold */
line-height: 1.4; /* Gute Lesbarkeit */
flex: 1; /* Nimmt verfügbaren Platz ein */
}
/**
* Contact Item Details - ÜBERARBEITET
* Erweiterte Informationen die ein-/ausgeblendet werden
*/
.contact-item-details {
max-height: 0; /* Startet eingeklappt */
overflow: hidden; /* Verhindert Überlauf */
opacity: 0; /* Startet unsichtbar */
transition: all 0.4s ease; /* Sanfte Ein-/Ausblendung */
padding: 0 1rem; /* Seitlicher Padding */
}
/**
* Contact Item Details Paragraph - ÜBERARBEITET
* Styling für den erweiterten Text
*/
.contact-item-details p {
margin: 0; /* Entfernt Standard-Margins */
padding: 0 0 1rem 2.2rem; /* Padding links für Einrückung, unten für Abstand */
font-size: 0.95rem; /* Etwas kleinere Schrift */
line-height: 1.6; /* Gute Lesbarkeit */
color: var(--text-light); /* Hellere Textfarbe */
}
/**
* Erweiterte Contact Item (geöffnet) - ÜBERARBEITET
* Styling wenn das Item aufgeklappt ist
*/
.contact-item.expanded {
background: white; /* Weißer Hintergrund */
border-color: var(--accent-color); /* Farbiger Rahmen */
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); /* Schatten */
}
.contact-item.expanded .contact-item-details {
max-height: 200px; /* Maximale Höhe für erweiterten Inhalt */
opacity: 1; /* Vollständig sichtbar */
}
.contact-item.expanded .contact-arrow {
transform: rotate(0deg); /* Rotiert Pfeil nach unten */
}
/**
* Contact Item Hover-Effekt - ÜBERARBEITET
* Interaktive Hervorhebung bei Mausübergang
*/
.contact-item:hover {
background: white; /* Weißer Hintergrund */
border-color: rgba(74, 158, 255, 0.3); /* Hellere Akzentfarbe */
transform: translateX(5px); /* Leichte Bewegung nach rechts */
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08); /* Sanfter Schatten */
}
/**
* ENTFERNTE/AUSKOMMENTIERTE ALTE STYLES - WERDEN NICHT MEHR BENÖTIGT
*/
/*
.contact-item > *:not(.contact-item-details) {
display: flex;
align-items: center;
gap: 1rem;
}
.contact-item[data-expandable="true"] .highlight {
transition: transform 0.3s ease;
font-size: 1.2rem;
color: var(--accent-color);
font-weight: bold;
}
.contact-item.expanded .highlight {
transform: rotate(90deg);
}
*/
/* =================================
NEUE FUNKTIONALITÄT: DATENSCHUTZ-SEITE STYLING
================================= */
/**
* Datenschutz Content Container
* Spezielle Styles für die Datenschutz-Seite
*/
.datenschutz-content {
max-width: 1000px; /* Begrenzte Breite für bessere Lesbarkeit */
margin: 0 auto; /* Horizontale Zentrierung */
}
/**
* Datenschutz Liste
* Spezielle Listen-Styles für Datenschutz-Inhalte
*/
.datenschutz-list {
list-style: none; /* Entfernt Standard-Listenpunkte */
padding: 0; /* Entfernt Standard-Padding */
margin: 1rem 0; /* Vertikaler Abstand */
}
.datenschutz-list li {
padding: 0.7rem 0; /* Vertikaler Abstand */
position: relative; /* Für Custom-Listenpunkt */
padding-left: 1.8rem; /* Platz für Custom-Listenpunkt */
color: var(--text-light); /* Hellere Textfarbe */
border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Subtile Trennlinie */
}
.datenschutz-list li:last-child {
border-bottom: none; /* Keine Linie beim letzten Element */
}
/**
* Custom Listenpunkte für Datenschutz
* Bullet-Points anstelle von Checkmarks
*/
.datenschutz-list li::before {
content: '•'; /* Bullet-Symbol */
position: absolute; /* Absolute Positionierung */
left: 0; /* Am linken Rand */
color: var(--accent-color); /* Akzentfarbe */
font-weight: bold; /* Fett für bessere Sichtbarkeit */
font-size: 1.2rem; /* Etwas größer */
}
/**
* Kontakt Info Box (Datenschutz-Seite)
* Hervorgehobene Box für Kontaktinformationen
*/
.contact-info-box {
background: var(--bg-light); /* Heller Hintergrund */
padding: 1.5rem; /* Innenabstand */
border-radius: 10px; /* Runde Ecken */
border-left: 4px solid var(--accent-color); /* Farbige linke Linie */
margin: 1rem 0; /* Vertikaler Abstand */
font-size: 0.95rem; /* Etwas kleinere Schrift */
line-height: 1.6; /* Gute Lesbarkeit */
}
/**
* Datenschutz-Link im Footer
* Styling für den Link zur Datenschutz-Seite
*/
.datenschutz-link {
color: rgba(255, 255, 255, 0.8); /* Semi-transparente weiße Schrift */
font-size: 0.9rem; /* Kleinere Schriftgröße */
text-decoration: none; /* Unterstreichung */
transition: color 0.3s ease; /* Sanfter Farbübergang */
border-bottom: 1px dotted rgba(255, 255, 255, 0.5); /* Gepunktete Unterstreichung */
transition: all 0.3s ease; /* Sanfte Übergänge */
}
.datenschutz-link:hover {
border-bottom-color: rgba(255, 255, 255, 0.8); /* Stärkere Unterstreichung bei Hover */
text-decoration: none; /* Entfernt Unterstreichung bei Hover */
}
/* =================================
11. IMAGES & MEDIA
================================= */
/**
* Rounded Images
* Styling für Bilder mit runden Ecken
*/
.image-round {
border-radius: 20px; /* Runde Ecken */
width: 100%; /* Volle Containerbreite */
height: auto; /* Proportionales Seitenverhältnis */
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); /* Sanfter Schatten */
}
/* =================================
12. CONTACT SECTION
================================= */
/**
* Contact Info Container
* Styling für den Kontaktbereich
*/
.contact-info {
background: white; /* Weißer Hintergrund */
padding: 3rem; /* Großzügiger Innenabstand */
border-radius: 20px; /* Runde Ecken */
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); /* Sanfter Schatten */
text-align: center; /* Zentrierte Ausrichtung */
}
/**
* Spezifische Button-Zentrierung im Kontaktbereich
* Überschreibt Standard-CTA-Button-Styles für perfekte Zentrierung
*/
.contact-info .cta-buttons {
display: flex !important; /* Erzwingt Flexbox */
gap: 1.5rem; /* Abstand zwischen Buttons */
justify-content: center !important; /* Erzwingt Zentrierung */
align-items: center; /* Vertikale Zentrierung */
flex-wrap: wrap; /* Umbruch auf kleinen Bildschirmen */
opacity: 1 !important; /* Überschreibt Animationsstart */
animation: none !important; /* Deaktiviert Animation */
margin: 2rem auto 0 auto; /* Zentrierung mit Abstand */
width: 100%; /* Volle Breite */
text-align: center; /* Zentrierte Ausrichtung */
}
.contact-info .btn {
flex: 0 0 auto; /* Flexible Größe */
margin: 0 auto; /* Automatische Zentrierung */
display: inline-flex; /* Beibehaltung der Flex-Eigenschaften */
}
/**
* Desktop-spezifische Kontakt-Button-Zentrierung
* Zusätzliche Regeln für größere Bildschirme
*/
@media (min-width: 769px) {
.contact-info .cta-buttons {
justify-content: center !important; /* Erzwingt Zentrierung */
align-items: center !important; /* Vertikale Zentrierung */
margin-left: auto !important; /* Automatische linke Zentrierung */
margin-right: auto !important; /* Automatische rechte Zentrierung */
text-align: center !important; /* Zentrierte Textausrichtung */
}
.contact-info .btn {
margin: 0 !important; /* Entfernt Margins auf Desktop */
}
}
/* =================================
13. PARTNER SECTION
================================= */
/**
* Partner Section Container
* Bereich für Partnerlogos und -informationen
*/
.partner-section {
text-align: center; /* Zentrierte Ausrichtung */
padding: 2rem 0; /* Vertikaler Abstand */
border-top: 1px solid #e5e7eb; /* Obere Trennlinie */
margin-top: 2rem; /* Abstand zu vorherigem Content */
}
/**
* Partner Text
* Beschreibender Text über den Partnern
*/
.partner-text {
font-size: 0.9rem; /* Kleinere Schrift */
color: var(--text-light); /* Helle Textfarbe */
margin-bottom: 1rem; /* Abstand zu Logo */
font-weight: 400; /* Normal-Gewicht */
}
/**
* Partner Logo Container
* Layout für Partnerlogos
*/
.partner-logo {
display: flex; /* Flexbox Layout */
align-items: center; /* Vertikale Zentrierung */
justify-content: center; /* Horizontale Zentrierung */
gap: 1rem; /* Abstand zwischen Elementen */
opacity: 0.7; /* Leicht transparent */
transition: opacity 0.3s ease; /* Sanfter Übergang */
}
.partner-logo:hover {
opacity: 1; /* Vollständig sichtbar bei Hover */
}
/**
* Partner Link
* Klickbarer Bereich um Partner-Logo
*/
.partner-link {
display: flex; /* Flexbox für Layout */
align-items: center; /* Vertikale Zentrierung */
gap: 1rem; /* Abstand zwischen Logo und Text */
text-decoration: none; /* Keine Unterstreichung */
transition: all 0.3s ease; /* Sanfte Übergänge */
padding: 0.5rem; /* Padding für größere Klickfläche */
border-radius: 8px; /* Leicht runde Ecken */
}
.partner-link:hover {
background: rgba(74, 158, 255, 0.05); /* Sehr heller blauer Hintergrund */
transform: translateY(-2px); /* Leichte Bewegung nach oben */
}
/**
* Cerasus Logo Spezifische Styles
* Styling für das Partner-Logo
*/
.cerasus-logo {
height: 40px; /* Feste Höhe */
width: auto; /* Proportionale Breite */
filter: grayscale(100%); /* Schwarz-weiß Filter */
transition: filter 0.3s ease; /* Sanfter Übergang */
}
.partner-link:hover .cerasus-logo {
filter: grayscale(0%); /* Entfernt Schwarz-weiß Filter bei Hover */
}
/**
* Partner Name
* Textbezeichnung des Partners
*/
.partner-name {
font-size: 1.1rem; /* Leicht vergrößerte Schrift */
color: var(--text-light); /* Helle Textfarbe */
font-weight: 500; /* Medium-Gewicht */
transition: color 0.3s ease; /* Sanfter Farbübergang */
}
.partner-link:hover .partner-name {
color: var(--accent-color); /* Akzentfarbe bei Hover */
}
/* =================================
14. FOOTER
================================= */
/**
* Footer Container
* Styling für den Seitenfuß
*/
footer {
background: var(--text-dark); /* Dunkler Hintergrund */
color: white; /* Weiße Schrift */
padding: 3rem 0; /* Vertikaler Abstand */
text-align: center; /* Zentrierte Ausrichtung */
}
/**
* Footer Paragraph
* Styling für Footer-Texte
*/
footer p {
color: rgba(255, 255, 255, 0.8); /* Semi-transparente weiße Schrift */
font-size: 0.9rem; /* Kleinere Schriftgröße */
}
/* =================================
15. IMPRESSUM TOOLTIP
================================= */
/**
* Impressum Trigger
* Klickbarer/hoverbarer Bereich für Impressum-Tooltip
*/
.impressum-trigger {
position: relative; /* Für absolut positionierten Tooltip */
cursor: help; /* Hilfe-Cursor */
border-bottom: 1px dotted rgba(255, 255, 255, 0.5); /* Gepunktete Unterstreichung */
transition: all 0.3s ease; /* Sanfte Übergänge */
}
.impressum-trigger:hover {
border-bottom-color: rgba(255, 255, 255, 0.8); /* Stärkere Unterstreichung bei Hover */
}
/**
* Impressum Tooltip
* Pop-up mit Impressum-Informationen
*/
.impressum-tooltip {
visibility: hidden; /* Standardmäßig versteckt */
opacity: 0; /* Transparent */
position: absolute; /* Absolute Positionierung */
bottom: 100%; /* Über dem Trigger */
left: 50%; /* Horizontal zentriert */
transform: translateX(-50%); /* Exakte Zentrierung */
margin-bottom: 10px; /* Abstand zum Trigger */
width: 320px; /* Feste Breite */
background: white; /* Weißer Hintergrund */
color: var(--text-dark); /* Dunkler Text */
padding: 1.5rem; /* Innenabstand */
border-radius: 12px; /* Runde Ecken */
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); /* Deutlicher Schatten */
font-size: 0.85rem; /* Kleinere Schrift */
line-height: 1.4; /* Kompakter Zeilenabstand */
text-align: left; /* Linksbündiger Text */
z-index: 1000; /* Hoher z-index für Überlagerung */
transition: all 0.3s ease-in-out; /* Sanfte Ein-/Ausblendung */
border: 1px solid #e5e7eb; /* Subtiler Rahmen */
}
/**
* Tooltip Pfeil
* Kleiner Pfeil der zum Trigger zeigt
*/
.impressum-tooltip::after {
content: ''; /* Leeres Pseudo-Element */
position: absolute; /* Absolute Positionierung */
top: 100%; /* Unter dem Tooltip */
left: 50%; /* Horizontal zentriert */
margin-left: -8px; /* Zentrierung des Pfeils */
border: 8px solid transparent; /* Transparente Ränder */
border-top-color: white; /* Weißer oberer Rand (Pfeil) */
}
/**
* Tooltip Sichtbarkeit bei Hover
* Zeigt den Tooltip beim Überfahren des Triggers
*/
.impressum-trigger:hover .impressum-tooltip {
visibility: visible; /* Sichtbar machen */
opacity: 1; /* Vollständig undurchsichtig */
transform: translateX(-50%) translateY(-5px); /* Leichte Bewegung nach oben */
}
/**
* Tooltip Text-Styling
* Formatierung für verschiedene Texttypen im Tooltip
*/
.impressum-tooltip strong {
color: var(--primary-color); /* Primärfarbe für Überschriften */
display: block; /* Block-Element */
margin-bottom: 0.5rem; /* Abstand nach unten */
}
.impressum-tooltip br + strong {
margin-top: 0.5rem; /* Abstand vor neuen Überschriften */
}
/* =================================
16. ANIMATIONS
================================= */
/**
* Fade In Up Animation
* Keyframe-Animation für Einblend-Effekte von unten
*/
@keyframes fadeInUp {
from {
opacity: 0; /* Startet transparent */
transform: translateY(30px); /* Startet 30px nach unten versetzt */
}
to {
opacity: 1; /* Endet vollständig sichtbar */
transform: translateY(0); /* Endet in normaler Position */
}
}
/**
* Fade In Class
* Klasse für Scroll-aktivierte Animationen
*/
.fade-in {
opacity: 0; /* Startet unsichtbar */
transform: translateY(30px); /* Startet nach unten versetzt */
transition: all 0.6s ease; /* Sanfte Übergänge */
}
/**
* Visible State für Fade In
* Wird durch JavaScript beim Scrollen aktiviert
*/
.fade-in.visible {
opacity: 1; /* Wird sichtbar */
transform: translateY(0); /* Bewegt sich in normale Position */
}
/* =================================
17. RESPONSIVE DESIGN
================================= */
/**
* Tablet und kleinere Desktop-Bildschirme
* Anpassungen für mittlere Bildschirmgrößen
*/
@media (max-width: 768px) {
/* --- NAVIGATION ANPASSUNGEN --- */
.nav-container {
padding: 1rem; /* Reduzierter Padding auf kleinen Bildschirmen */
}
/* Mobile Logo-Anpassungen */
.logo5-main {
font-size: 1.4rem; /* Kleinere Logo-Schrift */
}
.logo5-container {
padding-left: 0.8rem; /* Reduzierter Padding */
border-left-width: 3px; /* Dünnere Akzentlinie */
}
/* Mobile Menu Button sichtbar machen */
.menu-toggle {
display: flex; /* Zeigt Hamburger-Button */
align-items: center; /* Zentrierung */
justify-content: center;
}
/* Mobile Navigation Menu */
.nav-list {
display: none; /* Standardmäßig versteckt */
flex-direction: column; /* Vertikale Anordnung */
background: white; /* Weißer Hintergrund */
position: absolute; /* Absolute Positionierung */
top: 100%; /* Unter der Navigation */
left: 0; /* Volle Breite */
right: 0;
padding: 2rem; /* Innenabstand */
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); /* Schatten */
gap: 1rem; /* Reduzierter Abstand zwischen Links */
}
/* Aktives Mobile Menu */
.nav-list.active {
display: flex; /* Zeigt Menu wenn aktiv */
}
/* --- HERO SECTION ANPASSUNGEN --- */
.hero {
padding: 100px 0 50px; /* Angepasster Padding für fixe Navigation */
min-height: 80vh; /* Reduzierte Höhe auf mobilen Geräten */
}
/* Mobile Button Layout */
.cta-buttons {
flex-direction: column; /* Vertikale Anordnung der Buttons */
align-items: center; /* Zentrierung */
}
.contact-info .cta-buttons {
flex-direction: column; /* Vertikale Button-Anordnung */
align-items: center; /* Zentrierung */
gap: 1rem; /* Reduzierter Abstand */
}
/* --- GRID LAYOUT ANPASSUNGEN --- */
.two-column,
.three-column,
.four-column {
grid-template-columns: 1fr; /* Alle Grids werden zu einer Spalte */
gap: 2rem; /* Reduzierter Abstand */
}
/* Reduzierter Section Padding */
.section {
padding: 60px 0; /* Kleinerer vertikaler Abstand */
}
/* Entfernt Verbindungslinien bei Process Steps */
.process-step::after {
display: none; /* Keine Verbindungslinien auf Mobile */
}
/* --- MOBILE PARTNER SECTION --- */
.partner-logo {
flex-direction: column; /* Vertikale Anordnung */
gap: 0.5rem; /* Reduzierter Abstand */
}
.partner-link {
flex-direction: column; /* Vertikale Anordnung */
gap: 0.5rem; /* Reduzierter Abstand */
}
.cerasus-logo {
height: 35px; /* Kleineres Logo auf Mobile */
}
/* --- MOBILE IMPRESSUM TOOLTIP --- */
.impressum-tooltip {
width: 280px; /* Schmalerer Tooltip */
font-size: 0.8rem; /* Kleinere Schrift */
padding: 1.2rem; /* Reduzierter Padding */
left: 0; /* Links ausgerichtet */
transform: translateX(0); /* Keine horizontale Zentrierung */
margin-left: 1rem; /* Abstand vom linken Rand */
}
.impressum-trigger:hover .impressum-tooltip {
transform: translateX(0) translateY(-5px); /* Angepasste Hover-Animation */
}
/* --- NEUE MOBILE ANPASSUNGEN FÜR NEUE FEATURES --- */
/* Mobile Testimonial Slider */
.testimonial {
padding: 2rem; /* Reduzierter Padding */
}
.testimonial::before {
font-size: 3.5rem; /* Kleineres Anführungszeichen */
top: -5px; /* Angepasste Position */
left: 20px; /* Angepasste Position */
}
.testimonial-text {
font-size: 1rem; /* Kleinere Schrift auf Mobile */
}
.testimonial-dots {
gap: 0.6rem; /* Reduzierter Abstand zwischen Dots */
margin-top: 1.5rem; /* Reduzierter oberer Abstand */
}
.dot {
width: 10px; /* Kleinere Dots */
height: 10px;
}
/* Mobile Expandable Contact Items - ÜBERARBEITET */
.contact-item-header {
padding: 0.8rem; /* Reduzierter Padding */
gap: 0.8rem; /* Reduzierter Abstand */
}
.contact-item-details {
padding: 0 0.8rem; /* Angepasster seitlicher Padding */
}
.contact-item-details p {
font-size: 0.9rem; /* Kleinere Schrift */
padding: 0 0 1rem 1.8rem; /* Angepasste Einrückung */
}
.contact-arrow {
font-size: 1rem; /* Kleinerer Pfeil auf Mobile */
}
.contact-item:hover {
transform: translateX(2px); /* Reduzierte Bewegung auf Mobile */
}
/* Mobile Datenschutz-Seite */
.datenschutz-content {
padding: 0 1rem; /* Zusätzlicher seitlicher Padding */
}
.contact-info-box {
padding: 1rem; /* Reduzierter Padding */
font-size: 0.9rem; /* Kleinere Schrift */
}
}
/**
* Sehr kleine Bildschirme (Smartphones)
* Zusätzliche Anpassungen für sehr kleine Bildschirme
*/
@media (max-width: 430px) {
/* Noch kleineres Logo */
.logo5-main {
font-size: 1.2rem; /* Minimal-Schriftgröße für Logo */
}
/* Reduzierter Partner Section Padding */
.partner-section {
padding: 1.5rem 0; /* Kompakterer Abstand */
}
/* Weitere Mobile Anpassungen für neue Features - ÜBERARBEITET */
.testimonial {
padding: 1.5rem; /* Noch reduzierter Padding */
}
.testimonial::before {
font-size: 3rem; /* Noch kleineres Anführungszeichen */
left: 15px; /* Angepasste Position */
}
.contact-item-header {
padding: 0.6rem; /* Noch reduzierter Padding */
gap: 0.6rem; /* Noch reduzierter Abstand */
}
.contact-item-details p {
font-size: 0.85rem; /* Noch kleinere Schrift */
padding: 0 0 0.8rem 1.4rem; /* Angepasste Einrückung und Abstand */
}
.contact-arrow {
font-size: 0.9rem; /* Noch kleinerer Pfeil */
}
}
/* =================================
18. UTILITY CLASSES
================================= */
/**
* Text Alignment Utilities
* Hilfsklassen für Textausrichtung
*/
.text-center {
text-align: center; /* Zentrierte Textausrichtung */
}
/**
* Color Utilities
* Hilfsklassen für spezielle Textfarben
*/
.highlight {
color: var(--accent-color); /* Akzentfarbe für Hervorhebungen */
font-weight: 600; /* Semi-Bold Gewicht */
}
.highlight-white {
color: #F7FAFC; /* Hellweiß für dunkle Hintergründe */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Schatten für Lesbarkeit */
}
/**
* Spacing Utilities
* Hilfsklassen für Abstände
*/
.mb-4 {
margin-bottom: 2rem; /* Großer unterer Abstand */
}
.mt-4 {
margin-top: 2rem; /* Großer oberer Abstand */
}
/**
* =================================
* VERSION 4.0 - ANLEITUNG ZUR VERWENDUNG DER CARD-HOVER KLASSE
* =================================
*
* Die card-hover Klasse wurde eingeführt, um selektive Hover-Effekte zu ermöglichen.
* Dies löst das Problem, dass alle .card Elemente automatisch Hover-Effekte hatten.
*
* VERWENDUNGSBEISPIELE:
*
* 1. STANDARD KARTE OHNE HOVER (z.B. in Hero-Bereichen):
*
*
Überschrift
*
Inhalt ohne Hover-Effekt
*
*
* 2. INTERAKTIVE KARTE MIT HOVER (z.B. Service-Karten):
*
*
+ 30% Churn Reduktion
*
Aufbau eines datengetriebenen Retention-Programms...
*
*
* 3. FEATURE-KARTEN MIT HOVER:
*
*
Feature Titel
*
* - Feature 1
* - Feature 2
*
*
*
* 4. DREI-SPALTEN LAYOUT MIT HOVER-KARTEN:
*
*
Service 1
*
Service 2
*
Service 3
*
*
* WICHTIGE HINWEISE:
* - Die .card-hover Klasse MUSS mit .card kombiniert werden
* - .card-hover alleine funktioniert NICHT
* - Alle bestehenden .card Eigenschaften bleiben erhalten
* - Nur die Hover-Effekte werden durch .card-hover aktiviert
*
* MIGRATION VON BESTEHENDEN KARTEN:
* - Karten in Hero-Bereichen: KEINE Änderung nötig
* - Service/Feature-Karten: .card-hover Klasse hinzufügen
* - Interaktive Karten: .card-hover Klasse hinzufügen
*/
/**
* =================================
* ENDE DER STYLESHEET-DOKUMENTATION - VERSION 4.0
* =================================
*
* Diese CSS-Datei bietet:
* ✅ Vollständige Responsive Design-Unterstützung
* ✅ Moderne Designelemente (Glasmorphism, Gradients, Schatten)
* ✅ Optimierte Performance durch CSS Custom Properties
* ✅ Accessibility-freundliche Hover- und Focus-States
* ✅ Cross-Browser-Kompatibilität
* ✅ Saubere Code-Organisation und Wartbarkeit
* ✅ NEUE FEATURES: Testimonial Slider, Expandable Items, Datenschutz-Styling
* ✅ CARD-HOVER SYSTEM: Selektive Hover-Effekte für bessere Kontrolle
* ✅ UTF-8 Kodierung für korrekte Umlaute
*
* VERSION 4.0 ÄNDERUNGEN:
* - Einführung der .card-hover Klasse für selektive Hover-Effekte
* - Trennung von Basis-.card und interaktiven Karten
* - Verbesserung der Hero-Section Kompatibilität
* - Vollständige UTF-8 Unterstützung
* - Detaillierte Dokumentation der neuen Funktionalität
*
* Wartungshinweise:
* - Farben können zentral über CSS Custom Properties angepasst werden
* - Responsive Breakpoints sind bei 768px und 430px definiert
* - Alle Animationen verwenden ease-Funktionen für natürliche Bewegungen
* - Box-Shadow und Border-Radius verwenden konsistente Werte
* - Neue Features sind vollständig responsive und kompatibel mit bestehenden Styles
* - card-hover Klasse ermöglicht präzise Kontrolle über Interaktivität
*/