/* Gelbe Farben aus yellow-colors.css */
:root {
    /* Basis-Gelbfarben */
    --yellow-accent: #F6B352;                    /* Hauptgelb: beibehalten */
    --yellow-accent-strong: #f4982d;              /* Intensivere Accent-Farbe für Gradienten */
    --yellow-accent-ink: #1E1E1E;                /* Dunkle Textfarbe für gelben Hintergrund */
    
    /* Hover-Varianten */
    --yellow-hover-light: #f8c472;               /* Hover-Variante (heller) */
    --yellow-hover-medium: #f6a735;              /* Hover-Variante (mittel) */
    
    /* Active-Varianten */
    --yellow-active: #d4881f;                     /* Active-Variante (dunkler) */
    
    /* Gradient-Varianten */
    --yellow-gradient-dark: #c95c0c;             /* Dunkle Gradient-Variante */
    
    /* RGBA-Varianten mit Transparenz */
    --yellow-rgba-12: rgba(246, 179, 82, 0.12);  /* 12% Transparenz - für Hintergründe */
    --yellow-rgba-15: rgba(246, 179, 82, 0.15);  /* 15% Transparenz - für Icons */
    --yellow-rgba-18: rgba(246, 179, 82, 0.18);  /* 18% Transparenz - für Step-Nummern */
    --yellow-rgba-30: rgba(246, 179, 82, 0.3);   /* 30% Transparenz - für Borders */
    --yellow-rgba-35: rgba(246, 179, 82, 0.35);  /* 35% Transparenz - für Borders */
    --yellow-rgba-50: rgba(246, 179, 82, 0.5);   /* 50% Transparenz - für Focus-Shadows */
    --yellow-rgba-60: rgba(246, 179, 82, 0.6);   /* 60% Transparenz - für Focus-Borders */
    --yellow-rgba-90: rgba(246, 179, 82, 0.9);   /* 90% Transparenz - für Gradient-Start */
    
    /* Gradient-Definitionen */
    --yellow-gradient-main: linear-gradient(110deg, var(--yellow-accent) 0%, var(--yellow-accent-strong) 100%);
    --yellow-gradient-hover: linear-gradient(110deg, var(--yellow-hover-light) 0%, var(--yellow-hover-medium) 100%);
    --yellow-gradient-active: linear-gradient(110deg, var(--yellow-accent-strong) 0%, var(--yellow-active) 100%);
    --yellow-gradient-bars: linear-gradient(180deg, var(--yellow-rgba-90), var(--yellow-rgba-30));
    --yellow-gradient-brand: radial-gradient(circle at 30% 30%, var(--yellow-accent) 0%, var(--yellow-accent-strong) 60%, var(--yellow-gradient-dark) 100%);
}

/* Design Tokens - Dark Theme (Standard) */
:root{
	--accent:var(--yellow-accent); /* Gelb aus yellow-colors.css */
	--accent-strong:var(--yellow-accent-strong); /* Intensivere Accent-Farbe für Gradienten */
	--accent-ink:var(--yellow-accent-ink);
	--bg-deep:#0a0d18; /* Dunkles Blau/Schwarz für Tiefe - intensiver */
	--bg-surface:#0f1524; /* Oberfläche dunkel - intensiver */
	--surface-subtle:#080a14;
	--text-main:#F0F3FA;
	--text-tertiary:#B8C0D0;
	--glass:rgba(255,255,255,.08);
	--glass-border:rgba(255,255,255,.16);
	--shadow:0 10px 30px rgba(0,0,0,.45);
}

/* Light Warm Theme */
[data-theme="light"] {
	--accent:var(--yellow-accent); /* Gelb aus yellow-colors.css */
	--accent-strong:var(--yellow-accent-strong); /* Intensivere Accent-Farbe */
	--accent-ink:#FFFFFF;
	--bg-deep:#FFF5E8; /* Warmes Weiß/Creme - intensiver */
	--bg-surface:#FFFFFF; /* Reines Weiß */
	--surface-subtle:#FFEED9; /* Sehr helles Creme - intensiver */
	--text-main:#1F1209; /* Warmes Dunkelbraun - intensiver */
	--text-tertiary:#4A2E1F; /* Mittelbraun - intensiver */
	--glass:var(--yellow-rgba-12); /* Gelb mit Transparenz */
	--glass-border:var(--yellow-rgba-30);
	--shadow:0 10px 30px var(--yellow-rgba-30);
}

