/* Gemeinsames Design aller Büro-Apps – Richtung "Signal & Werkstatt".
   Wird von nginx auf jeder Adresse unter /_design/ ausgeliefert. */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@600;700&display=swap');

:root{
  --sv-ink:#1B1F27;
  --sv-steel:#3D4C5C;
  --sv-steel-2:#5B6E82;
  --sv-muted:#4E5B69;
  --sv-ground:#E9EDEF;
  --sv-card:#FFFFFF;
  --sv-field:#F6F8F9;
  --sv-line:#C3CBD1;
  --sv-signal:#E8622C;       /* Akzent, Streifen, auf dunklem Grund */
  --sv-signal-dark:#C74E1F;  /* Knöpfe mit weißer Schrift (Kontrast) */
  --sv-signal-soft:#FCE3D6;
  --sv-ok:#1F5A53;
  --sv-ok-soft:#DDEEE9;
  --sv-danger:#7A2E1B;
  --sv-plate:#003399;
  --sv-font:'Barlow','Segoe UI',system-ui,sans-serif;
  --sv-font-display:'Barlow Condensed','Arial Narrow',sans-serif;
  --sv-radius:4px;
}

/* ---------- Gemeinsame Kopfleiste (wird von kopf.js eingefügt) ---------- */
.sv-kopf{background:var(--sv-ink);color:#fff;border-bottom:4px solid var(--sv-signal);font-family:var(--sv-font);
  position:relative;z-index:30;}
.sv-kopf-innen{padding:8px 16px;padding-top:max(8px, env(safe-area-inset-top));display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;}
.sv-kopf .sv-logo{background:#fff;border-radius:var(--sv-radius);padding:3px 7px;display:flex;align-items:center;flex:0 0 auto;}
.sv-kopf .sv-logo img{height:40px;width:auto;display:block;}
.sv-kopf .sv-apps{display:flex;gap:4px;flex:1 1 auto;overflow-x:auto;scrollbar-width:none;
  font-family:var(--sv-font-display);text-transform:uppercase;letter-spacing:.06em;}
.sv-kopf .sv-apps::-webkit-scrollbar{display:none;}
.sv-kopf .sv-apps a{padding:9px 12px;border-radius:var(--sv-radius);color:#D4D9DE;text-decoration:none;font-weight:600;font-size:16px;white-space:nowrap;line-height:1.2;}
.sv-kopf .sv-apps a:hover{background:rgba(255,255,255,.08);color:#fff;}
.sv-kopf .sv-apps a[aria-current="page"]{background:var(--sv-signal);color:var(--sv-ink);font-weight:700;}
.sv-kopf .sv-user{display:flex;align-items:center;gap:10px;flex:0 0 auto;font-size:14px;font-weight:600;}
.sv-kopf .sv-ini{width:30px;height:30px;border-radius:var(--sv-radius);background:var(--sv-steel);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;}
.sv-kopf .sv-abmelden{color:#fff;text-decoration:none;border:1px solid var(--sv-steel-2);border-radius:var(--sv-radius);padding:7px 10px;font-weight:600;font-size:13px;}
.sv-kopf .sv-abmelden:hover{background:rgba(255,255,255,.08);}
.sv-kopf .sv-user[hidden]{display:none;}

@media (max-width:1000px){
  .sv-kopf .sv-name{display:none;}
  .sv-kopf .sv-logo img{height:34px;}
}
@media (max-width:640px){
  .sv-kopf-innen{padding:6px 10px;padding-top:max(6px, env(safe-area-inset-top));}
  .sv-kopf .sv-logo img{height:30px;}
  .sv-kopf .sv-user{margin-left:auto;}
  .sv-kopf .sv-apps{order:3;flex:1 1 100%;margin:0 -4px;justify-content:space-between;}
  .sv-kopf .sv-apps a{font-size:15px;padding:8px 9px;}
  /* "Übersicht" erreicht man auf dem Handy über das Logo */
  .sv-kopf .sv-apps a:first-child{display:none;}
}
@media print{ .sv-kopf{display:none !important;} }

/* ---------- Bausteine für einfache Seiten (Dashboard, Anmeldung) ---------- */
.sv-btn{font:inherit;font-weight:600;font-size:16px;border-radius:var(--sv-radius);padding:10px 16px;min-height:44px;cursor:pointer;
  border:1px solid var(--sv-line);background:var(--sv-card);color:var(--sv-ink);}
.sv-btn-primary{background:var(--sv-signal-dark);border-color:var(--sv-signal-dark);color:#fff;font-weight:700;}
.sv-plate{display:inline-flex;align-items:stretch;border:2px solid var(--sv-ink);border-radius:var(--sv-radius);overflow:hidden;background:#fff;
  font-family:var(--sv-font-display);font-weight:700;letter-spacing:.06em;color:var(--sv-ink);}
.sv-plate::before{content:"";background:var(--sv-plate);width:12px;flex-shrink:0;}
.sv-plate > span{padding:1px 8px;}