/* ================================================================
TINTE15 - CONTENT STYLE STRUCTURE (VERSION 5)
================================================================

1.  GLOBAL CONTENT SETTINGS ... (Farben & Basis)
2.  PROMO BANNER ............. (Red Banner & Buttons)
3.  LAYOUT CONTAINERS ........ (Grids & Flex-Sections)
4.  CARDS SYSTEM ............. (Core- & Category Cards)
5.  UI ELEMENTS .............. (Buttons & Interaktion)
6.  CONTACT & FOOTER ......... (Split-Layout & Abschluss)
7.  RESPONSIVE ............... (Mobile Anpassungen)

================================================================
*/

/* Bebas Neue lokal */
@font-face {
    font-family: 'Bebas Neue';
    src: url('fonts/bebas-neue-v14-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Inter lokal (Beispiel für Regular und Bold) */
@font-face {
    font-family: 'Inter';
    src: url('fonts/inter-v18-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/inter-v18-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}/* ================================================================
   SCHRIFTARTEN LOKAL (DATENSCHUTZKONFORM)
   ================================================================ */

/* Bebas Neue lokal */
@font-face {
    font-family: 'Bebas Neue';
    src: url('fonts/bebas-neue-v14-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Inter lokal - Regular */
@font-face {
    font-family: 'Inter';
    src: url('fonts/inter-v18-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Inter lokal - Bold */
@font-face {
    font-family: 'Inter';
    src: url('fonts/inter-v18-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ================================================================
   GLOBALE ZUWEISUNG (Damit die Schrift überall greift)
   ================================================================ */

html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

/* Zuweisung für alle Überschriften */
h1, h2, h3, h4, h5, h6, 
.v5-title, 
.v5-subtitle, 
.v5-stat-number, 
.v5-contact-box h3 {
    font-family: 'Bebas Neue', sans-serif !important;
    font-weight: 400 !important;
    text-transform: uppercase;
}

/* Spezifische Korrektur für den Slider, falls dort noch alte Stile stören */
.v5-review-card h4 {
    font-family: 'Bebas Neue', sans-serif !important;
}

.v5-review-card p, .v5-review-author {
    font-family: 'Inter', sans-serif !important;
}
/* ------------------------------------------------ 1. GLOBAL CONTENT SETTINGS ------------------------------------------------ */
:root {
    --primary: #222;
    --secondary: #555;
    --accent: #aca093;		/* #007AFF; */
    --light-bg: #f9f9f9;
    --spacing: 80px;
}

#content-page {
    background-color: #ffffff !important;
    color: var(--primary);
    padding: 0 !important;
    min-height: 100vh;
}

#content-page h2, 
#content-page h3, 
#content-page h4 {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.container {
    max-width: 1100px; /* 1100px */
    margin: 0 auto;
    padding: 0 20px;
}

/* ------------------------------------------------ 2. PROMO BANNER ------------------------------------------------ */
.promo-banner-red {
    background: linear-gradient(90deg, #e63946 0%, #b21e35 100%);
    color: #ffffff;
    padding: 15px 0;
    text-align: center;
    font-weight: 700;
    margin-top: 0;
    position: relative;
    z-index: 10;
}

.promo-btn {
    background: #ffffff;
    color: #e63946;
    padding: 6px 18px;
    border-radius: 50px;
    text-decoration: none;
    margin-left: 15px;
    font-size: 0.8rem;
    text-transform: uppercase;
    transition: all 0.3s ease;
    display: inline-block;
}

.promo-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* ------------------------------------------------ 3. LAYOUT CONTAINERS ------------------------------------------------ */
.grid-section { 
    padding: var(--spacing) 0; 
}

/* --- OPTIMIERTE FLEX-FULL SEKTION --- */
.flex-full {
    position: relative;
    width: 100%;
    height: 50vh;
    min-height: 500px;
    display: flex;
    align-items: center;
    overflow: hidden;
    
    /* Standard-Look: Weißer Hintergrund, schwarze Schrift */
    background-color: #ffffff; 
    color: #000000; 
    text-align: center;
}

.flex-full-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

/* Das dunkle Overlay nur anzeigen, wenn ein Bild vorhanden ist */
/* Wir nutzen hier eine CSS-Regel: Wenn das BG-Element kein Style-Attribut mit "none" hat */
.flex-full:has(.flex-full-bg[style*="url"]) 
.flex-full-content {
    color: #ffffff; /* Schrift weiß, wenn Bild im Hintergrund */
}

.flex-full:has(.flex-full-bg[style*="url"])::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); /* Dunkler Schleier nur bei Bild */
    z-index: 2;
}

.flex-full-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1200px;   /* HIER stellst du die gewünschte Breite ein */
    margin: 0 auto;      /* zentriert den Textblock */
    padding: 60px 20px;  /* statt 10% */
    transition: color 0.3s ease;
}


.core-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px; 
    margin-bottom: 40px; 
}

/* ------------------------------------------------ 4. CARDS SYSTEM ------------------------------------------------ */
.card {
    position: relative;
    padding: 50px 30px;
    text-align: center;
    color: white;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 250px;
    text-decoration: none;
}


/* ------------------------------------------------ NEU: V5 HYBRID DESIGN (Ersetzt die alte Grid-Logik) ------------------------------------------------ */

.v5-hybrid-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0; /* Sorgt dafür, dass die Cards bis zum Rand gehen */
    width: 100%;
/*    border-top: 1px solid #eee; */
}

.v5-hybrid-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
/*    border: none !important; /* Entfernt die Linie zwischen den Bildern */
    border-right: 1px solid #eee; 
    border-bottom: 1px solid #eee; 
    min-height: 480px; /* Einheitliche Höhe für alle 3 Karten */
}

/* ------------------------------------------------ Der Bild-Bereich (Header der Karte) ------------------------------------------------ */
.v5-hybrid-image-box {
    height: 200px;
    background-size: cover;
    background-position: center;
    width: 100%;
}

/* ------------------------------------------------ Der Text-Bereich (Immer sauber weiß) ------------------------------------------------ */
.v5-hybrid-body {
    padding: 10px 25px 25px 25px; /* Oben weniger Padding, da Icon nach oben rückt */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.v5-hybrid-main-icon {
    display: block !important;
    width: 70px !important;           /* Größe des Kreises */
    height: 70px !important;
    background: #ffffff !important;   /* Weißer Hintergrund */
    border-radius: 50% !important;    /* Rund machen */
    padding: 15px !important;         /* Abstand Symbol zum Rand */
    margin: -55px auto 10px auto !important; /* Zieht es 55px hoch ins Bild */
    position: relative !important;
    z-index: 10 !important;           /* Über den Bild-Filter legen */
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
    object-fit: contain !important;
}

/* ------------------------------------------------ Erzwungene Anzeige für die Portfolio-Icons ------------------------------------------------ */
.v5-hybrid-main-icon {
    display: block !important;
    width: 60px !important;  /* Gewünschte Breite des Icons */
    height: auto !important;
    margin: 0 auto 15px auto;
    opacity: 1 !important;
    visibility: visible !important;
}

.v5-hybrid-title {
    margin: 20px 0 10px 0;
    font-size: 1.2rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #333;
}

.v5-hybrid-description {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: auto; /* Schiebt die Buttons nach unten */
}

.v5-hybrid-actions {
    display: flex;
    gap: 12px;
    padding-top: 20px;
}

/* ------------------------------------------------ Die runden Buttons aus deiner Vorlage ------------------------------------------------ */
.v5-circle-btn {
    width: 38px;
    height: 38px;
    border: 1px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.v5-circle-btn:hover {
    background: #f0f0f0;
    border-color: #999;
}

.v5-circle-btn svg {
    width: 18px;
    height: 18px;
    fill: #444;
}

/* ------------------------------------------------ Responsive: Auf Tablets 2 Spalten, auf Handys 1 Spalte ------------------------------------------------ */
@media (max-width: 1024px) {
    .v5-hybrid-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .v5-hybrid-grid { grid-template-columns: 1fr; }
}

.card-bg { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background-size: cover; background-position: center; 
    z-index: 1; transition: transform 0.5s ease; 
}

.card:hover .card-bg { 
	transform: scale(1.1); 
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.1);
  z-index: 2;
}

.card.has-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 2;
}

.card-inner {
    position: relative;
    z-index: 3;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;   /* DAS zentriert Icon + Text */
    text-align: center;
}

.category-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
    gap: 20px; 
    padding-top: 40px; 
    border-top: 1px solid #eee; 
}

.category-grid .card {
    min-height: 120px;
    padding: 20px;
    border-radius: 4px;
}

.category-grid .card-inner span {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.card-icon {
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}


.card-icon img{
  width: 142px;
  height: 142px;
  object-fit: contain;
  display: block;
}


/* ------------------------------------------------ 5. UI ELEMENTS (BUTTONS) ------------------------------------------------ */
.btn {
    display: inline-block;
    padding: 15px 35px;
    background: #000;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    transition: all 0.3s ease;
    border: 2px solid #000;
    margin-top: 20px;
    cursor: pointer;
}

.btn:hover {
    background: transparent;
    color: #c0c0c0;
    transform: translateY(-3px);
}

.btn-white { 
    border: 2px solid white; color: white; background: transparent; 
    padding: 12px 28px; font-weight: bold; text-decoration: none; 
    display: inline-block; margin-top: 20px; transition: 0.3s; 
}

.btn-black { 
    border: 2px solid black; color: black; background: transparent; 
    padding: 12px 28px; font-weight: bold; text-decoration: none; 
    display: inline-block; margin-top: 20px; transition: 0.3s; 
}

.btn-white:hover { background: white; color: var(--primary); }
.btn-black:hover { background: white; color: #c0c0c0; border: 2px solid #c0c0c0;}
.btn-wa { background-color: #25D366; border: none; }

/* ------------------------------------------------ 6. CONTACT & FOOTER ------------------------------------------------ */
.contact-split { display: flex; width: 100%; min-height: 500px; }

.contact-img-box { 
    flex: 0 0 40%; 
    background: url('images/content/tinte15_seebauer.png') center/cover no-repeat; 
}

.contact-content-box { 
    flex: 0 0 60%; 
    padding: 80px; 
    background: var(--light-bg); 
    display: flex; flex-direction: column; 
    justify-content: center; align-items: flex-start; 
}

footer { 
    background: #f1f1f1; 
    padding: 60px 0 20px; 
    border-top: 1px solid #ddd; 
    color: var(--primary); 
}

.footer-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 40px; 
    margin-bottom: 40px; 
}

.footer-grid nav a { 
    display: block; 
    text-decoration: none; 
    color: var(--secondary); 
    margin-bottom: 5px; 
}

.footer-bottom { 
    border-top: 1px solid #ccc; 
    padding-top: 20px; 
    font-size: 0.8rem; 
    text-align: center; 
}

/* ------------------------------------------------ 7. RESPONSIVE ------------------------------------------------ */
@media (max-width: 768px) {
    .promo-banner-red { margin-top: 0; }
    
    .contact-split {
        flex-direction: column;
    }
    
    .contact-img-box, .contact-content-box {
        flex: 0 0 100%;
        min-height: 300px;
        padding: 40px 20px;
    }
    
    .flex-full { height: auto; padding: 40px 0; }
}

/* ------------------------------------------------ PORTFOLIO VOLLBILD ------------------------------------------------ */
/* PORTFOLIO VERSION 5 - KOMPLETTES STYLESHEET
   Struktur: 3 Spalten oben, 6 Spalten unten, Nahtlos (gap: 0)
*/

.portfolio-v5-container {
    width: 100%;
    overflow: hidden; /* Verhindert horizontales Scrollen durch Border */
}

/* ------------------------------------------------ Grids Setup ------------------------------------------------ */
.v5-core-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.v5-category-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
}

/* ------------------------------------------------ Basis-Karten Styling ------------------------------------------------ */
.v5-main-card, .v5-sub-card {
    position: relative;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    box-sizing: border-box; /* Wichtig: Border wird nach innen gerechnet */

    /* ------------------------------------------------ TRENNELEMENTE AUSWAHL ------------------------------------------------ */
    
    /* Variante A: Zarte durchgehende Linie (Solid) */
    border-right: 1px solid rgba(0, 0, 0, 0.2); /* bei dunklen Hintergrund: (255, 255, 255, 0.2) */
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);

    /* Variante B: Punktlinie (Dotted) - Zum Aktivieren oben auskommentieren und hier Slash-Stern entfernen */
    /* border-right: 1px dotted rgba(255, 255, 255, 0.5); */
    /* border-bottom: 1px dotted rgba(255, 255, 255, 0.5); */

    /* Variante C: Gestrichelte Linie (Dashed) */
    /* border-right: 1px dashed rgba(255, 255, 255, 0.3); */
    /* border-bottom: 1px dashed rgba(255, 255, 255, 0.3); */
}

/* ------------------------------------------------ Gesamte Card = Link ------------------------------------------------ */
.v5-main-card {
    display: flex;
    cursor: pointer;
    text-decoration: none; /* Entfernt Unterstreichung vom Text innerhalb der Karte */
}

/* Verhindert, dass der Text blau oder unterstrichen wird, weil es jetzt ein Link ist */
.v5-main-card:hover {
    text-decoration: none;
}

/* Höhen-Definitionen */
.v5-main-card { min-height: 320px; }
.v5-sub-card { min-height: 180px; }

/* Overlays */
.v5-overlay, .v5-sub-overlay {
    /* Hintergrund auf volltransparent setzen oder ganz entfernen */
    background: transparent; 
    
    /* WICHTIG: Wenn der Hintergrund weiß ist, muss der Text dunkel sein! */
    color: #333333; 
    
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 25px;
    text-align: center;
    transition: background 0.3s ease;
}

/* Anpassung der Hover-Effekte (optional) */
.v5-overlay:hover, .v5-sub-overlay:hover {
    background: rgba(0, 0, 0, 0.05); /* Nur ein ganz zartes Grau beim Drüberfahren */
}

/* Textfarben für hellen Hintergrund korrigieren */
.v5-title, .v5-sub-title, .v5-text, .v5-link-text {
    color: #333333; /* Dunkelgrau statt Weiß */
}

/* Icons & Typografie */
.v5-icon-large { width: 110px; height: auto; margin-bottom: 15px; }
.v5-icon-small { width: 70px; height: auto; margin-bottom: 10px; }

.v5-title { color: #333333; font-size: 1.3rem; font-weight: bold; margin: 0 0 8px 0; text-transform: uppercase; }
.v5-text { color: #666666; font-size: 0.9rem; margin-bottom: 20px; opacity: 0.9; }
.v5-sub-title { color: #333333; font-size: 0.95rem; font-weight: 600; }

/* Button & Footer Bereich */
.v5-footer, .v5-sub-footer {
    color: #333333;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.v5-link-text {
    color: #333333;
    text-decoration: underline;
    font-size: 0.85rem;
}

.v5-action-group {
    display: flex;
    gap: 6px;
}

/* Die weißen Quadrate für Icons/Emojis */
.v5-square-btn, .v5-mini-box {
    width: 30px;
    height: 30px;
    background: transparent; /* Hier wurde das Weiß entfernt */
    color: #333333;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 14px;
    border: none;            /* Stellt sicher, dass kein Rahmen sichtbar ist */
    box-shadow: none;        /* Entfernt eventuelle Schattenwürfe */
}

/* Container für die Aktions-Symbole in den kleinen Karten */
.v5-sub-action-row {
    display: flex;
    gap: 5px; /* Abstand zwischen den Symbolen */
    justify-content: center;
    margin-top: 20px;
    width: 100%;
}

/* Die Karten selbst sollen keinen Link-Cursor haben, nur die Buttons */
.v5-sub-card {
    cursor: default;
    display: block;
    text-decoration: none;
}

/* Die Buttons in den kleinen Karten */
.v5-sub-card .v5-square-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.v5-sub-card .v5-square-btn:hover {
    transform: scale(1.15);
}

.v5-square-btn:hover {
    opacity: 0.7; /* Das Symbol wird beim Drüberfahren leicht transparent */
    transform: scale(1.1); /* Das Symbol wird minimal größer */
    transition: all 0.2s ease-in-out;
}

/* Bilder innerhalb der Buttons */
.v5-btn-icon {
    width: 18px;
    height: auto;
}

/* Alle SVG-Icons in den quadratischen Buttons */
.v5-svg-icon {
    width: 60px;
    height: 60px;
    transition: transform 0.3s ease;
}

/* Die Farbe der Pfade (Normalzustand) */
.v5-icon-group path {
    fill: #333333; 
    transition: fill 0.3s ease;
}

/* Die Farbe beim Drüberfahren mit der Maus */
.v5-square-btn:hover .v5-icon-group path {
    fill: #c0c0c0; /* Hier kannst du deine Wunschfarbe einsetzen */
}

/* Kleiner Animationseffekt für den gesamten Button */
.v5-square-btn:hover .v5-svg-icon {
    transform: scale(1.1);
}

/* --- RESPONSIVE ANPASSUNGEN --- */

/* Für Tablets: Untere Reihe wird 3x2 Grid */
@media (max-width: 1024px) {
    .v5-category-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Für Smartphones: Alles untereinander */
@media (max-width: 650px) {
    .v5-core-grid, .v5-category-grid {
        grid-template-columns: 1fr;
    }
    
    .v5-main-card, .v5-sub-card {
        border-right: none; /* Auf Handy nur Linien nach unten */
    }
}

/* Container & Grid Setup */
.v5-hybrid-container {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
}

.v5-hybrid-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Spalten nebeneinander */
    gap: 0; /* Rand-zu-Rand Abschluss */
    width: 100%;
}

/* Die einzelne Karte */
.v5-hybrid-card {
    position: relative;
    min-height: 450px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    border: 0.5px solid #eee; /* Feine Trennlinie */
}

/* Der weiße Schleier (Overlay) für Lesbarkeit */
.v5-hybrid-overlay {
    background: rgba(255, 255, 255, 0.88); /* Beruhigt das Bild */
    padding: 40px 25px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.4s ease;
}

/* Hover-Effekt: Bild wird sichtbarer */
.v5-hybrid-card:hover .v5-hybrid-overlay {
    background: rgba(255, 255, 255, 0.75);
}

/* Icon & Schrift */
.v5-hybrid-icon {
    width: 70px;
    margin-bottom: 25px;
}

.v5-hybrid-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.v5-hybrid-text {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
    max-width: 280px;
    margin-bottom: auto; /* Schiebt Footer nach unten */
}

/* Footer & SVG-Buttons */
.v5-hybrid-footer {
    display: flex;
    gap: 15px;
    padding-top: 25px;
}

.v5-hybrid-btn {
    width: 40px;
    height: 40px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: all 0.2s;
}

.v5-hybrid-btn svg {
    fill: #555;
    width: 100%;
    height: 100%;
}

.v5-hybrid-btn:hover {
    background: #f5f5f5;
    border-color: #999;
}

/* Responsive: Auf Handys untereinander */
@media (max-width: 900px) {
    .v5-hybrid-grid { grid-template-columns: 1fr; }
    .v5-hybrid-card { min-height: 400px; }
}


/* --- NEUE 6er Portfolio ----------------------------------------------------------------------------------------------------- */

/* --- NEU: V5 SECONDARY GRID (Die 6 kleinen Kacheln) --- */

.v5-secondary-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 Spalten nebeneinander */
    width: 100%;
    gap: 0;
    border-bottom: 1px solid #eee;
}

.v5-secondary-card {
    background: #ffffff;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 30px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: background 0.3s ease;
    min-height: 220px;
}

.v5-secondary-card:hover {
    background: #fcfcfc;
}

.v5-secondary-icon {
    width: 45px; /* Etwas kleiner als oben */
    height: auto;
    margin-bottom: 15px;
    opacity: 0.85;
}

.v5-secondary-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #444;
    margin-bottom: auto; /* Drückt die Buttons nach unten */
    letter-spacing: 0.5px;
}

/* Responsive Anpassungen für die 6er Reihe */
@media (max-width: 1200px) {
    .v5-secondary-grid { grid-template-columns: repeat(3, 1fr); } /* 3x2 Layout */
}

@media (max-width: 768px) {
    .v5-secondary-grid { grid-template-columns: repeat(2, 1fr); } /* 2x3 Layout */
}

@media (max-width: 480px) {
    .v5-secondary-grid { grid-template-columns: 1fr; } /* Alles untereinander */
}

.v5-secondary-grid {
    display: grid !important; /* Erzwingt das Grid-Layout */
    grid-template-columns: repeat(6, 1fr) !important;
    width: 100%;
    gap: 0;
    border-bottom: 1px solid #eee;
}

.v5-secondary-card {
    background: #ffffff;
    border-right: 1px solid #eee;
    padding: 30px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 200px;
}

/* --- zusätzliche 3er Portfolio --- */
/* Spezifisches Design für die zusätzliche 3er-Reihe */
.v5-triple-row {
    margin-top: 40px; /* Erzeugt einen sauberen Abstand zur oberen Reihe */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 20px 0;
}

/* Sicherstellen, dass die Karten in der neuen Reihe identisch aussehen */
.v5-triple-row .v5-hybrid-card {
    background: #ffffff;
    border-radius: 4px; /* Optional für ganz leichte Abrundung wie im Bild */
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Dezenter Schatten für Tiefe */
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.v5-triple-row .v5-hybrid-card:hover {
    transform: translateY(-5px); /* Kleiner Interaktions-Effekt */
}

/* Das Header-Bild in der Karte */
.v5-triple-row .v5-card-image {
    height: 180px; /* Feste Höhe für den Bild-Bereich */
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Der weiße Icon-Kreis, der das Bild überlappt */
.v5-triple-row .v5-card-icon {
    position: absolute;
    bottom: -25px; /* Schiebt das Icon zur Hälfte über den Rand */
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 2;
}

.v5-triple-row .v5-card-icon img {
    width: 25px;
    height: auto;
}

/* Textbereich unter dem Bild */
.v5-triple-row .v5-card-content {
    padding: 40px 20px 20px 20px; /* Oben mehr Platz wegen des Icons */
    text-align: center;
    flex-grow: 1;
}

/* Die runden Aktions-Buttons am Boden */
.v5-triple-row .v5-hybrid-actions {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.v5-triple-row .v5-circle-btn {
    width: 35px;
    height: 35px;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.v5-triple-row .v5-circle-btn:hover {
    background-color: #f8f8f8;
    border-color: #cccccc;
}

.v5-triple-row .v5-circle-btn svg {
    width: 18px;
    height: 18px;
    fill: #333333;
}

/* --- neuer Versuch für neues 6er Grid --- */

/* Diese Regeln gelten für ALLE 3er-Grids in Version 5 */
.v5-main-grid, 
.v5-triple-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px; /* Abstand nach unten */
}

/* Die Karten-Logik für alle 3er-Bereiche */
.v5-main-grid .v5-hybrid-card,
.v5-triple-row .v5-hybrid-card {
    background: #ffffff;
    border: 1px solid #eeeeee;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Das Bild oben (Header) */
.v5-main-grid .v5-card-image,
.v5-triple-row .v5-card-image {
    height: 180px;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Der weiße Icon-Kreis (Überlappung) */
.v5-main-grid .v5-card-icon,
.v5-triple-row .v5-card-icon {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 10;
}

.v5-main-grid .v5-card-icon img,
.v5-triple-row .v5-card-icon img {
    width: 26px;
    height: auto;
}

/* Text-Bereich */
.v5-main-grid .v5-card-content,
.v5-triple-row .v5-card-content {
    padding: 45px 20px 20px 20px;
    text-align: center;
}

/* --- WEISSFILTER --- */

/* 1. DER GRID-CONTAINER UND ABSTAND */
.v5-hybrid-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px; /* Standard-Abstand zwischen den Blöcken */
}

/* 2. DIE KARTE */
.v5-hybrid-card {
    background: #ffffff;
    border: 1px solid #eeeeee;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.v5-hybrid-card:hover {
    transform: translateY(-5px); /* Kleiner Heb-Effekt beim Hover */
}

/* 3. BILD-BOX MIT WEISS-FILTER */
.v5-hybrid-image-box {
    height: 180px;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Der weiße Filter (Overlay) */
.v5-hybrid-image-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6); /* 60% Weiß-Filter */
    transition: background-color 0.4s ease;
    z-index: 1;
}

/* Mouseover: Filter wird transparent */
.v5-hybrid-card:hover .v5-hybrid-image-box::after {
    background-color: rgba(255, 255, 255, 0);
}

/* 4. INHALTS-BEREICH */
.v5-hybrid-body {
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
}

.v5-hybrid-main-icon {
    width: 40px;
    height: auto;
    margin-bottom: 15px;
}

.v5-hybrid-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.v5-hybrid-description {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.4;
    margin-bottom: 20px;
}

/* 5. AKTION-BUTTONS (SVG) */
.v5-hybrid-actions {
    margin-top: auto;
    display: flex;
    gap: 15px;
    justify-content: center;
}

.v5-square-btn {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.v5-square-btn:hover {
    opacity: 0.7;
}

.v5-svg-icon {
    width: 30px;
    height: 30px;
    fill: #333; /* Farbe der Icons */
}

/* ------------------------------------------------ REZENSIONEN ------------------------------------------------ */
/* --- V5 REVIEWS BASE (Gemeinsame Struktur) --- */
.v5-reviews-section {
    padding: 100px 0;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* --- LIGHT MODE DEFINITION --- */
.v5-reviews-section.v5-light-mode {
    --rev-bg: #f9f9f9;
    --rev-card-bg: #ffffff;
    --rev-text: #222222;
    --rev-sub: #555555;
    --rev-quote: rgba(172, 160, 147, 0.1);
    --rev-border: rgba(0,0,0,0.05);
    background-color: var(--rev-bg);
    color: var(--rev-text);
}

/* --- DARK MODE DEFINITION --- */
.v5-reviews-section.v5-dark-mode {
    --rev-bg: #1a1a1a;
    --rev-card-bg: #252525;
    --rev-text: #ffffff;
    --rev-sub: #888888;
    --rev-quote: rgba(172, 160, 147, 0.15);
    --rev-border: rgba(255,255,255,0.05);
    background-color: var(--rev-bg);
    color: var(--rev-text);
}

/* --- STYLING UNTER VERWENDUNG DER VARIABLEN --- */
.v5-reviews-section .v5-subtitle {
    color: #aca093; /* Dein Sand-Ton bleibt als Akzent immer gleich */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 3px;
    display: block;
    margin-bottom: 10px;
    text-align: center;
}

.v5-reviews-section .v5-title {
    text-align: center;
    margin-bottom: 60px;
    font-size: 2.5rem;
}

.v5-review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.v5-review-card {
    background: var(--rev-card-bg);
    padding: 50px 40px 40px 40px;
    border-radius: 4px;
    position: relative;
    border: 1px solid var(--rev-border);
    transition: all 0.4s ease;
}

.v5-quote-icon {
    position: absolute;
    top: 10px;
    left: 20px;
    font-size: 5rem;
    font-family: serif;
    color: var(--rev-quote);
    line-height: 1;
}

.v5-review-card p {
    color: var(--rev-text);
    opacity: 0.9;
    line-height: 1.7;
    font-style: italic;
    margin-bottom: 30px;
    font-weight: 300;
}

.v5-stars {
    color: #aca093;
    margin-bottom: 20px;
    font-size: 1rem;
}

.v5-reviewer strong {
    display: block;
    color: var(--rev-text);
    font-size: 1.4rem; /* Größerer Name */
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1px;
    line-height: 1.2;
    margin-bottom: 4px;
}

.v5-reviewer span {
    color: var(--rev-sub);
    font-size: 0.9rem;
    font-weight: 400;
}

/* Featured Card (bleibt immer markiert) */
.v5-review-card.featured {
    border: 1px solid #aca093;
    transform: translateY(-10px);
}



/* --- V5 REVIEWS SLIDER OPTIMIERUNG (KOMPLETT-ERSATZ) --- */

.v5-review-slider-wrapper {
    position: relative;
    padding: 20px 0;
}

.v5-review-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 30px;
    padding: 40px 10px;
    align-items: stretch; /* Macht alle Karten gleich hoch */
    scrollbar-width: none; 
    -ms-overflow-style: none;
}

.v5-review-slider::-webkit-scrollbar { display: none; }

.v5-review-slider .v5-review-card {
    flex: 0 0 380px; /* Feste Breite für Konsistenz */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    scroll-snap-align: center;
    background: var(--rev-card-bg);
    min-height: 350px; /* Einheitliche Mindesthöhe */
    box-sizing: border-box;
}

/* Text-Korrektur: Verhindert, dass zu langer Text die Karte sprengt */
.v5-review-card p {
    flex-grow: 1;
    margin-bottom: 20px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 6; /* Max. 6 Zeilen, danach folgt "..." */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* -------------------------------------- Container für die Karten -------------------------------------------- */
/* --- V5 REVIEWS SLIDER FINAL (KOMPLETT-ERSATZ) --- */

/* 1. Der Haupt-Container */
.v5-review-slider-wrapper {
    position: relative;
    padding: 0 10px;
}

.v5-review-slider {
    display: flex;
    overflow-x: hidden; 
    gap: 20px;
    padding: 40px 0;
    align-items: stretch;
    scroll-behavior: smooth;
    scroll-snap-type: none !important; /* Verhindert das Hängenbleiben an einer Karte */
}

/* 2. Die Karten (Exakt 3 pro Ansicht auf Desktop) */
.v5-review-slider .v5-review-card {
    flex: 0 0 calc((100% - 40px) / 3); 
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--rev-card-bg);
    border: 1px solid var(--rev-border);
    padding: 40px;
    box-sizing: border-box;
    transition: transform 0.3s ease;
}

/* 3. Die Navigations-Pfeile */
.v5-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: var(--rev-card-bg);
    border: 1px solid var(--rev-border);
    color: #aca093;
    font-size: 1.2rem;
    border-radius: 50%;
    cursor: pointer;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.v5-slider-btn:hover {
    background: #aca093;
    color: #fff;
    border-color: #aca093;
}

.v5-slider-btn.prev { left: -25px; }
.v5-slider-btn.next { right: -25px; }

/* 4. Mobile Anpassung (Hier schalten wir auf Wischen um) */
@media (max-width: 1024px) {
    .v5-review-slider {
        overflow-x: auto;
        scroll-snap-type: x mandatory !important;
        padding: 20px 0;
    }
    .v5-review-slider .v5-review-card {
        flex: 0 0 85%;
        scroll-snap-align: center;
    }
    .v5-slider-btn { display: none; }
}

/* --- FACTENCOUNTER - V5 STATS SECTION --- */
.v5-stats-section {
    background-color: #111; /* Dunkler Kontrast zum weißen Content */
    padding: 100px 0;
    color: #ffffff;
}

.v5-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    text-align: center;
}

.v5-stat-item {
    padding: 20px;
}

.v5-stat-number {
    display: inline-block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 4rem;
    line-height: 1;
    color: var(--accent); /* Deine Akzentfarbe */
    margin-bottom: 10px;
}

.v5-stat-unit {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.5rem;
    color: var(--accent);
}

.v5-stat-label {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
    color: #eee;
}

.v5-stat-text {
    font-size: 0.9rem;
    color: #888;
    line-height: 1.4;
    font-weight: 300;
}

/* Mobile Anpassung */
@media (max-width: 768px) {
    .v5-stats-section { padding: 60px 0; }
    .v5-stat-number { font-size: 3rem; }
}


/* --- PREMIUM CONTACT CARDS V5 ------------------------------------------------------------------------------------ */

/* --- PREMIUM BUTTON STYLES FÜR KONTAKT --- 
.v5-contact-btn-premium {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px 25px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    color: #ffffff;
}

.v5-contact-btn-premium:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent);
    transform: translateX(10px);
}

.v5-btn-icon {
    font-size: 1.5rem;
    margin-right: 20px;
}

.v5-btn-text {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
}

.v5-btn-text strong {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
    color: var(--accent);
    letter-spacing: 1px;
}

/* WhatsApp Spezial-Farbe */
.v5-wa-accent:hover {
    border-color: #25D366;
}
.v5-wa-accent:hover .v5-btn-text strong {
    color: #25D366;
}

/* Mobile Optimierung */
@media (max-width: 992px) {
    .v5-contact-grid {
        grid-template-columns: 1fr !important;
        text-align: center;
    }
}

/* ================================================================
   MOBILE FEINSCHLIFF CONTENT
================================================================ */
@media (max-width: 768px) {
    .flex-full {
        min-height: auto;
        padding: 26px 0 18px;
    }

    .flex-full-content {
        padding: 24px 18px 16px;
    }

    .flex-full-content h2 {
        font-size: clamp(2.1rem, 10vw, 3.4rem) !important;
        line-height: 0.92;
        margin-bottom: 12px !important;
    }

    .flex-full-content p {
        font-size: 1rem !important;
        line-height: 1.35;
    }

    .v5-hybrid-grid {
        grid-template-columns: 1fr !important;
        gap: 0;
        margin-bottom: 0 !important;
    }

    .v5-hybrid-card {
        min-height: 0;
        border-left: none;
        border-right: none;
    }

    .v5-hybrid-image-box {
        height: 220px;
    }

    .v5-hybrid-body {
        padding: 16px 18px 22px 18px;
    }

    .v5-hybrid-title {
        margin-top: 8px;
        font-size: 1.15rem;
    }

    .v5-hybrid-description {
        line-height: 1.5;
    }
}

/* BAUSTELLE TEXTILIEN */
.under-construction-hero {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--nav-height) 20px 80px;
    color: white;
}

.under-construction-hero h1 {
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: 0.9;
    margin-bottom: 20px;
}