/* --- 1. SETTINGS & VARIABLES --- */
:root { --bg-dark: #0f131a; --my-blue: #2182b0; --glow-center: #204a55; --glass-bg: rgba(30, 40, 55, 0.65); --glass-border: rgba(255, 255, 255, 0.15); --text-main: #ffffff; --text-muted: #cbd5e0; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: var(--bg-dark); color: var(--text-main); font-family: 'Montserrat', sans-serif; overflow-x: hidden; min-height: 100vh; }

/* --- 2. BACKGROUND SYSTEM --- */
#fascia-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -5; pointer-events: none; opacity: 0.5; }
.glow-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 50% 50%, var(--glow-center) 0%, var(--bg-dark) 100%); z-index: -10; }

/* --- 3. LAYOUT & BANNER --- */
.site-wrapper { max-width: 1100px; margin: 0 auto; padding: 20px; position: relative; z-index: 10; }
.hero-banner { min-height: 280px; display: flex; justify-content: center; align-items: center; border: 1px solid var(--glass-border); border-radius: 20px; margin-bottom: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%); backdrop-filter: blur(10px); }
.small-banner { min-height: 200px !important; }
.main-logo { height: 200px; width: auto; filter: drop-shadow(0 0 20px rgba(33, 130, 176, 0.5)); }
.no-select { pointer-events: none; user-select: none; }

/* --- 4. NAVIGATION --- */
.glass-nav { background: var(--glass-bg); backdrop-filter: blur(15px); border: 1px solid var(--glass-border); padding: 15px; border-radius: 12px; margin-bottom: 20px; }
.glass-nav ul { display: flex; justify-content: center; list-style: none; gap: 30px; }
.glass-nav a { color: var(--text-main); text-decoration: none; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; opacity: 0.8; transition: 0.3s ease; }
.glass-nav a:hover { opacity: 1; color: var(--my-blue); }

/* --- 5. CONTENT CONTAINERS --- */
.glass-content { background: var(--glass-bg); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); padding: 60px 40px; border-radius: 20px; text-align: center; }

/* --- 6. TYPOGRAPHY & HOME --- */
.main-headline { font-size: 1.9rem; font-weight: 800; line-height: 1.1; margin-bottom: 15px; letter-spacing: -1px; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.sub-headline { font-size: 1.4rem; font-weight: 600; color: var(--my-blue); margin-bottom: 35px; letter-spacing: 1px; }
.question { font-size: 1rem; font-weight: 600; letter-spacing: 3px; padding: 10px 20px; border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); display: inline-block; margin-bottom: 35px; }
.invite-text { font-size: 0.9rem; line-height: 1.7; color: var(--text-muted); margin: 0 auto 35px auto; max-width: 750px; }

/* --- 7. ABOUT ME & GRID --- */
.about-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 40px; align-items: center; text-align: left; }
.profile-frame { top: 20px; align-self: start; }
.profile-img { width: 100%; border-radius: 10px; filter: contrast(1.05) saturate(1.1); display: block; pointer-events: none; user-select: none; }
.badge { color: var(--my-blue); font-size: 1.2rem; font-weight: 800; text-transform: uppercase; letter-spacing: 3px; display: block; margin-bottom: 8px; }
.expertise-tags { margin-top: 20px; display: flex; gap: 15px; flex-wrap: wrap; }
.expertise-tags span { font-size: 0.8rem; font-weight: 700; color: var(--my-blue); }

/* --- 8. CONTACT FORM --- */
.contact-section { display: flex; flex-direction: column; align-items: center; }
.future-form { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 500px; text-align: left; margin-top: 20px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--my-blue); font-weight: 700; }
.form-group input, .form-group textarea { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border); border-radius: 6px; padding: 15px; color: #fff; font-family: inherit; width: 100%; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--my-blue); background: rgba(255, 255, 255, 0.08); }

/* --- 9. NMS DESCRIPTION (SYSTEM-CHECK) --- */
.nms-description { margin-top: 50px; }
.desc-card, .result-box { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border); padding: 30px; border-radius: 15px; margin-bottom: 30px; text-align: left; }
.process-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
.step { padding: 10px; text-align: left; }
.step-number { font-size: 2.5rem; font-weight: 800; color: var(--my-blue); opacity: 0.4; margin-bottom: 5px; }
.step h4 { color: var(--my-blue); text-transform: uppercase; margin-bottom: 10px; font-size: 1rem; }
.step p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; }
.result-box { border-left: 4px solid var(--my-blue); }

