/**
 * Lerncampus – Basis-Stylesheet (wird von app.css überschrieben wenn beide geladen)
 * Enthält Grid, Buttons, Forms als Fallback ohne app.css.
 */

:root {
    --color-primary:       #9e1623;
    --color-primary-dark:  #6e0b14;
    --color-primary-light: #fdf0f1;
    --color-secondary:     #c73e23;
    --color-accent:        #f18700;
    --color-accent-light:  #fff4e0;
    --color-success:       #059669;
    --color-success-light: #ecfdf5;
    --color-danger:        #dc2626;
    --color-danger-light:  #fef2f2;
    --color-warning:       #d97706;
    --color-warning-light: #fffbeb;
    --color-background:    #f1f3f7;
    --color-card:          #ffffff;
    --color-border:        #e2e8f0;
    --color-text-dark:     #0d1117;
    --color-text-muted:    #5a6a7e;

    --spacing-xs:  .25rem;
    --spacing-sm:  .5rem;
    --spacing-md:  1rem;
    --spacing-lg:  1.5rem;
    --spacing-xl:  2rem;

    --border-radius-sm: 6px;
    --border-radius-md: 10px;
    --border-radius-lg: 16px;

    --shadow-sm: 0 2px 8px rgba(0,0,0,.07);
    --shadow-md: 0 8px 24px rgba(0,0,0,.09);
    --shadow-lg: 0 20px 48px rgba(0,0,0,.12);

    --font-sans: 'Inter', 'Outfit', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

body {
    font-family: var(--font-sans);
    background: var(--color-background);
    color: var(--color-text-dark);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color:var(--color-primary); text-decoration:none; transition:color .18s; }
a:hover { color:var(--color-primary-dark); }

h1,h2,h3,h4,h5,h6 {
    color:var(--color-text-dark); font-weight:700;
    letter-spacing:-.02em; margin-bottom:var(--spacing-sm);
}

.container {
    width:100%; max-width:1320px;
    margin:0 auto; padding:0 var(--spacing-lg);
}

.row { display:flex; flex-wrap:wrap; margin:0 calc(-1 * var(--spacing-sm)); }
.col-12{width:100%;padding:0 var(--spacing-sm)}
.col-8 {width:66.666%;padding:0 var(--spacing-sm)}
.col-6 {width:50%;padding:0 var(--spacing-sm)}
.col-4 {width:33.333%;padding:0 var(--spacing-sm)}
.col-3 {width:25%;padding:0 var(--spacing-sm)}

@media(max-width:768px){
    .col-8,.col-6,.col-4,.col-3{width:100%;margin-bottom:var(--spacing-md)}
}

/* Buttons */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--font-sans); font-weight:600; font-size:.9rem;
    padding:.6rem 1.4rem; border-radius:var(--border-radius-md);
    border:1.5px solid transparent; cursor:pointer;
    transition:all .22s ease; white-space:nowrap;
}
.btn:hover { transform:translateY(-1px); }
.btn:active { transform:translateY(1px); }

