/* --- 1. DESIGN VARIABLEN --- */
:root {
    --primary: #0f3460;      /* Dunkles Navy Blau */
    --accent: #e94560;       /* Energetisches Rot/Pink */
    --accent-hover: #d1344f;
    --text-main: #333333;
    --text-light: #666666;
    --bg-light: #f4f6f8;
    --white: #ffffff;
    --shadow: 0 10px 30px rgba(0,0,0,0.08);
    --radius: 12px;
    --header-height: 80px;   /* Konsistente Header Höhe */
}

/* --- 2. GRUNDLAGEN --- */
* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    background-color: var(--bg-light);
    color: var(--text-main);
    line-height: 1.7;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* WICHTIG: Platz für den fixierten Header schaffen */
    padding-top: var(--header-height);
}

h1, h2, h3, h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--primary);
    margin-top: 0;
}

a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
img { width: 100%; height: auto; display: block; }
html { scroll-padding-top: 120px; scroll-behavior: smooth; }

/* Container Utility */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

main { flex: 1; } 

/* --- 3. HEADER & NAVIGATION --- */
header {
    /* Glassmorphismus Effekt */
    background-color: rgba(255, 255, 255, 0.9); /* Etwas weniger transparent für bessere Lesbarkeit */
    backdrop-filter: blur(12px); /* Milchglas-Effekt */
    -webkit-backdrop-filter: blur(12px);
    
    box-shadow: 0 2px 15px rgba(0,0,0,0.05);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: var(--header-height); 
    display: flex;
    align-items: center;
}

.header-inner {
    display: flex;
    justify-content: space-between; /* Logo links, Menü rechts */
    align-items: center;
    width: 100%;
    height: 100%;
}

/* --------------------------------------------------
   NEUES LOGO DESIGN - "BADGE STYLE" MIT REFLEXION
   --------------------------------------------------
*/
.logo {
    position: absolute;
    top: 0;
    left: 20px; 
    z-index: 1001; 
    
    background-color: var(--white);
    
    /* Formgebung: Stärker abgerundet */
    border-radius: 0 0 25px 25px; 
    
    /* padding leicht angepasst da border weg ist */
    padding: 20px;
    
    /* Schatten mit leichter Tönung in Primärfarbe für mehr Tiefe */
    box-shadow: 0 15px 35px rgba(15, 52, 96, 0.15);
    
    /* Wichtig für den Glanz-Effekt */
    overflow: hidden; 
    transform-origin: top center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy Transition */
}

/* Logo Bild Größe */
.logo img { 
    height: 110px; /* Leicht angepasst */
    width: auto; 
    display: block;
    transition: transform 0.5s ease;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.1)); /* Schatten direkt am Bild */
}

/* HOVER EFFEKTE */
.logo:hover {
    /* Logo wird minimal länger/größer */
    padding-bottom: 30px; 
    transform: translateY(5px) scale(1.02);
    box-shadow: 0 20px 40px rgba(15, 52, 96, 0.25); /* bläulicher Schein */
}

.logo:hover img {
    transform: scale(1.05); /* Bild zoomt leicht */
}

/* SHEEN (Lichtreflex) Animation */
.logo::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%; /* Startet links außerhalb */
    width: 100%;
    height: 100%;
    
    /* Der Lichtbalken */
    background: linear-gradient(
        to right, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,0.8) 50%, 
        rgba(255,255,255,0) 100%
    );
    
    transform: skewX(-25deg); /* Schrägstellung */
    pointer-events: none;
    transition: none; /* Kein Transition beim Zurücksetzen */
}

.logo:hover::after {
    left: 150%; /* Wandert nach rechts raus */
    transition: left 0.7s ease-in-out; /* Geschwindigkeit des "Wusch" */
}


/* Menü: Standard Desktop Ansicht */
.nav-menu { 
    display: flex; 
    gap: 30px; 
    margin-left: auto;
    padding-right: 20px;
}

.nav-menu a {
    font-weight: 600;
    font-size: 15px;
    color: var(--primary);
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px 0;
    overflow: visible; /* Wichtig, damit das Flugzeug über den Rand fliegen kann */
}

/* --- DESKTOP ANIMATION: FLUGZEUG & KONDENSSTREIFEN --- */

/* 1. Die Linie (Kondensstreifen) */
.nav-menu a::before {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    /* Verlauf: Links transparent, rechts (am Flieger) volle Farbe */
    background: linear-gradient(to right, transparent 0%, var(--accent) 50%, var(--accent) 100%);
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0; 
}

