/* styles.css */

/* Farb- und Layoutvariablen */
:root{
    --primary:#0d6efd;
    --muted:#6c757d;
    --card-bg:#ffffff;
    --page-bg:#f7f9fc;
}

/* Grundlegendes */
html,body{
    height:100%;
    background-color:var(--page-bg);
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
    color:#212529;
    margin:0;
    padding:0;
}

/* Header Hero */
.hero {
    background: linear-gradient(90deg, rgba(13,110,253,0.95), rgba(2,48,71,0.95));
    color: #fff;
    padding: 4rem 0;
    text-align:center;
}
.hero h1 { font-weight:700; letter-spacing: -0.5px; margin-bottom:0.5rem; }
.hero p.lead { font-size:1.125rem; opacity:0.95; }

/* Portrait */
.portrait {
    max-width:220px;
    box-shadow: 0 8px 24px rgba(2,6,23,0.12);
}

/* Skill cards */
.skill-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 6px 18px rgba(16,24,40,0.06);
    height:100%;
    display:flex;
    align-items:flex-start;
}
.skill-icon {
    width:56px;
    height:56px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#eef6ff;
    color:var(--primary);
    font-weight:700;
    margin-right:0.75rem;
    flex-shrink:0;
}

/* Projekte */
.project {
    background:#fff;
    border-radius:10px;
    padding:1rem;
    box-shadow: 0 4px 12px rgba(16,24,40,0.04);
    margin-bottom:1rem;
}

/* Kontaktbereich */
.contact-card {
    background:#fff;
    border-radius:10px;
    padding:1rem;
    box-shadow: 0 6px 18px rgba(16,24,40,0.04);
}

/* Footer */
footer { background:#0b1220; color:#cfe3ff; padding:1rem 0; }

/* Responsive Feinheiten */
@media (max-width: 767px) {
    .hero { padding: 2.5rem 1rem; }
    .skill-icon { width:48px; height:48px; }
}