html,body{background:var(--bg-deep);color:var(--text-main);font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;transition:background-color 0.3s ease,color 0.3s ease;min-height:100vh;}

body{display:flex;flex-direction:column;}

.page-wrapper{flex:1;display:flex;flex-direction:column;}

/* Helpers */
.bg-deep{background:var(--bg-deep)!important}
.bg-surface{background:var(--bg-surface)!important}
.bg-surface-subtle{background:var(--surface-subtle)!important}
.bg-light{background:rgba(32,39,69,1)!important}
.text-accent{color:var(--accent)!important}
.text-muted{color:var(--text-tertiary)!important}
.text-body-tertiary{color:#fff!important}
.alert-accent-soft{background:var(--yellow-rgba-18);border:1px solid var(--yellow-rgba-35);color:var(--text-main)}
.border-accent{border:1px solid var(--yellow-rgba-35)!important}
.py-6{padding-top:4.5rem!important;padding-bottom:4.5rem!important}

/* Navbar */
.navbar.bg-surface{background:rgba(8,10,20,.8)!important;backdrop-filter:saturate(120%) blur(10px);border-bottom:1px solid rgba(255,255,255,.1);transition:background-color 0.3s ease,border-color 0.3s ease;}
[data-theme="light"] .navbar.bg-surface{background:rgba(255,255,255,.95)!important;border-bottom:1px solid var(--yellow-rgba-30);}
.navbar .nav-link{color:var(--text-tertiary);transition:color 0.3s ease;}
.navbar .nav-link:hover,.navbar .nav-link:focus{color:var(--accent);}
[data-theme="light"] .navbar .nav-link:hover,[data-theme="light"] .navbar .nav-link:focus{color:var(--accent-strong);}

/* Buttons */
.btn-warning{--bs-btn-color:var(--accent-ink);background:var(--yellow-gradient-main)!important;--bs-btn-bg:transparent;--bs-btn-border-color:transparent;--bs-btn-hover-color:var(--accent-ink);--bs-btn-hover-bg:var(--yellow-gradient-hover);--bs-btn-hover-border-color:transparent;border:none!important;transition:all 0.3s ease;}
.btn-warning:hover{background:var(--yellow-gradient-hover)!important;color:var(--accent-ink)!important}
.btn-warning:focus{background:var(--yellow-gradient-main)!important;box-shadow:0 0 0 .25rem var(--yellow-rgba-50)!important}
.btn-warning:active{background:var(--yellow-gradient-active)!important;color:var(--accent-ink)!important}
[data-theme="light"] .btn-warning{background:var(--yellow-gradient-main)!important;}
[data-theme="light"] .btn-warning:hover{background:var(--yellow-gradient-hover)!important;}
[data-theme="light"] .btn-warning:focus{box-shadow:0 0 0 .25rem var(--yellow-rgba-50)!important;}
.btn-outline-warning{--bs-btn-color:var(--accent);--bs-btn-border-color:var(--accent);--bs-btn-hover-bg:var(--yellow-gradient-main);--bs-btn-hover-color:var(--accent-ink);--bs-btn-hover-border-color:transparent;transition:all 0.3s ease;}
.btn-outline-warning:hover{background:var(--yellow-gradient-main)!important;border-color:transparent!important;color:var(--accent-ink)!important}
.btn-outline-light{--bs-btn-color:#dbe0ee;--bs-btn-border-color:rgba(255,255,255,.25);--bs-btn-hover-bg:#e9ecf6;--bs-btn-hover-color:#0b0f1c;--bs-btn-hover-border-color:#e9ecf6}
[data-theme="light"] .btn-outline-light{--bs-btn-color:var(--text-main);--bs-btn-border-color:var(--yellow-rgba-35);--bs-btn-hover-bg:var(--accent);--bs-btn-hover-color:#fff;--bs-btn-hover-border-color:var(--accent)}

/* Hero */
.hero-section{position:relative;min-height:100vh;display:flex;align-items:center;background:rgba(8,10,20,.98)!important;backdrop-filter:saturate(120%) blur(10px)!important;-webkit-backdrop-filter:saturate(120%) blur(10px)!important;isolation:isolate;transition:background-color 0.3s ease;}
.hero-section::before{content:'';position:absolute;inset:0;background:var(--bg-deep);z-index:-2;transition:background-color 0.3s ease;}
[data-theme="light"] .hero-section{background:rgba(255,255,255,.95)!important;}
[data-theme="light"] .hero-section::before{background:var(--bg-deep);}
.hero-bg{position:absolute;inset:0;overflow:hidden;z-index:0;background:transparent}
.hero-canvas{position:absolute;inset:0;z-index:1;pointer-events:none;width:100%;height:100%;background:transparent}
.hero-section .container{position:relative;z-index:10}
.hero-section .section-next{position:absolute;z-index:10;bottom:0.25rem}
.hero-section .lead.text-body-tertiary{color:#fff!important}
.light-orb{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 70%);filter:blur(80px);opacity:0.7;transition:opacity 0.3s ease;animation:moveOrb 20s ease-in-out infinite}
@keyframes moveOrb{0%{transform:translate(10%,10%)}100%{transform:translate(50%,-20%)}}
.hero-orb{position:absolute;filter:blur(40px);opacity:.35;pointer-events:none}
.hero-orb-1{width:280px;height:280px;border-radius:50%;background:var(--accent);top:-40px;left:-60px}
.hero-orb-2{width:360px;height:360px;border-radius:50%;background:#9d6fff;right:-60px;bottom:-60px}
.glass{background:var(--glass);border:1px solid var(--glass-border);box-shadow:var(--shadow)}

/* Cards / Components */
.step .step-num{width:40px;height:40px;border-radius:10px;background:var(--yellow-rgba-18);border:1px solid var(--yellow-rgba-35);display:flex;align-items:center;justify-content:center;color:var(--accent);font-weight:700;margin-bottom:.5rem;transition:all 0.3s ease;}
[data-theme="light"] .step .step-num{background:var(--yellow-rgba-15);border:1px solid var(--yellow-rgba-35);color:var(--accent);}
.chip{display:inline-block;padding:.25rem .5rem;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);transition:all 0.3s ease;}
[data-theme="light"] .chip{background:var(--yellow-rgba-15);border:1px solid var(--yellow-rgba-35);}
.dot{display:inline-block;width:.6rem;height:.6rem;border-radius:50%}
.bars{display:grid;grid-auto-flow:column;gap:.4rem;align-items:end;height:120px}
.bars span{display:block;width:18px;border-radius:6px;background:var(--yellow-gradient-bars);height:var(--h)}

.kpi{display:grid;gap:.2rem;justify-items:center}
.kpi .kpi-value{font-weight:700}
.kpi.small .kpi-value{font-size:.9rem}
.stat{font-weight:700;font-size:1.25rem}
.stat-label{color:var(--text-tertiary);font-size:.85rem}

/* Testimonials */
.tcard{padding:1.25rem;border-radius:1rem;background:var(--glass);border:1px solid var(--glass-border);transition:all 0.3s ease;}
[data-theme="light"] .tcard{background:rgba(255,255,255,.8);border:1px solid var(--yellow-rgba-12);box-shadow:0 4px 12px var(--yellow-rgba-12);}
.tcard blockquote{font-style:italic;margin:0 0 .75rem 0}
.tcard .avatar{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.2);display:inline-grid;place-items:center;transition:all 0.3s ease;}
[data-theme="light"] .tcard .avatar{background:var(--yellow-rgba-15);}

/* Forms */
.form-control,.form-select{background:#0c101c;border:1px solid rgba(255,255,255,.12);color:#f0f3fa;transition:all 0.3s ease;}
.form-control:focus,.form-select:focus{border-color:var(--yellow-rgba-60);box-shadow:0 0 0 .2rem var(--yellow-rgba-30)}
[data-theme="light"] .form-control,[data-theme="light"] .form-select{background:#FFFFFF;border:1px solid var(--yellow-rgba-30);color:var(--text-main);}
[data-theme="light"] .form-control:focus,[data-theme="light"] .form-select:focus{border-color:var(--accent);box-shadow:0 0 0 .2rem var(--yellow-rgba-30);}

/* Icons */
.i{display:inline-block;width:48px;height:48px;border-radius:12px;background:var(--yellow-rgba-15);border:1px solid var(--yellow-rgba-35);position:relative}
.i::before{content:'';position:absolute;inset:50%;transform:translate(-50%,-50%)}
.i-project::before{width:24px;height:24px;border:2px solid var(--accent);border-radius:4px;background:radial-gradient(circle at 30% 30%,var(--accent),transparent)}
.i-terminal::before{width:24px;height:16px;border:2px solid var(--accent);border-radius:2px;background:linear-gradient(90deg,var(--accent) 0,var(--accent) 30%,transparent 30%)}
.i-receipt::before{width:20px;height:24px;border:2px solid var(--accent);border-radius:2px;background:linear-gradient(90deg,var(--accent) 0 40%,transparent 40% 60%,var(--accent) 60%)}
.i-location::before{width:18px;height:24px;border:2px solid var(--accent);border-radius:8px 8px 0 0;background:radial-gradient(circle at 50% 20%,var(--accent) 0,var(--accent) 25%,transparent 25%);clip-path:polygon(50% 0,100% 25%,100% 100%,0 100%,0 25%)}
.i-email::before{width:24px;height:18px;border:2px solid var(--accent);border-radius:3px;background:linear-gradient(135deg,var(--accent) 0 25%,transparent 25% 75%,var(--accent) 75%)}
.i-phone::before{width:18px;height:24px;border:2px solid var(--accent);border-radius:10px;background:linear-gradient(180deg,var(--accent) 0 20%,transparent 20% 80%,var(--accent) 80%)}
.welcome-icon{display:flex;align-items:center;justify-content:center}
.timeline-icon{display:flex;align-items:center;justify-content:center}
.about-icon{display:flex;align-items:center;justify-content:flex-start}
.contact-icon{display:flex;align-items:center;justify-content:flex-start}

/* Welcome Cards */
.welcome-card{transition:transform .2s,box-shadow .2s}
.welcome-card:hover{transform:translateY(-4px);box-shadow:0 15px 40px rgba(0,0,0,.4)}

/* About Section */
.innovation-badge{display:flex;align-items:center;gap:.75rem;padding:.5rem}
.badge-icon{font-size:1.5rem}
.mission-quote{color:var(--text-main);font-style:italic}
.highlight-text{color:var(--text-main)}

/* Shield Animation */
.shield-container{display:flex;justify-content:center;align-items:center;height:200px}
.shield{position:relative;width:120px;height:120px}
.shield-core{position:absolute;inset:20%;border-radius:50% 50% 50% 0;transform:rotate(45deg);background:var(--yellow-rgba-30);border:2px solid var(--accent);animation:pulse 2s ease-in-out infinite}
.ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--yellow-rgba-60);animation:ring 3s linear infinite}
@keyframes pulse{0%,100%{opacity:.3;transform:rotate(45deg) scale(1)}50%{opacity:.6;transform:rotate(45deg) scale(1.1)}}
@keyframes ring{0%{transform:scale(1);opacity:.5}50%{transform:scale(1.2);opacity:.2}100%{transform:scale(1);opacity:.5}}

/* Section Navigation */
section{position:relative}
.section-full{min-height:100vh;display:flex;align-items:center}
.section-next{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:10}
.next-btn{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s;color:transparent}
.next-btn:hover{background:rgba(255,255,255,.18);transform:translateY(4px)}
.chevron{width:12px;height:12px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);animation:bounce 2s infinite;margin-bottom:0.5rem}
@keyframes bounce{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(8px) rotate(45deg)}}