.btn-primary {
    background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);
    color:#fff; box-shadow:0 4px 14px rgba(158,22,35,.3);
}
.btn-primary:hover { box-shadow:0 6px 20px rgba(158,22,35,.4); color:#fff; }

.btn-secondary {
    background:#fff; border-color:var(--color-border); color:var(--color-text-dark);
}
.btn-secondary:hover { background:var(--color-primary-light); border-color:rgba(158,22,35,.3); color:var(--color-primary); }

.btn-success { background:linear-gradient(135deg,var(--color-success) 0%,#047857 100%); color:#fff; }
.btn-danger  { background:linear-gradient(135deg,var(--color-danger) 0%,#b91c1c 100%); color:#fff; }

.btn-sm { padding:.38rem .9rem; font-size:.8rem; border-radius:var(--border-radius-sm); }
.btn-block { width:100%; display:flex; }

/* Forms */
label { display:block; font-weight:600; margin-bottom:.35rem; font-size:.85rem; }

input[type="text"], input[type="email"], input[type="password"],
select, textarea {
    width:100%; padding:.65rem 1rem;
    border:1.5px solid var(--color-border);
    border-radius:var(--border-radius-md);
    font-family:var(--font-sans); font-size:.93rem;
    color:var(--color-text-dark); background:#fff;
    transition:border-color .18s, box-shadow .18s;
}
input:focus, select:focus, textarea:focus {
    outline:none; border-color:var(--color-primary);
    box-shadow:0 0 0 4px rgba(158,22,35,.12);
}

/* Alerts */
.alert {
    padding:var(--spacing-md) var(--spacing-lg);
    border-radius:var(--border-radius-md);
    font-size:.9rem; margin-bottom:var(--spacing-md);
    border:1.5px solid transparent;
    display:flex; align-items:center; gap:12px;
}
.alert-danger  { background:var(--color-danger-light);  color:#991b1b; border-color:rgba(220,38,38,.25); }
.alert-success { background:var(--color-success-light); color:#065f46; border-color:rgba(5,150,105,.25); }
.alert-warning { background:var(--color-warning-light); color:#92400e; border-color:rgba(217,119,6,.25); }

/* Cards */
.card {
    background:var(--color-card);
    border-radius:var(--border-radius-lg);
    box-shadow:var(--shadow-sm);
    border:1px solid var(--color-border);
    padding:var(--spacing-lg);
    margin-bottom:var(--spacing-lg);
    transition:box-shadow .3s, border-color .3s;
    position:relative; overflow:hidden;
}
.card:hover { box-shadow:var(--shadow-md); border-color:rgba(158,22,35,.18); }
.card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,var(--color-primary),var(--color-secondary),var(--color-accent));
    opacity:0; transition:opacity .3s;
}
.card:hover::before { opacity:1; }

.card-title {
    font-size:1.1rem; font-weight:700;
    border-bottom:1px solid var(--color-border);
    padding-bottom:var(--spacing-sm); margin-bottom:var(--spacing-md);
}

/* Badges */
.badge {
    display:inline-flex; padding:.25rem .75rem;
    font-size:.72rem; font-weight:700;
    border-radius:9999px; text-transform:uppercase; letter-spacing:.07em;
}
.badge-success { background:#ecfdf5; color:#047857; }
.badge-danger  { background:#fef2f2; color:#dc2626; }
.badge-warning { background:#fffbeb; color:#d97706; }
.badge-info    { background:#eff6ff; color:#2563eb; }

/* Tables */
.table-responsive {
    width:100%; overflow-x:auto;
    border-radius:var(--border-radius-lg);
    border:1px solid var(--color-border);
    background:#fff; box-shadow:var(--shadow-sm);
}
.table { width:100%; border-collapse:collapse; }
.table th {
    background:linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%);
    color:var(--color-text-dark); font-weight:700;
    font-size:.75rem; text-transform:uppercase; letter-spacing:.07em;
    padding:.85rem var(--spacing-lg); text-align:left;
    border-bottom:2px solid var(--color-border);
}
.table td {
    padding:.85rem var(--spacing-lg);
    font-size:.9rem; border-bottom:1px solid var(--color-border);
}
.table tbody tr:nth-child(even) { background:#fafbfc; }
.table tbody tr:hover { background:var(--color-primary-light) !important; }

/* Layout */
.app-wrapper { display:flex; min-height:100vh; }

.sidebar {
    width:280px;
    background:linear-gradient(175deg,#1a0408 0%,#2d0a10 100%);
    color:#fff; padding:var(--spacing-lg) 0;
    display:flex; flex-direction:column;
}
.sidebar-brand {
    padding:0 var(--spacing-lg); margin-bottom:var(--spacing-xl);
    font-size:1.2rem; font-weight:700;
    display:flex; align-items:center; gap:10px;
}
.sidebar-menu { list-style:none; flex-grow:1; }
.sidebar-item a {
    display:flex; align-items:center; gap:12px;
    padding:.7rem var(--spacing-lg);
    color:rgba(255,255,255,.65); font-weight:500;
    border-radius:var(--border-radius-md);
    transition:all .22s ease; margin-bottom:2px;
}
.sidebar-item a:hover,
.sidebar-item.active a {
    color:#fff;
    background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);
}
.sidebar-footer { padding:0 var(--spacing-lg); font-size:.8rem; color:rgba(255,255,255,.35); }

.main-content { flex-grow:1; display:flex; flex-direction:column; }

.navbar {
    background:#fff; border-bottom:2px solid var(--color-border);
    border-top:3px solid var(--color-primary);
    height:68px; display:flex; align-items:center;
    justify-content:space-between; padding:0 var(--spacing-lg);
    box-shadow:0 2px 12px rgba(0,0,0,.05);
}
.navbar-user { display:flex; align-items:center; gap:var(--spacing-md); }

.user-avatar {
    width:40px; height:40px; border-radius:9999px;
    background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:.9rem;
}

.content-body { padding:var(--spacing-xl); flex-grow:1; }

@media(max-width:992px) {
    .app-wrapper { flex-direction:column; }
    .sidebar { width:100%; padding:var(--spacing-md) 0; }
}

@media print {
    .sidebar,.navbar,.btn,.demo-login-box,.auth-divider { display:none !important; }
    body { background:#fff !important; color:#000 !important; }
    .card { border:none !important; box-shadow:none !important; padding:0 !important; }
    .table th { background:#f1f5f9 !important; color:#000 !important; -webkit-print-color-adjust:exact; }
}