/* --- 10. BUTTONS --- */
.cta-button { display: inline-block; background-color: var(--my-blue); color: white; padding: 16px 40px; text-decoration: none; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; border-radius: 6px; border: none; transition: 0.3s; cursor: pointer; text-align: center; }
.cta-button:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(33, 130, 176, 0.4); filter: brightness(1.1); }

/* --- 11. RESPONSIVE --- */
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; text-align: center; } .about-text-area { text-align: center; } .expertise-tags { justify-content: center; } }
@media (max-width: 768px) { 
    :root { --glass-bg: rgba(40, 50, 65, 0.85); }
    .main-headline { font-size: 1.5rem; } .sub-headline { font-size: 1.2rem; } .main-logo { height: 120px; } .hero-banner { min-height: 180px; }
    .glass-content { padding: 35px 20px; } .process-flow { grid-template-columns: 1fr; } .glass-nav ul { gap: 15px; flex-wrap: wrap; }
}

/* --- LINKS --- */
footer a {color: var(--my-blue); text-decoration: none; transition: color 0.3s ease, opacity 0.3s ease; }

footer a:hover {opacity: 0.7; text-decoration: underline; }

/* NUR die Links im Text vom Kontaktformular (neben der Checkbox) einfärben */
.contact-page label a, 
.contact-page label a:visited {
    color: var(--my-blue) !important;
    text-decoration: underline !important;
}

/* Hover-Effekt nur für den Link im Formular */
.contact-page label a:hover {
    opacity: 0.7 !important;
    text-decoration: none !important;
}

/* ----------------------------------------------------
   FINALES DESIGN FÜR RECHTSTEXTE (FULL WIDTH)
   ---------------------------------------------------- */

/* 1. Der Container: Volle Breite und bündig mit Nav */
.glass-content.full-width-legal {
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px 0 20px 0!important;
    padding: 0 !important;
    display: block !important;
    box-sizing: border-box;
}

/* 2. Innenabstand (Text rückt weg vom Glasrand) */
.full-width-legal .legal-text-area,
.full-width-legal .about-text-area {
    padding: 40px !important;
    text-align: left !important;
}

/* 3. DIE BLAUE H1 (Gross und präsent) */
.full-width-legal h1.sub-headline {
    color: var(--my-blue) !important;
    font-size: 1.5rem !important; /* Schön groß */
    font-weight: bold !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    line-height: 1.1 !important;
}

/* 4. DIE THEMEN-ÜBERSCHRIFTEN (h2, h3) */
.full-width-legal h2,
.full-width-legal h3,
.full-width-legal h4 {
    color: var(--my-blue) !important;
    font-size: 1.2rem !important; /* Schön groß */
    font-weight: bold;
    margin-top: 20px !important;  /* Abstand nach oben zum vorherigen Block */
    margin-bottom: 6px !important; /* Enger Anschluss an den folgenden Text */
    line-height: 1.2 !important;
    text-transform: none;
}

/* 5. DER WEISSE TEXT (Kompakte Absätze) */
.full-width-legal p,
.full-width-legal li,
.full-width-legal span,
.full-width-legal div {
    color: #ffffff !important;
    opacity: 1;
    font-size: 1.0rem;
    line-height: 1.3 !important;   /* Zeilen innerhalb eines Textes rücken enger */
    margin-bottom: 5px !important;  /* Absätze kleben fast untereinander */
}

/* 6. LINKS (Blau und unterstrichen) */
.full-width-legal a {
    color: var(--my-blue) !important;
    text-decoration: underline;
    word-break: break-all;
}

/* 7. Wichtige Namen/Fettungen */
.full-width-legal strong {
    color: #ffffff !important;
    font-weight: bold;
}

/* 8. FOOTER LINKS HOVER EFFEKT */
footer a {
    color: #204a55 !important; /* Grundfarbe */
    transition: color 0.3s ease !important;
    text-decoration: none !important;
}

footer a:hover {
    color: #2182b0 !important; /* Deine Mouseover-Farbe */
    text-decoration: underline !important;
}