/* 2. Das Flugzeug (fliegt an der Spitze) */
.nav-menu a::after {
    content: '';
    position: absolute;
    /* Vertikal justiert: Icon ist größer, muss tiefer hängen */
    bottom: -6px; 
    left: 0;
    
    /* Größe (55px Breite) */
    width: 55px; 
    height: 27px;
    
    /* Segelflieger Icon via Maske */
    background-color: var(--accent);
    
    /* SVG direkt eingebettet - ORIGINAL (Detailliert) */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='1280pt' height='640pt' viewBox='0 0 1280.000000 640.000000' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0.000000,640.000000) scale(0.100000,-0.100000)' fill='%23000000' stroke='none'%3E%3Cpath d='M12524 6346 c-17 -13 -19 -29 -21 -188 -2 -269 -31 -361 -131 -425 -31 -20 -1120 -702 -2419 -1514 -2178 -1362 -2366 -1477 -2415 -1483 -190 -24 -465 -109 -1009 -315 -496 -187 -1051 -345 -2093 -596 -264 -63 -496 -115 -516 -115 -57 0 -99 35 -160 135 -30 50 -184 315 -341 590 -243 425 -284 502 -272 512 8 6 197 107 419 224 222 117 404 217 404 221 0 4 -39 8 -86 8 l-87 0 -396 -171 c-467 -202 -805 -347 -1158 -500 -142 -61 -295 -127 -340 -147 -46 -19 -83 -39 -83 -43 0 -4 33 -10 73 -14 72 -7 73 -6 349 88 l277 95 15 -52 c148 -517 339 -1179 347 -1204 l11 -33 177 6 c97 4 304 22 461 41 157 19 515 61 795 94 281 34 538 64 573 69 34 4 59 4 55 1 -4 -4 -75 -30 -158 -58 -82 -27 -269 -91 -415 -142 -146 -51 -276 -96 -290 -100 -14 -4 -144 -49 -290 -100 -146 -50 -393 -136 -550 -190 -157 -54 -404 -140 -550 -190 -146 -51 -276 -96 -290 -100 -14 -4 -144 -49 -290 -100 -146 -50 -393 -136 -550 -190 -615 -212 -808 -279 -879 -304 l-74 -26 -45 26 c-83 49 -157 105 -286 217 -134 117 -218 177 -248 177 -21 0 -38 -29 -38 -68 0 -87 170 -293 297 -360 140 -74 319 -92 454 -48 41 14 144 47 229 75 231 74 994 319 1328 427 160 52 424 136 585 188 160 52 490 158 732 236 242 78 508 163 590 190 143 46 272 88 618 199 83 27 223 72 310 100 86 28 228 74 315 102 86 28 218 70 292 94 128 42 146 45 340 60 140 11 451 19 985 25 1064 12 1150 17 1485 82 391 75 735 223 824 355 86 125 -44 245 -389 361 -196 65 -622 162 -714 162 -62 0 -124 -45 854 612 259 173 1163 780 2010 1348 847 568 1555 1047 1573 1064 100 93 105 228 16 415 -40 82 -137 191 -170 191 -11 0 -29 -6 -40 -14z'/%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='1280pt' height='640pt' viewBox='0 0 1280.000000 640.000000' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0.000000,640.000000) scale(0.100000,-0.100000)' fill='%23000000' stroke='none'%3E%3Cpath d='M12524 6346 c-17 -13 -19 -29 -21 -188 -2 -269 -31 -361 -131 -425 -31 -20 -1120 -702 -2419 -1514 -2178 -1362 -2366 -1477 -2415 -1483 -190 -24 -465 -109 -1009 -315 -496 -187 -1051 -345 -2093 -596 -264 -63 -496 -115 -516 -115 -57 0 -99 35 -160 135 -30 50 -184 315 -341 590 -243 425 -284 502 -272 512 8 6 197 107 419 224 222 117 404 217 404 221 0 4 -39 8 -86 8 l-87 0 -396 -171 c-467 -202 -805 -347 -1158 -500 -142 -61 -295 -127 -340 -147 -46 -19 -83 -39 -83 -43 0 -4 33 -10 73 -14 72 -7 73 -6 349 88 l277 95 15 -52 c148 -517 339 -1179 347 -1204 l11 -33 177 6 c97 4 304 22 461 41 157 19 515 61 795 94 281 34 538 64 573 69 34 4 59 4 55 1 -4 -4 -75 -30 -158 -58 -82 -27 -269 -91 -415 -142 -146 -51 -276 -96 -290 -100 -14 -4 -144 -49 -290 -100 -146 -50 -393 -136 -550 -190 -157 -54 -404 -140 -550 -190 -146 -51 -276 -96 -290 -100 -14 -4 -144 -49 -290 -100 -146 -50 -393 -136 -550 -190 -615 -212 -808 -279 -879 -304 l-74 -26 -45 26 c-83 49 -157 105 -286 217 -134 117 -218 177 -248 177 -21 0 -38 -29 -38 -68 0 -87 170 -293 297 -360 140 -74 319 -92 454 -48 41 14 144 47 229 75 231 74 994 319 1328 427 160 52 424 136 585 188 160 52 490 158 732 236 242 78 508 163 590 190 143 46 272 88 618 199 83 27 223 72 310 100 86 28 228 74 315 102 86 28 218 70 292 94 128 42 146 45 340 60 140 11 451 19 985 25 1064 12 1150 17 1485 82 391 75 735 223 824 355 86 125 -44 245 -389 361 -196 65 -622 162 -714 162 -62 0 -124 -45 854 612 259 173 1163 780 2010 1348 847 568 1555 1047 1573 1064 100 93 105 228 16 415 -40 82 -137 191 -170 191 -11 0 -29 -6 -40 -14z'/%3E%3C/g%3E%3C/svg%3E");
    
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;

    opacity: 0;
    /* Keine Rotation mehr, da das SVG schon passt */
    transform: none; 
    transition: left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.2s;
    pointer-events: none;
}

