/****************************************************************************
------------------- LOGO DEFINITION ------------------------ 
****************************************************************************/

.logo-headline-wrapper {
    display: flex;
    align-items: baseline; 
    gap: 15px; 
    margin-bottom: 60px; 
}

.logo-headline {
    font-size: 30px;
	font-weight: 300;
    line-height: 1.0;
    color: var(--infinite_gray_dark);
    margin: 0;	
    letter-spacing: 0.3em; 
}

.logo-headline-bold {
    font-size: 30px;
    line-height: 1.0;
    color: var(--infinite_gray_dark);
	font-weight: 800;
    margin: 0;
}

.logo-description {
    font-size: 18px;
    line-height: 1.3;
	color: var(--infinite_gray_dark);
	font-style: italic;
	margin-top: 40px;
}

.logo-definition-container {
    width: 100%;
    background: #fdfdfd;
    padding: 40px;
    border: 1px solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: crosshair;
    transition: background 0.3s ease;
}

.logo-definition-container:hover {
    background: #f4f7f9; /* Ganz leichter Blaustich beim Hover */
}

.logo-blueprint-svg {
    width: 100%;
    height: auto;
    max-width: 900px;
}

/* 1. INITIALZUSTAND: Nur das Technische ausblenden, den Claim fix anzeigen */

/* Wir blenden Texte und Gruppen aus, es sei denn, sie haben unsere Fix-Klasse */
.logo-blueprint-svg line, 
.logo-blueprint-svg text:not(.logo-claim-fix), 
.logo-blueprint-svg g:not(.logo-claim-fix),
.logo-blueprint-svg path[stroke="#6D8BA7"],
.logo-blueprint-svg polygon[fill="#6D8BA7"],
.logo-blueprint-svg g path[fill="#6D8BA7"] {
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* 2. HOVER-ZUSTAND: Die Technik wird sichtbar */
.logo-definition-container:hover line,
.logo-definition-container:hover text:not(.logo-claim-fix),
.logo-definition-container:hover g:not(.logo-claim-fix),
.logo-definition-container:hover path[stroke="#6D8BA7"],
.logo-definition-container:hover polygon[fill="#6D8BA7"],
.logo-definition-container:hover g path[fill="#6D8BA7"] {
    opacity: 1;
}

/* 3. LOGO-ANPASSUNG: Das Rot wird beim Hover dezent */
.logo-blueprint-svg polygon[fill="#E6332A"] {
    transition: opacity 0.4s ease;
}

.logo-definition-container:hover polygon[fill="#E6332A"] {
    opacity: 0.1; /* Sehr blass, damit die blauen Linien dominieren */
}


/****************************************************************************
-------------------------- LOGO VARIATIONS ---------------------------------
****************************************************************************/

/* Basis Container */
.logo-variation-container {
    width: 100%;
    min-height: 300px;
    padding: 60px;
    border: 1px solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    background-size: cover;
    background-position: center;
}

.logo-variation-logo {
    width: 100%;
    max-width: 600px;
    height: auto;
}

.logo-description strong {
    font-weight: 700;
}

/* VARIATION 1: LIGHT BG | 4C LOGO */
.logo-variation-1-container {
    background-color: #ffffff;
}
.logo-variation-1-logo {
    /* Standard 4C Logo - keine Filter nötig */
}

/* VARIATION 2: DARK BG | 4C LOGO */
.logo-variation-2-container {
    background-color: var(--infinite_gray_dark);
}
.logo-variation-2-logo {
    /* Standard 4C Logo */
}

/* VARIATION 3: HIGH CONTRAST BG | 1C LOGO (White) */
.logo-variation-3-container {
    background-image: url('../graphics/infinite-brand-identity-guide-logo-variation-3.webp');
}
.logo-variation-3-logo {
    /* Macht das Logo komplett weiß */
    filter: brightness(0) invert(1);
}

/* VARIATION 4: LOW CONTRAST BG | 4C LOGO BOXED*/
.logo-variation-4-container {
    background-image: url('../graphics/infinite-brand-identity-guide-logo-variation-4.webp');
}
.logo-variation-4-logo {
    /* Standard 4C Logo - keine Filter nötig */
}

/* Sonderfall Variante 4: Die mitwachsende weiße Box */
.logo-variation-container-box {
    background-color: #ffffff;
    padding: 40px; 
    display: inline-flex; 
    justify-content: center;
    align-items: center;
    width: auto; 
    max-width: 100%; 
}

/* Sicherstellen, dass das Logo darin seine Proportionen behält */
.logo-variation-container-box .logo-variation-logo {
    width: 600px;
    max-width: 100%; 
    height: auto;
    display: block;
}

/* VARIATION 5: BLACK & WHITE | 1C LOGO (Black) */
.logo-variation-5-container {
    background-color: #ffffff;
}
.logo-variation-5-logo {
    /* Macht das Logo komplett schwarz */
    filter: brightness(0);
}


/****************************************************************************
-------------------------- LOGO ERRORS ---------------------------------
****************************************************************************/

.logo-avoidance-container {
    width: 100%;
    min-height: 300px;
    padding: 60px;
    border: 1px solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff; /* Standard weiß */
    transition: all 0.3s ease;
    cursor: help; /* Zeigt an, dass man hier interagieren kann */
}

.logo-avoidance-logo {
    width: 100%;
    max-width: 600px;
    height: auto;
    /* Geschmeidiger Übergang für alle Hover-Effekte */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 1: WRONG COLOR */
.logo-avoidance-1-logo {
    filter: invert(80%) sepia(100%) saturate(5000%) hue-rotate(10deg);
}
.logo-avoidance-1-container:hover .logo-avoidance-1-logo {
    filter: none; /* Zurück zu den Brand-Colors */
}

/* 2: X-AXIS DISTORTION (+15%) */
.logo-avoidance-2-logo {
    transform: scaleX(1.15);
}
.logo-avoidance-2-container:hover .logo-avoidance-2-logo {
    transform: scaleX(1); /* Zurück zur richtigen Proportion */
}

/* 3: Y-AXIS DISTORTION (+15%) */
.logo-avoidance-3-logo {
    transform: scaleY(1.15);
}
.logo-avoidance-3-container:hover .logo-avoidance-3-logo {
    transform: scaleY(1); /* Zurück zur richtigen Proportion */
}

/* 4: ROTATION (-7 Grad) */
.logo-avoidance-4-logo {
    transform: rotate(-7deg);
}
.logo-avoidance-4-container:hover .logo-avoidance-4-logo {
    transform: rotate(0deg); /* Zurück in die Horizontale */
}

/* 5: SHEARING (Verzerren) */
.logo-avoidance-5-logo {
    transform: skew(15deg, 10deg);
}
.logo-avoidance-5-container:hover .logo-avoidance-5-logo {
    transform: skew(0deg, 0deg);
}

/* 6: PLACEMENT (Dark Gray BG / Black Logo) */
.logo-avoidance-6-container {
    background-color: var(--infinite_gray_dark);
}
.logo-avoidance-6-logo {
    filter: brightness(0); /* Macht das Logo komplett schwarz */
}
.logo-avoidance-6-container:hover .logo-avoidance-6-logo {
    filter: brightness(0) invert(1); /* Korrektur zu Clear White auf Dunkel */
}