/* PFA Schuelerakten-Portal — schlankes, serverseitig gerendertes UI. */
* { box-sizing: border-box; }
body {
  font-family: system-ui, -apple-system, Arial, sans-serif;
  margin: 0; background: #f4f6f8; color: #1a1a1a;
}
.topbar {
  background: #0b3d5c; color: #fff; padding: 12px 20px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.topbar .brand { font-weight: 600; font-size: 17px; }
.topbar .tag { font-size: 12px; opacity: .8; font-weight: 400; }
.topbar nav { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.topbar nav a { color: #cfe3f0; text-decoration: none; font-size: 14px; }
.topbar nav a:hover { text-decoration: underline; }
.topbar .who { font-size: 12px; opacity: .85; }
main { max-width: 960px; margin: 22px auto; padding: 0 16px; }
.card {
  background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.08);
  padding: 18px 20px; margin-bottom: 18px;
}
.card.narrow { max-width: 420px; margin-left: auto; margin-right: auto; }
h1 { font-size: 20px; margin: 4px 0 10px; }
h2 { font-size: 16px; margin: 4px 0 10px; }
a { color: #0b6; }
.muted { color: #7a8a96; font-size: 13px; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 9px 11px; border-bottom: 1px solid #eef1f4; text-align: left; font-size: 14px; vertical-align: top; }
th { background: #eef3f7; font-weight: 600; }
td.c, th.c { text-align: center; }
.ok { color: #1a9e3b; font-weight: 700; }
.miss { color: #cc2b2b; font-weight: 600; }
.opt { color: #7a8a96; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.pill.full { background: #dff5e4; color: #1a7d33; }
.pill.part { background: #fdeccd; color: #9a6b00; }
.btn {
  display: inline-block; background: #0b3d5c; color: #fff; border: 0;
  padding: 9px 16px; border-radius: 6px; cursor: pointer; text-decoration: none; font-size: 14px;
}
.btn:hover { background: #0d4a70; }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn.ghost { background: transparent; border: 1px solid #cfe3f0; color: #fff; }
.btn.ghost.sm { padding: 4px 10px; }
.field { margin: 12px 0; }
.field label { display: block; font-size: 13px; color: #5a6b77; margin-bottom: 4px; }
.field input { width: 100%; padding: 9px; border: 1px solid #ccd3da; border-radius: 6px; font-size: 14px; }
form.inline { display: inline; }
.upform { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.upform input[type=file] { font-size: 12px; max-width: 190px; }
.alert { background: #fde8e8; color: #a12020; padding: 9px 12px; border-radius: 6px; font-size: 14px; }
.consent-box {
  background: #f7f9fb; border: 1px dashed #c3ced6; border-radius: 6px;
  padding: 12px; font-size: 13px; color: #44525c; margin: 10px 0;
}
.check { display: block; margin: 12px 0; font-size: 14px; }
table.docs th:last-child, table.docs td:last-child { width: 230px; }
.foot { text-align: center; color: #9aa7b1; font-size: 12px; padding: 18px; }