/* --- emPhone-Portal – Medical Light Theme --- */
:root{
    --bg:#f6f8fb;            /* Seitenhintergrund */
    --surface:#ffffff;        /* Karten / Flächen */
    --text:#0b1a2b;           /* Grundtext */
    --muted:#516078;          /* Sekundärtext */
    --primary:#1565c0;        /* Medizin-Blau */
    --primary-2:#0d47a1;      /* Dunkleres Blau */
    --accent:#0ea5e9;         /* Cyan-Akzent (Links/Hover) */
    --ok:#2e7d32;             /* Grün OK */
    --danger:#c62828;         /* Notruf Rot */
    --border:#d9e1ec;         /* Rahmen */
    --radius:14px;
    --focus: 0 0 0 3px rgba(21,101,192,.18); /* Fokus-Ring */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Layout */
.container{max-width:1040px;margin:28px auto;padding:0 18px}

/* Topbar */
.topbar{
    display:flex;justify-content:space-between;align-items:center;
    padding:12px 18px;background:#ffffff;
    border-bottom:1px solid var(--border);
    position:sticky;top:0;z-index:50;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;color:var(--primary)}
.brand img{height:22px;width:22px}
.topbar nav a{
    margin-left:12px;text-decoration:none;
    color:var(--muted);padding:8px 10px;border-radius:10px
}
.topbar nav a:hover{color:var(--primary);background:#f0f6ff}
.topbar nav .btn{color:#fff}

/* Cards & Sections */
.card{
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius);padding:18px;box-shadow:0 2px 10px rgba(13,71,161,.06)
}

/* Forms */
form.card label{display:grid;gap:6px;margin-bottom:12px}
input,select,textarea{
    background:#fff;color:var(--text);
    border:1px solid var(--border);border-radius:10px;padding:10px 12px;
    outline:none; transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:var(--focus)}
textarea{min-height:90px}

/* Buttons */
.btn{
    display:inline-block;padding:10px 14px;border-radius:12px;
    border:1px solid var(--primary-2);background:var(--primary);color:#fff;text-decoration:none;
    font-weight:600; cursor:pointer;
}
.btn:hover{background:var(--primary-2)}
.btn.ghost{background:#fff;color:var(--primary);border-color:var(--primary)}
.btn.ghost:hover{background:#f0f6ff}
.btn.danger{background:var(--danger);border-color:#8e1d1d}
.btn.danger:hover{background:#b71c1c}

/* Tables */
.table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff}
.table th,.table td{padding:11px 12px;border-bottom:1px solid var(--border)}
.table th{background:#f6f9ff;text-align:left;color:#2b3b55;font-weight:700}
.table tr:last-child td{border-bottom:0}

/* Alerts */
.alert{
    padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:#fff;margin:12px 0
}
.alert.ok{border-color:#cfe8d2;background:#f2fbf3;color:var(--ok)}
.alert.error{border-color:#f3c1c1;background:#fff5f5;color:var(--danger)}

/* Footer */
.footer{border-top:1px solid var(--border);padding:16px 18px;color:var(--muted);text-align:center;background:#fff;margin-top:24px}

/* Links */
a{color:var(--accent)}
a:hover{opacity:.9}

/* Accessibility */
:focus-visible{outline:none;box-shadow:var(--focus)}
@media (prefers-reduced-motion: reduce){
    *{animation:none!important;transition:none!important}
}

/* Small screens */
@media (max-width:640px){
    .topbar nav a{margin-left:6px}
}

.le-row{display:flex;gap:8px;align-items:center;margin:6px 0}
.le-row .le-input{flex:1}
.chip{
    display:inline-flex;align-items:center;gap:6px;
    padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:#fff;
    margin:4px 6px 0 0;
}
.chip .chip-del{
    border:0;background:transparent;cursor:pointer;color:var(--danger);font-weight:700;font-size:16px;line-height:1;
}
a.btn, button.btn {
    display:inline-block;
    padding:6px 12px;
    font-size:14px;
    line-height:1.4;
    border-radius:4px;
    border:1px solid var(--border);
    background:var(--primary-bg,#f5f5f5);
    cursor:pointer;
    text-decoration:none;
    color:inherit;
}
button.btn { /* sorgt dafür, dass Buttons nicht kleiner sind */
    height:auto;
}
a.btn, button.btn { display:inline-block; padding:10px 14px; border-radius:12px; border:1px solid var(--border); text-decoration:none; }

/* Basis-Styling für alle Buttons */
a.btn, button.btn {
    display:inline-block;
    padding:8px 14px;
    font-size:14px;
    border-radius:6px;
    border:1px solid transparent;
    text-decoration:none;
    cursor:pointer;
    line-height:1.4;
}

/* Standard neutral (z. B. "Ansehen") */
a.btn {
    background:#f0f0f0;
    color:#222;
    border-color:#bbb;
}
a.btn:hover {
    background:#222;
    color:#fff;
    border-color:#222;
}

/* Löschen */
button.btn.danger {
    background:#c62828;
    color:#fff;
    border:1px solid #a52222;
}
button.btn.danger:hover {
    background:#a52222;
    border-color:#7a1a1a;
    color:#fff;
}

/* Primär-Buttons (Login, Registrieren, Upload etc.) */
a.btn.primary, button.btn.primary {
    background:#1976d2;
    border-color:#155a9c;
    color:#fff;
}
a.btn.primary:hover, button.btn.primary:hover {
    background:#155a9c;
    color:#fff;
}

/* Sekundär (z. B. einfacher neutraler Button, wenn gebraucht) */
a.btn.secondary, button.btn.secondary {
    background:#eee;
    border-color:#ccc;
    color:#222;
}
a.btn.secondary:hover, button.btn.secondary:hover {
    background:#ddd;
    color:#000;
}