body { background: #f7f9fb; color: #1f2937; }
.container { max-width: 1100px; margin: 16px auto; }
.small-nav { position: sticky; top: 0; z-index: 1030; }
.navbar { --brand-color:#1a73e8; --brand-bg: linear-gradient(135deg, #eef4ff, #e6f0ff); }
.navbar.bg-white { background: var(--brand-bg) !important; border-bottom: 1px solid #dbe4ff !important; }
.navbar .navbar-brand img { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.06)); }
.navbar .navbar-brand { padding-top: .25rem; padding-bottom: .25rem; }
.navbar .nav-link { padding-top: .5rem; padding-bottom: .5rem; }
.navbar .nav-link { color:#274060; font-weight:500; }
.navbar .nav-link:hover { color:#0f172a; }
.navbar .dropdown-menu { border-color:#e5e7eb; box-shadow: 0 10px 24px rgba(16,24,40,0.08); }

/* Header Banner */
.header-banner { width:100%; line-height:0; position:relative; background:transparent; }
.header-banner-container { height:150px; padding-left:0; padding-right:0; display:flex; align-items:center; overflow:hidden; }
.header-banner-img { width:100%; height:150px; object-fit:cover; object-position:center; display:block; border-radius:8px; transition:opacity .3s ease; }
.header-banner-contain { position:relative; }
.header-banner-contain .header-banner-blur { position:absolute; inset:0; background-size:cover; background-position:center; filter:blur(18px) brightness(0.9); transform:scale(1.1); }
.header-banner-contain .header-banner-container { position:relative; z-index:2; justify-content:center; }
.header-banner-contain .header-banner-img.contain-mode { object-fit:contain; background:transparent; width:auto; max-width:100%; height:calc(var(--hdr-h)); }
.header-user-controls { position:absolute; top:10px; right:14px; z-index:5; padding:4px 10px; background:rgba(15,23,42,0.35); border:1px solid rgba(255,255,255,0.25); border-radius:48px; backdrop-filter: blur(6px) brightness(1.15); -webkit-backdrop-filter: blur(6px) brightness(1.15); box-shadow:0 4px 16px rgba(0,0,0,0.25); }
.header-user-controls .btn { --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .75rem; }
.header-user-controls .avatar { border:2px solid rgba(255,255,255,0.65); box-shadow:0 2px 6px rgba(0,0,0,0.25); }
.header-user-controls .avatar.admin { background:#fcd34d; }
.header-user-controls .avatar.employee { background:#e2e8f0; }
.header-banner-contain .edge-fade {
	/* Reduzierter Fade: größere scharfe Fläche, schmalerer Übergang zum Blur */
	-webkit-mask-image: radial-gradient(circle at center,
		rgba(0,0,0,1) 68%,
		rgba(0,0,0,0.85) 78%,
		rgba(0,0,0,0.55) 86%,
		rgba(0,0,0,0.15) 93%,
		rgba(0,0,0,0) 100%);
	mask-image: radial-gradient(circle at center,
		rgba(0,0,0,1) 68%,
		rgba(0,0,0,0.85) 78%,
		rgba(0,0,0,0.55) 86%,
		rgba(0,0,0,0.15) 93%,
		rgba(0,0,0,0) 100%);
	/* Alternative (linear) weiterhin möglich – bei Bedarf aktivieren */
}
.header-banner-img { width:100%; height:150px; display:block; object-fit:cover; object-position:center; border-radius:8px; }
@media (max-width: 768px) { .header-banner-inner { height:150px; } .header-banner-img { height:150px; } }
.navbar.banner-active { margin-top:0; }
.navbar.no-shadow { box-shadow:none !important; }
.navbar.bg-transparent { background:rgba(255,255,255,0.0) !important; }

.hero { background: linear-gradient(135deg, #1a73e8, #5b9cf3); padding-top: 0.25rem; padding-bottom: 0.25rem; color: #0f172a; }
.hero .lead { color: #0f172a; }
.hero.hero-with-image { background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; color:#fff; }
.hero.hero-with-image h1, .hero.hero-with-image .lead { color:#fff; text-shadow: 0 2px 4px rgba(0,0,0,0.25); }
.hero .hero-overlay { position:absolute; inset:0; background: linear-gradient(135deg, rgba(26,115,232,0.65), rgba(0,0,0,0.55)); mix-blend-mode: multiply; }

.card { border-radius: 12px; border: 1px solid #e2e8f0; transition: transform .12s ease, box-shadow .12s ease; background:#ffffff; }
.card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(16,24,40,0.07); }
.course-card .card-title { font-weight:600; font-size: 1rem; margin-bottom:.35rem; }
.course-card .card-body { padding: .85rem .9rem 1rem; }
.course-card .card-text { font-size:.78rem; line-height:1.15rem; }
.course-card .progress { height:6px; }
.course-card .badge { font-size:.6rem; padding:.25rem .45rem; }

.badge.bg-secondary { background-color: #9aa4b2 !important; }
.progress { background-color: #e9eef5; }
.progress-bar.bg-success { background-color: #16a34a !important; }

.navbar-brand { font-weight: 600 }
footer { background: #fff; }

/* Header hero background */
/* (zurückgebauter) bildbasierter Header wurde entfernt */

/* Course icons */
.icon-circle { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background:#eef2ff; }
.course-icon svg { display:block; }

/* Admin styles */
.card .card-title { font-weight: 600; }
.table thead th { font-weight: 600; color: #475569; }
.table td, .table th { vertical-align: middle; }
.card a { color: inherit; }
.card a:hover { color: inherit; }

/* Avatar */
.avatar { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; color:#0f172a; font-weight:700; font-size:0.95rem; border:1px solid rgba(0,0,0,0.08); }
.avatar.employee { background:#e2e8f0; }
.avatar.admin { background:#fde68a; }

/* Polished header spacing */
.navbar .dropdown-menu { box-shadow: 0 10px 24px rgba(16,24,40,0.08); border:1px solid #e5e7eb; }
.navbar .nav-link { color:#334155; }
.navbar .nav-link:hover { color:#0f172a; }

/* Hero heading: normaler Zeilenumbruch ohne Ellipsis */
.hero h1 { white-space: normal; overflow: visible; text-overflow: clip; }

/* Avatar Hover-Ring/Outline */
.avatar { transition: box-shadow .15s ease, transform .05s ease; }
.avatar:hover { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25); }
.nav-link:focus .avatar, .nav-link:focus-visible .avatar { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35); }