/* Lists */
.marker-list{padding-left:0;list-style:none;counter-reset:marker}
.marker-list li{position:relative;padding-left:2rem;margin-bottom:1rem;counter-increment:marker}
.marker-list li::before{content:counter(marker);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--yellow-rgba-15);border:1px solid var(--yellow-rgba-35);display:flex;align-items:center;justify-content:center;color:var(--accent);font-weight:600;font-size:.875rem}
.checklist{padding-left:0;list-style:none}
.checklist li{position:relative;padding-left:1.75rem;margin-bottom:.75rem}
.checklist li::before{content:'✓';position:absolute;left:0;top:0;color:var(--accent);font-weight:700}

/* KPI Up Indicator */
.kpi-value .up{color:#4ade80}

/* Footer */
footer{border-top:1px solid rgba(255,255,255,.1);transition:background-color 0.3s ease,border-color 0.3s ease;margin-top:auto;}

.site-footer {
    background: rgba(6, 7, 12, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.25rem 0;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    margin-top: auto;
}

[data-theme="light"] .site-footer {
    background: rgba(255, 245, 235, 0.98);
    border-top: 1px solid rgba(255, 140, 66, 0.25);
}

/* Kontakt Section - gleiche Hintergrundfarbe wie Footer */
#kontakt {
    background: rgba(6, 7, 12, 0.95) !important;
    transition: background-color 0.3s ease;
}

[data-theme="light"] #kontakt {
    background: rgba(255, 245, 235, 0.98) !important;
}