/* Hover & Active States Animation */
.nav-menu a:hover::before, .nav-menu a.active::before { 
    /* Strich geht bis kurz vor den Flieger */
    width: calc(100% - 15px); 
    opacity: 1;
}

.nav-menu a:hover::after, .nav-menu a.active::after {
    /* Flieger fliegt so weit, dass der Flügel am Textende ist */
    left: calc(100% - 30px); 
    opacity: 1;
    transition: left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s;
}

/* Verhindert, dass der rote Unterstrich/Flieger bei den Social Icons erscheint */
.nav-menu .header-social-link::after,
.nav-menu .header-social-link::before {
    display: none !important;
}


/* HAMBURGER ICON (MIT NEUER ANIMATION) */
.hamburger {
    display: none;
    cursor: pointer;
    width: 30px;
    height: 20px;
    position: relative;
    z-index: 1002;
    margin-right: 10px;
}

.hamburger span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: var(--primary);
    border-radius: 3px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: all 0.3s ease-in-out; /* Standard Transition */
}

.hamburger span:nth-child(1) { top: 0px; }
.hamburger span:nth-child(2) { top: 9px; } /* Mittlere Linie - Der Flieger */
.hamburger span:nth-child(3) { top: 18px; }

/* Flugzeug am mittleren Strich (Mobile Hamburger Animation) */
.hamburger span:nth-child(2)::after {
    content: '';
    position: absolute;
    /* Positionierung am linken Ende des Strichs */
    left: -60px;
    top: -19px;
    
    width: 60px;
    height: 30px;
    background-color: var(--accent);
    
    /* Gleiches SVG wie im Desktop-Menü */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='1280pt' height='640pt' viewBox='0 0 1280.000000 640.000000' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0.000000,640.000000) scale(0.100000,-0.100000)' fill='%23000000' stroke='none'%3E%3Cpath d='M12524 6346 c-17 -13 -19 -29 -21 -188 -2 -269 -31 -361 -131 -425 -31 -20 -1120 -702 -2419 -1514 -2178 -1362 -2366 -1477 -2415 -1483 -190 -24 -465 -109 -1009 -315 -496 -187 -1051 -345 -2093 -596 -264 -63 -496 -115 -516 -115 -57 0 -99 35 -160 135 -30 50 -184 315 -341 590 -243 425 -284 502 -272 512 8 6 197 107 419 224 222 117 404 217 404 221 0 4 -39 8 -86 8 l-87 0 -396 -171 c-467 -202 -805 -347 -1158 -500 -142 -61 -295 -127 -340 -147 -46 -19 -83 -39 -83 -43 0 -4 33 -10 73 -14 72 -7 73 -6 349 88 l277 95 15 -52 c148 -517 339 -1179 347 -1204 l11 -33 177 6 c97 4 304 22 461 41 157 19 515 61 795 94 281 34 538 64 573 69 34 4 59 4 55 1 -4 -4 -75 -30 -158 -58 -82 -27 -269 -91 -415 -142 -146 -51 -276 -96 -290 -100 -14 -4 -144 -49 -290 -100 -146 -50 -393 -136 -550 -190 -157 -54 -404 -140 -550 -190 -146 -51 -276 -96 -290 -100 -14 -4 -144 -49 -290 -100 -146 -50 -393 -136 -550 -190 -615 -212 -808 -279 -879 -304 l-74 -26 -45 26 c-83 49 -157 105 -286 217 -134 117 -218 177 -248 177 -21 0 -38 -29 -38 -68 0 -87 170 -293 297 -360 140 -74 319 -92 454 -48 41 14 144 47 229 75 231 74 994 319 1328 427 160 52 424 136 585 188 160 52 490 158 732 236 242 78 508 163 590 190 143 46 272 88 618 199 83 27 223 72 310 100 86 28 228 74 315 102 86 28 218 70 292 94 128 42 146 45 340 60 140 11 451 19 985 25 1064 12 1150 17 1485 82 391 75 735 223 824 355 86 125 -44 245 -389 361 -196 65 -622 162 -714 162 -62 0 -124 -45 854 612 259 173 1163 780 2010 1348 847 568 1555 1047 1573 1064 100 93 105 228 16 415 -40 82 -137 191 -170 191 -11 0 -29 -6 -40 -14z'/%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='1280pt' height='640pt' viewBox='0 0 1280.000000 640.000000' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0.000000,640.000000) scale(0.100000,-0.100000)' fill='%23000000' stroke='none'%3E%3Cpath d='M12524 6346 c-17 -13 -19 -29 -21 -188 -2 -269 -31 -361 -131 -425 -31 -20 -1120 -702 -2419 -1514 -2178 -1362 -2366 -1477 -2415 -1483 -190 -24 -465 -109 -1009 -315 -496 -187 -1051 -345 -2093 -596 -264 -63 -496 -115 -516 -115 -57 0 -99 35 -160 135 -30 50 -184 315 -341 590 -243 425 -284 502 -272 512 8 6 197 107 419 224 222 117 404 217 404 221 0 4 -39 8 -86 8 l-87 0 -396 -171 c-467 -202 -805 -347 -1158 -500 -142 -61 -295 -127 -340 -147 -46 -19 -83 -39 -83 -43 0 -4 33 -10 73 -14 72 -7 73 -6 349 88 l277 95 15 -52 c148 -517 339 -1179 347 -1204 l11 -33 177 6 c97 4 304 22 461 41 157 19 515 61 795 94 281 34 538 64 573 69 34 4 59 4 55 1 -4 -4 -75 -30 -158 -58 -82 -27 -269 -91 -415 -142 -146 -51 -276 -96 -290 -100 -14 -4 -144 -49 -290 -100 -146 -50 -393 -136 -550 -190 -157 -54 -404 -140 -550 -190 -146 -51 -276 -96 -290 -100 -14 -4 -144 -49 -290 -100 -146 -50 -393 -136 -550 -190 -615 -212 -808 -279 -879 -304 l-74 -26 -45 26 c-83 49 -157 105 -286 217 -134 117 -218 177 -248 177 -21 0 -38 -29 -38 -68 0 -87 170 -293 297 -360 140 -74 319 -92 454 -48 41 14 144 47 229 75 231 74 994 319 1328 427 160 52 424 136 585 188 160 52 490 158 732 236 242 78 508 163 590 190 143 46 272 88 618 199 83 27 223 72 310 100 86 28 228 74 315 102 86 28 218 70 292 94 128 42 146 45 340 60 140 11 451 19 985 25 1064 12 1150 17 1485 82 391 75 735 223 824 355 86 125 -44 245 -389 361 -196 65 -622 162 -714 162 -62 0 -124 -45 854 612 259 173 1163 780 2010 1348 847 568 1555 1047 1573 1064 100 93 105 228 16 415 -40 82 -137 191 -170 191 -11 0 -29 -6 -40 -14z'/%3E%3C/g%3E%3C/svg%3E");
    
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    
    /* 180 Grad gedreht (scaleX -1), damit er nach links fliegt */
    transform: scaleX(-1);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* Hamburger Animation (wenn Klasse .open aktiv ist) */
