/* SilberBrise – Modern Design (Template.Web) */
:root {
    --yellow-accent: #F6B352;
    --yellow-accent-strong: #f4982d;
    --yellow-accent-ink: #1E1E1E;
    --yellow-hover-light: #f8c472;
    --yellow-hover-medium: #f6a735;
    --yellow-active: #d4881f;
    --yellow-rgba-12: rgba(246, 179, 82, 0.12);
    --yellow-rgba-15: rgba(246, 179, 82, 0.15);
    --yellow-rgba-18: rgba(246, 179, 82, 0.18);
    --yellow-rgba-30: rgba(246, 179, 82, 0.3);
    --yellow-rgba-35: rgba(246, 179, 82, 0.35);
    --yellow-rgba-50: rgba(246, 179, 82, 0.5);
    --yellow-rgba-60: rgba(246, 179, 82, 0.6);
    --yellow-rgba-90: rgba(246, 179, 82, 0.9);
    --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-brand: radial-gradient(circle at 30% 30%, var(--yellow-accent) 0%, var(--yellow-accent-strong) 60%, #c95c0c 100%);
}

:root {
    --accent: var(--yellow-accent);
    --accent-strong: var(--yellow-accent-strong);
    --accent-ink: var(--yellow-accent-ink);
    --bg-deep: #0a0d18;
    --bg-surface: #0f1524;
    --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);
}

[data-theme="light"] {
    --accent: var(--yellow-accent);
    --accent-strong: var(--yellow-accent-strong);
    --accent-ink: #FFFFFF;
    --bg-deep: #FFF5E8;
    --bg-surface: #FFFFFF;
    --surface-subtle: #FFEED9;
    --text-main: #1F1209;
    --text-tertiary: #4A2E1F;
    --glass: var(--yellow-rgba-12);
    --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, 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; }

.bg-deep { background: var(--bg-deep) !important; }
.bg-surface { background: var(--bg-surface) !important; }
.text-accent { color: var(--accent) !important; }
.text-muted { color: var(--text-tertiary) !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; }
.glass { background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--shadow); }

.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);
}
[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); }

.btn-warning {
    --bs-btn-color: var(--accent-ink);
    background: var(--yellow-gradient-main) !important;
    border: none !important;
    transition: all 0.3s ease;
}
.btn-warning:hover { background: var(--yellow-gradient-hover) !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;
}
[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;
}

.hero-section {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    background: rgba(8,10,20,.98) !important;
    backdrop-filter: saturate(120%) blur(10px);
    isolation: isolate;
}
.hero-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.light-orb {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.08), transparent 70%);
    filter: blur(80px);
    opacity: 0.7;
    animation: moveOrb 20s ease-in-out infinite;
}
@keyframes moveOrb { 0% { transform: translate(10%,10%); } 100% { transform: translate(50%,-20%); } }
.hero-section .container { position: relative; z-index: 10; }

.brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 600;
    font-size: 1.1rem;
    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;
}

/* Template Gallery Cards */
.galerie-card {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 1rem;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.galerie-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    color: inherit;
}
[data-theme="light"] .galerie-card {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--yellow-rgba-12);
}
.galerie-card-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: var(--surface-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
}
.galerie-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Mit cover wird sonst zentriert beschnitten – Vorschaubilder (z. B. Logos oben) bleiben oben sichtbar. */
    object-position: top center;
    transform-origin: top center;
    transition: transform 0.3s ease;
}
.galerie-card:hover .galerie-card-image img { transform: scale(1.05); }
.galerie-card-body { padding: 1.25rem; flex-grow: 1; display: flex; flex-direction: column; }
.galerie-card-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.5rem; }
.galerie-card-desc { font-size: 0.9rem; color: var(--text-tertiary); margin-bottom: 1rem; flex-grow: 1; }
.galerie-card-btn { margin-top: auto; }

.section-full { min-height: 50vh; 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;
}
.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); } }

.site-footer {
    background: rgba(6, 7, 12, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.5rem 0;
    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);
}

.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); color: var(--accent); }