.footer-content {
    display: grid;
    gap: 0.75rem;
    align-items: center;
    justify-items: start;
    padding: 0.5rem 0;
    min-height: auto;
}

.footer-content:empty {
    padding: 0;
    min-height: 0;
}

.footer-links {
    display: flex;
    gap: 1.5rem;
    color: rgba(247, 249, 255, 0.65);
}

.footer-meta {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    color: inherit;
    text-decoration: none;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--yellow-gradient-brand);
    color: var(--accent-ink);
    font-weight: 700;
    font-size: 0.95rem;
}

.brand-text {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: 0.06em;
}

/* Modern Filled Tabs */
.modern-tabs {
    background: transparent;
    padding: 2rem 0;
}

.modern-tabs .nav-tabs {
    border: none;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.modern-tabs .nav-link {
    border: none;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-weight: 500;
    color: var(--text-tertiary);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    transition: all 0.3s ease;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
}

.modern-tabs .nav-link:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--accent);
    border-color: var(--yellow-rgba-35);
}

.modern-tabs .nav-link.active {
    background: var(--yellow-gradient-main);
    color: var(--accent-ink);
    border-color: transparent;
    font-weight: 600;
}

/* Content Animation */
.tab-pane.fade {
    transition: all 0.2s ease-out;
}