/* 1. Oberer Strich wird zum X */
.hamburger.open span:nth-child(1) { 
    top: 9px; 
    transform: rotate(135deg); 
    background: var(--accent); 
}

/* 2. Mittlerer Strich wird zum Kondensstreifen und fliegt weg */
.hamburger.open span:nth-child(2) { 
    left: -100vw; /* Fliegt weit nach links aus dem Bild */
    width: 200px; /* Kondensstreifen wird lang! */
    /* Verlauf: Links (am Flieger) Rot -> Rechts Transparent */
    background: linear-gradient(to right, var(--accent) 0%, transparent 100%);
    opacity: 0; /* Verblasst am Ende */
    
    /* Langsame Bewegung nach links für "Saus"-Effekt */
    transition: left 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19), width 0.1s, opacity 0.6s ease-in;
}

/* Das Flugzeug wird beim Wegfliegen sichtbar */
.hamburger.open span:nth-child(2)::after {
    opacity: 1;
}

/* 3. Unterer Strich wird zum X */
.hamburger.open span:nth-child(3) { 
    top: 9px; 
    transform: rotate(-135deg); 
    background: var(--accent); 
}

/* --- 4. HERO SECTIONS --- */
.hero {
    position: relative;
    /* WAR: height: 80vh; -> Verursacht Abschneiden wenn Inhalt größer ist */
    min-height: 80vh; 
    background-color: var(--primary); 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    overflow: hidden;
    /* KORREKTUR: Padding hinzufügen, damit Inhalte auf Mobile nicht abgeschnitten werden */
    padding-top: 60px;
    padding-bottom: 60px;
    height: auto;
}

/* Video Backgrounds */
.hero-video {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
}
.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(15, 52, 96, 0.8), rgba(15, 52, 96, 0.4));
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 20px;
}
.hero h1 {
    color: var(--white);
    font-size: 3.5rem;
    margin-bottom: 20px;
    text-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.hero p {
    font-size: 1.2rem;
    margin-bottom: 40px;
    opacity: 0.9;
}

/* --- REVIEW TRIGGER BUTTON (Neu) --- */
.review-trigger {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 10px 20px;
    border-radius: 50px;
    margin-top: 15px;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.review-trigger:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.4);
}

.review-stars {
    color: #ffc107; /* Gold */
    font-size: 1.1rem;
    margin-right: 10px;
    letter-spacing: 2px;
}

.review-text {
    color: #fff;
    font-size: 0.9rem;
    margin-right: 10px;
    text-align: left;
    line-height: 1.2; /* Engerer Zeilenabstand */
}