.tab-pane.fade.show {
    animation: fadeIn 0.5s ease-out;
}

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

/* Kontakt Section */
.contact-card {
    transition: transform .2s, box-shadow .2s;
}

.contact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, .4);
}

.contact-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.contact-link {
    color: var(--text-tertiary);
    text-decoration: none;
    transition: color .2s, transform .2s;
    display: inline-block;
}

.contact-link:hover {
    color: var(--accent);
    transform: translateX(4px);
}

.social-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    color: var(--text-tertiary);
    transition: all .3s ease;
    text-decoration: none;
}

.social-link:hover {
    background: var(--yellow-rgba-15);
    border-color: var(--yellow-rgba-35);
    color: var(--accent);
    transform: translateY(-2px);
}

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

.contact-info-link {
    color: var(--text-main);
    text-decoration: none;
    transition: color .2s;
}

.contact-info-link:hover {
    color: var(--accent);
}

/* Theme Switch Button */
.theme-switch {
    background: transparent;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-tertiary);
    padding: 0;
}

.theme-switch:hover {
    background: rgba(255,255,255,.12);
    border-color: var(--accent);
    color: var(--accent);
    transform: rotate(15deg);
}

[data-theme="light"] .theme-switch {
    border-color: var(--yellow-rgba-35);
    color: var(--text-tertiary);
}

[data-theme="light"] .theme-switch:hover {
    background: var(--yellow-rgba-15);
    border-color: var(--accent);
    color: var(--accent);
}

.theme-switch svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.theme-switch:hover svg {
    transform: scale(1.1);
}