.review-text .rating-score {
    font-weight: 800;
}

/* Der neue Style für die zweite Zeile im Button */
.review-cta {
    display: block; /* Erzwingt neue Zeile */
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: underline;
    opacity: 0.9;
}

.review-logo {
    background: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.review-logo svg path { fill: #4285F4; } /* Google Blue */

/* --- REVIEWS SIDEBAR (Neu) --- */
.reviews-sidebar {
    position: fixed;
    top: 0;
    right: -450px; /* Start outside */
    width: 400px;
    height: 100vh;
    background: #fff;
    z-index: 2500;
    box-shadow: -5px 0 30px rgba(0,0,0,0.2);
    transition: right 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    display: flex;
    flex-direction: column;
}

.reviews-sidebar.active {
    right: 0;
}

.reviews-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 2400;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(3px);
}

.reviews-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.reviews-header {
    padding: 20px;
    background: var(--primary);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reviews-header h3 { color: #fff; margin: 0; font-size: 1.2rem; }

.close-reviews {
    font-size: 30px;
    cursor: pointer;
    line-height: 1;
}

.reviews-summary {
    padding: 30px 20px;
    text-align: center;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
}

.big-rating {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}

.stars-gold {
    color: #ffc107;
    font-size: 1.5rem;
    margin: 10px 0;
}

.btn-review-google {
    display: inline-block;
    background: #4285F4;
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 600;
    margin-top: 10px;
    box-shadow: 0 4px 10px rgba(66, 133, 244, 0.3);
}
.btn-review-google:hover { background: #3367d6; transform: translateY(-2px); }

.reviews-list {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.review-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    display: flex;
    gap: 15px;
}

.review-avatar {
    width: 40px; height: 40px;
    background: #ccc;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.review-content h4 {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-main);
}

.review-meta {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 5px;
    display: block;
}

.review-card p {
    font-size: 0.9rem;
    color: #555;
    margin: 5px 0 0 0;
    line-height: 1.4;
}

@media (max-width: 500px) {
    .reviews-sidebar { width: 100%; right: -100%; }
}

/* Unterseiten Header */
.page-header {
    background-color: var(--primary);
    color: var(--white);
    padding: 80px 0;
    text-align: center;
    background-size: cover;
    background-position: center;
    position: relative;
}
.page-header::before {
    content: '';
    position: absolute;
    top:0; left:0; right:0; bottom:0;
    background: rgba(15, 52, 96, 0.5);
    z-index: 0;
}
.page-header .container { position: relative; z-index: 1; }

.page-header h1 { color: var(--white); font-size: 3rem; margin: 0; }
.page-header p { color: rgba(255,255,255,0.8); font-size: 1.2rem; margin-top: 10px; }

/* --- 5. INHALTE & COMPONENTS --- */
.section { padding: 60px 0; }
.section-title { text-align: center; margin-bottom: 60px; }
.bg-grey { background-color: #eef2f5; }

.content-block {
    background: var(--white);
    padding: 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 40px;
}

.btn {
    display: inline-block;
    background-color: var(--accent);
    color: var(--white);
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(233, 69, 96, 0.4);
    transform: translateY(0);
}
.btn:hover {
    background-color: var(--accent-hover);
    transform: translateY(-3px);
}

/* --- 6. GRIDS & CARDS --- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.card:hover { transform: translateY(-5px); }

.card-img-top { height: 250px; overflow: hidden; }
.card-img-top img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; image-rendering: -webkit-optimize-contrast; }
.card:hover .card-img-top img { transform: scale(1.1); }

.card-body { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }
.card-title { font-size: 1.3rem; margin-bottom: 10px; }
.card-text { color: var(--text-light); flex-grow: 1; margin-bottom: 20px; }
.card-link { font-weight: 700; color: var(--primary); text-transform: uppercase; font-size: 0.9rem; }

/* News Wrapper */
/* ÄNDERUNG: align-items von center auf start gesetzt */
.news-wrapper { display: grid; grid-template-columns: 1fr; gap: 50px; align-items: start; }
@media (min-width: 992px) {
    .news-wrapper { grid-template-columns: 1fr 1fr; }
    .news-wrapper.reverse { direction: rtl; }
    .news-wrapper.reverse > div { direction: ltr; }
}

.news-item {
    background: var(--white);
    padding: 30px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border-left: 5px solid var(--primary);
    margin-bottom: 30px;
    transition: transform 0.3s ease;
    position: relative;
    /* Damit wir erkennen, dass man es hovern kann, wenn Bild da ist */
    cursor: default; 
}
.news-item[data-has-image="true"] {
    cursor: pointer;
}
.news-item[data-has-image="true"]:hover {
    border-left-color: var(--accent);
    background-color: #fff8f9; /* Sehr helles Rot/Pink als Feedback */
}

.news-item:hover { transform: translateX(10px); }
.news-date { font-size: 0.85rem; font-weight: 700; color: var(--accent); text-transform: uppercase; display: block; margin-bottom: 5px; }

/* News Image */
.news-image-container img { 
    /* Standard: Kein Effekt (für news.png), verschmilzt mit Hintergrund */
    border-radius: 0; 
    box-shadow: none;
    
    /* NEU: Transition für Bildwechsel, Style-Wechsel UND Transform */
    transition: opacity 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;

    /* ÄNDERUNG: Verhindert Hochskalieren kleiner Bilder */
    width: auto;            /* Nutzt die echte Bildbreite */
    max-width: 100%;        /* Aber maximal so breit wie der Container (Responsiv) */
    margin: 0 auto;         /* Zentriert das Bild, falls es kleiner ist */
    display: block;
}

/* WICHTIG: Wenn ein News-Beitrag gehovert wird, erhält das Bild diese Klasse per JS.
   Dann sollen Schatten, Ecken und der Zoom sichtbar sein (für Fotos). */
.news-image-container img.active-preview {
    border-radius: var(--radius);
    
    /* Stärkerer Schatten für Pop-Out Effekt */
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    
    /* Der gewünschte Zoom Effekt */
    transform: scale(1.03);
}

/* --- 7. FOOTER (NEU GESTALTET) --- */
footer {
    background-color: #1a1a2e;
    color: #b0b0b0;
    padding: 60px 0 20px;
    margin-top: auto;
    position: relative; /* Wichtig für das herausragende Logo */
    z-index: 10;
}

/* Footer Layout Grid */
.footer-layout {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3 Spalten */
    gap: 20px;
    align-items: center;
    position: relative;
}

/* Linke Spalte: Bilder untereinander */
.footer-col-left {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Enger zusammen */
    align-items: center; /* Mittig ausgerichtet */
    justify-content: center; /* Vertikal mittig */
}

.footer-info-img {
    width: auto; /* Native Breite */
    max-width: 100%; /* Sicherheitshalber */
    height: auto;
    display: block;
}

/* Mittlere Spalte: Kontakt & Socials */
.footer-col-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.footer-contact {
    margin-bottom: 20px;
}

.footer-contact a {
    color: #b0b0b0;
    text-decoration: none;
    font-size: 1.1rem;
    line-height: 1.8;
    transition: color 0.3s;
    display: block;
}
.footer-contact a:hover { color: var(--accent); }

/* Rechte Spalte: Herausragendes Logo */
.footer-col-right {
    display: flex;
    justify-content: flex-end;
    position: relative;
    height: 100%;
}

.footer-spn-logo {
    width: auto; /* Native Größe nutzen, falls es so passt */
    max-width: 300px; /* Begrenzung falls zu riesig */
    height: auto;
    /* Das Bild nach oben schieben (negativer Margin), damit es reinragt */
    margin-top: -30%; /* Überlappung */
    z-index: 20;
    /* Optional: Ein leichter Schatten */
    filter: drop-shadow(0 10px 10px rgba(0,0,0,0.3));
}

.footer-bottom { 
    text-align: center; 
    border-top: 1px solid rgba(255,255,255,0.1); 
    padding-top: 20px; 
    font-size: 0.9rem;
    margin-top: 40px;
}

/* Social Icons im Footer */
.footer-socials {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px; /* Optional: Abstand nach oben zu den Kontaktdaten */
}
.footer-socials a {
    color: #b0b0b0;
    transition: all 0.3s;
    padding: 5px;
}
.footer-socials a:hover {
    color: var(--accent);
    transform: translateY(-3px);
}

/* --- 8. SPEZIAL-ELEMENTE --- */

/* Video Container */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: #000;
    margin-bottom: 20px;
}
.video-container iframe, 
.video-container video {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%; border: 0; object-fit: cover;
}

/* Kategorie Buttons */
.category-nav {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 50px;
    margin-top: -20px;
}
.btn-cat {
    background-color: #ffffff;
    border: 2px solid var(--primary);
    color: var(--primary);
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.btn-cat:hover {
    background-color: var(--primary);
    color: #ffffff;
    transform: translateY(-2px);
}

/* Zitat Box */
.quote-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: center;
    margin-bottom: 60px;
    background-color: var(--white);
    padding: 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border-top: 5px solid var(--accent);
}
@media(min-width: 768px) {
    .quote-wrapper { grid-template-columns: 2fr 1fr; }
}
.quote-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    font-style: italic;
    color: var(--primary);
    line-height: 1.6;
    position: relative;
}
.quote-text::before {
    content: '“';
    font-size: 5rem;
    color: rgba(233, 69, 96, 0.1);
    position: absolute;
    top: -40px;
    left: -20px;
    font-family: serif;
}
.quote-author {
    display: block;
    margin-top: 20px;
    font-size: 1rem;
    font-style: normal;
    color: var(--text-light);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.quote-image img {
    border-radius: 50%;
    width: 200px;
    height: 200px;
    object-fit: cover;
    margin: 0 auto;
    border: 5px solid #f4f6f8;
    box-shadow: var(--shadow);
}

/* Back to Top */
#btn-back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: none;
    background-color: var(--accent);
    color: #ffffff;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 9999;
    transition: all 0.3s ease;
    padding: 0;
    line-height: 50px;
    text-align: center;
}
#btn-back-to-top:hover {
    background-color: var(--accent-hover);
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.4);
}

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    z-index: 2000;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s;
}

.lightbox-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 1200px;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    animation: zoomIn 0.3s;
}

#lightbox-caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
    font-family: 'Montserrat', sans-serif;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 50px;
    font-weight: bold;
    transition: 0.3s;
    line-height: 1;
    z-index: 2001;
}

.lightbox-close:hover,
.lightbox-close:focus {
    color: var(--accent);
    text-decoration: none;
    cursor: pointer;
}

.zoomable {
    cursor: zoom-in;
    transition: transform 0.3s ease;
}

.zoomable:hover {
    opacity: 0.95;
    transform: scale(1.02);
}

@keyframes zoomIn { from {transform:scale(0.8); opacity: 0;} to {transform:scale(1); opacity: 1;} }
@keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }

@media only screen and (max-width: 700px) {
    .lightbox-content {
        width: 100%;
        margin-top: 50px;
    }
}

/* Daten Listen (Flugzeugpark etc.) */
.data-list { list-style: none; padding: 0; }
.data-list li { margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 15px; }
.data-list strong { color: var(--primary); display: block; }
.highlight-box { background-color: #fff3cd; border-left: 5px solid #ffc107; padding: 15px; margin-top: 20px; border-radius: 5px; }

/* Slideshow */
.slideshow-container {
    max-width: 100%;
    position: relative;
    margin: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    min-height: 300px;
}
.mySlides { display: none; height: 350px; width: 100%; }
.mySlides img { width: 100%; height: 100%; object-fit: cover; }
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background-color: rgba(0,0,0,0.3);
}
.next { right: 0; border-radius: 3px 0 0 3px; }
.prev:hover, .next:hover { background-color: var(--accent); }
.fade { animation-name: fade; animation-duration: 1.5s; }
@keyframes fade { from {opacity: .4} to {opacity: 1} }
@media only screen and (max-width: 600px) { .mySlides { height: 250px; } }

/* Admin / CMS Styles */
.admin-login-link { font-size: 0.8rem; color: #e0e0e0; cursor: pointer; margin-left: 10px; text-decoration: none; transition: color 0.3s; }
.admin-login-link:hover { color: var(--accent); }
.admin-panel { display: none; background: var(--white); padding: 25px; margin-bottom: 30px; border-radius: var(--radius); box-shadow: var(--shadow); border-left: 5px solid var(--accent); animation: fadeIn 0.5s; }
.admin-panel.active { display: block; }
.admin-panel h3 { margin-top: 0; font-size: 1.2rem; }
.news-form input, .news-form textarea { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 6px; font-family: inherit; }
.delete-btn { float: right; background-color: #ff4d4d; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 0.8rem; margin-left: 10px; display: none; }
.delete-btn:hover { background-color: #d63030; }
body.admin-mode .delete-btn { display: inline-block; }

/* ---------------------------------------------------- */
/* --- 9. MOBILE OPTIMIERUNG (MEDIA QUERIES) --- */
/* ---------------------------------------------------- */

@media (max-width: 992px) {
    /* Header & Navigation */
    .logo {
        position: relative; /* In den Flow zurück */
        top: auto; left: auto;
        
        /* Mobile: Badge etwas kleiner machen, aber Stil behalten */
        background-color: var(--white);
        box-shadow: none; /* Kein großer Schatten auf Mobile nötig */
        padding: 5px 10px;
        border-radius: 0 0 10px 10px;
        /* Akzentstreifen entfernt */
    }
    .logo img { height: 50px; /* Kleineres Logo */ }
    
    /* Animation auf Mobile deaktivieren um Performance zu sparen */
    .logo:hover { transform: none; box-shadow: none; padding-bottom: 5px; }
    .logo::after { display: none; }
    
    .hamburger { display: block; /* Burger anzeigen */ }
    
    .nav-menu {
        position: fixed;
        top: var(--header-height);
        right: -100%; /* Versteckt rechts */
        width: 100%;
        height: calc(100vh - var(--header-height));
        
        /* Glassmorphismus für Mobile Menu hinzufügen */
        background-color: rgba(255, 255, 255, 0.85); /* Halbtransparent */
        backdrop-filter: blur(12px); /* Milchglas-Effekt */
        -webkit-backdrop-filter: blur(12px);

        flex-direction: column;
        justify-content: flex-start;
        padding: 40px 20px;
        transition: right 0.3s ease-in-out;
        box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.1);
        margin-left: 0;
        gap: 0;
        overflow-y: auto; /* Scrollbar wenn nötig */
    }
    .nav-menu.active { right: 0; /* Menü rein */ }

    .nav-menu a {
        font-size: 1.2rem;
        padding: 15px 0;
        border-bottom: 1px solid #eee;
        width: 100%;
        text-align: center;
    }
    .nav-menu a:last-child { border-bottom: none; }
    /* WICHTIG: Animation im Mobile Menü ausschalten, da kein Platz für Flugzeug */
    .nav-menu a::before, .nav-menu a::after { display: none; }
    
    /* Layout Anpassungen */
    
    /* FIX: Hero Section wächst mit dem Inhalt */
    .hero {
        height: auto;
        min-height: 80vh;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .hero h1, .page-header h1 { font-size: 2.2rem; }
    .hero p { font-size: 1rem; }
    .section { padding: 40px 0; }
    .content-block { padding: 25px; }
    .section-image { min-height: 200px; }
    
    /* Grid & Flex */
    .news-wrapper { grid-template-columns: 1fr; gap: 30px; }

    /* NEU: Bildcontainer auf Mobile nach oben schieben (order -1) */
    .news-image-container { order: -1; }
    
    .contact-grid, .impressum-grid { grid-template-columns: 1fr; }
    
    /* Speziell: Events Reverse Grid (Rückgängig auf Mobile) */
    .news-wrapper.reverse { direction: ltr; }
    .news-wrapper.reverse > div { direction: ltr; }

    /* Header Socials Mobile */
    .header-socials {
        margin-left: 0;
        padding-left: 0;
        margin-right: 0; /* Sicherstellen, dass rechts nichts drückt */
        padding-right: 0;
        
        border-left: none;
        margin-top: 30px; /* Abstand nach oben */
        justify-content: center; /* Zentriert */
        width: 100%;
        border-top: 1px solid #eee; /* Trennlinie oben */
        padding-top: 20px;
        
        display: flex; /* Flexbox erzwingen */
        gap: 15px; /* Abstand zwischen den Icons */
    }
    
    /* Social Media Icons NICHT auf 100% Breite ziehen, sondern nebeneinander lassen */
    .header-socials .header-social-link {
        width: auto !important;
        border-bottom: none !important;
        margin: 0 5px; /* Nur kleiner seitlicher Abstand */
        padding: 10px; /* Klickfläche */
    }

    .header-social-link svg {
        width: 24px; 
        height: 24px;
    }

    /* Footer Mobile Anpassung */
    .footer-layout {
        grid-template-columns: 1fr; /* Alles untereinander */
        gap: 50px;
        text-align: center;
    }
    
    .footer-col-left {
        align-items: center; /* Bilder zentrieren auf Mobile */
    }
    
    .footer-col-right {
        justify-content: center;
        height: auto;
    }
    
    /* Auf dem Handy das Logo NICHT herausragen lassen */
    .footer-spn-logo {
        margin-top: 0;
        transform: none;
        max-width: 200px;
    }

    /* NEU: Hilfsklasse um Reihenfolge auf Mobile zu tauschen (Bild vor Text) */
    .swap-mobile > div:last-child {
        order: -1;
    }
}

@media (max-width: 500px) {
    .hero h1, .page-header h1 { font-size: 1.8rem; }
    .header-inner { padding: 0 15px; }
}

/* --- 10. MODAL & LOGIN STYLES --- */
.modal {
    display: none; /* Standardmäßig versteckt */
    position: fixed;
    z-index: 3000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
}

/* WICHTIG: Flexbox aktivieren, wenn Klasse 'active' oder via JS gesetzt */
.modal[style*="display: block"], 
.modal[style*="display: flex"] {
    display: flex !important;
}

.modal-content {
    background-color: var(--white);
    padding: 30px;
    border-radius: var(--radius);
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 400px;
    position: relative;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-close {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 24px;
    font-weight: bold;
    color: var(--text-light);
    cursor: pointer;
}
.modal-close:hover { color: var(--accent); }

.admin-login-card h3 { margin-bottom: 10px; }
.admin-login-card p { margin-bottom: 15px; color: var(--text-light); font-size: 0.95rem; }
.admin-login-card input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 5px;
    font-size: 1rem;
}

/* NEU: Button Styles für Sekundär-Aktionen */
.btn-secondary {
    background-color: #999;
    box-shadow: none;
}
.btn-secondary:hover {
    background-color: #777;
    transform: translateY(0);
}

/* Edit Button Hover */
.edit-btn:hover {
    background-color: #d1344f !important;
}

/* --- 11. COOKIE BANNER --- */
.cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    max-width: 500px;
    background-color: var(--white);
    padding: 25px;
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    z-index: 9999;
    border-left: 5px solid var(--accent);
    animation: slideUp 0.5s ease-out;
}

.cookie-content h3 {
    margin-top: 0;
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.cookie-content p {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 20px;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
}

/* Mobile Anpassung für Banner */
@media (max-width: 600px) {
    .cookie-banner {
        left: 10px; 
        right: 10px; 
        bottom: 10px;
        padding: 20px;
    }
}

/* --- 12. HEADER SOCIAL ICONS --- */
.header-socials {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: 0px;
    padding-left: 20px;
    border-left: 1px solid #eee; /* Trennlinie auf Desktop */
}

.header-social-link {
    color: var(--primary);
    padding: 0;
    transition: all 0.3s ease;
    display: flex; /* Zentriert SVG */
    align-items: center;
}

.header-social-link:hover {
    color: var(--accent);
    transform: translateY(-2px);
}