@font-face{
  font-family:'Roboto';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('roboto-v51-latin-regular.woff2') format('woff2');
}
@font-face{
  font-family:'Roboto';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('roboto-v51-latin-500.woff2') format('woff2');
}
@font-face{
  font-family:'Roboto';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('roboto-v51-latin-700.woff2') format('woff2');
}

/* =====================================================================
   WBG Einheit Bautzen eG  —  Urlaubsverwaltung
   style.css  —  Responsives Design im Corporate Design der WBG

   Hausfarben (laut Design-Manual):
     Blau  RGB 0/105/180   -> #0069B4
     Gelb  RGB 255/203/0   -> #FFCB00
   Schrift: Arial (Vorgabe für Bürokommunikation / Bildschirm)
   ===================================================================== */

:root{
  --brand:#0069b4; --brand-dark:#00568f; --brand-soft:#e1edf7;
  --accent:#ffcb00; --accent-dark:#e6b800; --header:#003a63;
  --bg:#eef1f5; --card:#ffffff; --text:#1a2330; --muted:#586271;
  --border:#d3dbe6; --success:#1f7a44; --danger:#b3261e; --warn:#b45309;
  --radius:10px; --shadow:0 1px 4px rgba(16,24,40,.12),0 1px 2px rgba(16,24,40,.07);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:'Roboto',Arial,Helvetica,"Segoe UI",sans-serif;
  color:var(--text); background:var(--bg); line-height:1.5; font-size:16px;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.5rem; margin:0}
h2{font-size:1.15rem}

/* ---------- Logo & Marke ---------- */
/* Offizielles Logo: Datei "logo.svg" (oder logo.png) in den App-Ordner legen. */
.brand-logo{height:40px; width:auto; display:block}
.auth-logo .brand-logo{height:auto; width:100%; max-width:260px; margin:0 auto}
/* Ersatz-Wortmarke, falls (noch) kein Logo hinterlegt ist */
.brand-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:7px; background:var(--brand);
  color:#fff; font-weight:700; font-size:15px;
}
.brand-mark-lg{width:54px; height:54px; border-radius:14px; font-size:26px}

/* ---------- Kopfleiste / Navigation ---------- */
.topbar{position:sticky; top:0; z-index:50; background:var(--header);
  border-top:3px solid var(--accent); border-bottom:1px solid rgba(0,0,0,.25);
  box-shadow:0 2px 8px rgba(0,0,0,.18)}
.topbar-inner{
  max-width:1080px; margin:0 auto; padding:.6rem 1rem;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:700; color:#fff}
.brand:hover{text-decoration:none}
.mainnav{display:flex; align-items:center; gap:.25rem; margin-left:auto; flex-wrap:wrap}
.mainnav a{
  color:#eaf1f9; padding:.5rem .7rem; border-radius:8px; font-size:.95rem; font-weight:600;
}
.mainnav a:hover{background:rgba(255,255,255,.18); color:#fff; text-decoration:none}
.mainnav .count-pill{background:var(--accent); color:#1f2933}
.nav-user{color:rgba(255,255,255,.78) !important; font-size:.85rem !important; font-weight:400 !important}
.navtoggle{display:none}
.navtoggle-btn{display:none; margin-left:auto; font-size:1.5rem; cursor:pointer; padding:.2rem .6rem; user-select:none; color:#fff}

/* ---------- Layout ---------- */
.container{max-width:1080px; margin:0 auto; padding:1.25rem 1rem 3rem}
.footer{
  max-width:1080px; margin:0 auto; padding:1.5rem 1rem;
  color:var(--muted); font-size:.85rem; text-align:center;
}
.footer .claim{color:var(--brand); font-style:italic}
.page-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem}
.section-title{margin:1.8rem 0 .8rem; padding-bottom:.4rem; border-bottom:3px solid var(--accent)}
.muted{color:var(--muted)}
.small{font-size:.85rem}

/* ---------- Flash-Meldungen ---------- */
.flash{padding:.8rem 1rem; border-radius:var(--radius); margin-bottom:1rem; border:1px solid; font-size:.95rem}
.flash-info   {background:#eef2f7; border-color:#cfd9e6; color:#243b53}
.flash-erfolg {background:#e7f6ec; border-color:#b6e0c4; color:#1f7a44}
.flash-warnung{background:#fdf3e3; border-color:#f3d9a8; color:#92500c}
.flash-fehler {background:#fceceb; border-color:#f3bdb9; color:#9b211b}

/* ---------- Schaltflächen ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.6rem 1.1rem; border-radius:9px; border:1px solid transparent;
  font-size:.95rem; font-weight:700; cursor:pointer; background:#eef1f5; color:var(--text);
  transition:filter .12s, background .12s; line-height:1.2; text-decoration:none;
}
.btn:hover{text-decoration:none; filter:brightness(.97)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn-primary{background:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-dark)}
.btn-success{background:var(--success); color:#fff}
.btn-danger {background:var(--danger);  color:#fff}
.btn-ghost{background:#fff; border-color:var(--border); color:var(--text)}
.btn-ghost:hover{background:var(--bg)}
/* Akzent-Variante (gelb) für besondere Hervorhebungen, sparsam einsetzen */
.btn-accent{background:var(--accent); color:#1f2933}
.btn-accent:hover{background:var(--accent-dark)}
.btn-small{padding:.4rem .7rem; font-size:.85rem}
.btn-block{width:100%; margin-top:.4rem}

/* ---------- Anmelde-/Einrichtungsseiten ---------- */
.auth-body{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1.5rem}
.auth-card{
  background:var(--card); width:100%; max-width:400px; padding:2rem 1.75rem;
  border-radius:16px; box-shadow:var(--shadow); border:1px solid var(--border);
  border-top:4px solid var(--accent);
}
.auth-logo{text-align:center; margin-bottom:1rem}
.auth-title{text-align:center; font-size:1.4rem; margin:.25rem 0; color:var(--brand)}
.auth-sub{text-align:center; color:var(--muted); margin:0 0 1.25rem}
.auth-links{text-align:center; margin-top:1rem; font-size:.9rem}

/* ---------- Formulare ---------- */
.form-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.25rem; box-shadow:var(--shadow); margin-bottom:1rem}
label{display:block; font-weight:700; font-size:.9rem; margin-bottom:.9rem}
input[type=text],input[type=email],input[type=password],input[type=date],
input[type=number],input[type=file],select,textarea{
  display:block; width:100%; margin-top:.35rem; padding:.6rem .7rem;
  border:1px solid var(--border); border-radius:9px; font:inherit; color:var(--text);
  background:#fff; font-weight:400;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(0,105,180,.18);
}
textarea{resize:vertical}
.form-row{display:flex; gap:1rem; flex-wrap:wrap}
.form-row > label{flex:1 1 200px}
.check{display:flex; align-items:center; gap:.5rem; font-weight:500}
.check input{width:auto; margin:0}

/* ---------- Jahresauswahl ---------- */
.yearbar{display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin-bottom:1.25rem}
.yearbar-label{color:var(--muted); font-size:.9rem; margin-right:.25rem}
.yearbar-item{
  padding:.4rem .9rem; border-radius:999px; border:1px solid var(--border);
  background:#fff; color:var(--text); font-weight:700; font-size:.9rem;
}
.yearbar-item:hover{background:var(--brand-soft); text-decoration:none}
.yearbar-item.is-active{background:var(--brand); color:#fff; border-color:var(--brand)}

/* ---------- Saldo-Karten ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin-bottom:.75rem}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.1rem 1.2rem; box-shadow:var(--shadow); text-align:center}
.card-num{font-size:2rem; font-weight:700; line-height:1.1}
.card-cap{color:var(--muted); font-size:.85rem; margin-top:.3rem}
.card-rest{background:var(--brand); border-color:var(--brand)}
.card-rest .card-num{color:#fff}
.card-rest .card-cap{color:rgba(255,255,255,.85)}

/* ---------- Tabellen ---------- */
.table{width:100%; border-collapse:collapse; background:var(--card);
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.table th,.table td{padding:.75rem .9rem; text-align:left; border-bottom:1px solid var(--border); vertical-align:top}
.table th{background:var(--brand); font-size:.82rem; text-transform:uppercase; letter-spacing:.03em; color:#fff}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr:nth-child(even){background:#f5f8fc}
.table tbody tr:hover{background:#e8f1fb}
.row-inactive{opacity:.55}
.row-sum td{font-weight:700; background:#f1f6fb; border-top:2px solid var(--border)}
.cell-actions{white-space:nowrap; text-align:right}
.cell-actions form{display:inline}

/* ---------- Abzeichen (Status) ---------- */
.badge{display:inline-block; padding:.2rem .6rem; border-radius:999px; font-size:.78rem; font-weight:700}
.badge-offen{background:#fdf3e3; color:#92500c}
.badge-genehmigt{background:#e7f6ec; color:#1f7a44}
.badge-abgelehnt{background:#fceceb; color:#9b211b}
.badge-storniert{background:#eceef1; color:#5b6573}
.count-pill{display:inline-block; min-width:1.5rem; padding:.05rem .5rem; border-radius:999px;
  background:var(--brand); color:#fff; font-size:.85rem; font-weight:700; text-align:center}

/* ---------- Genehmigungs-Karten ---------- */
.approve-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.1rem 1.2rem; box-shadow:var(--shadow); margin-bottom:1rem}
.approve-card.is-focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(0,105,180,.2)}
.approve-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.approve-name{font-weight:700; font-size:1.05rem; margin-right:.5rem}
.approve-days{font-weight:700; color:var(--brand)}
.approve-meta{color:var(--muted); font-size:.9rem; margin:.35rem 0}
.approve-note{margin:.4rem 0 .2rem}
.approve-form{margin-top:.8rem; display:flex; flex-direction:column; gap:.7rem}
.approve-form input[type=text]{margin-top:0}
.approve-actions{display:flex; gap:.6rem; flex-wrap:wrap}

/* ---------- Live-Berechnungsfeld ---------- */
.calc-box{background:var(--brand-soft); border:1px solid #c3dcf0; border-radius:9px;
  padding:.8rem 1rem; margin:.25rem 0 1rem; font-size:1rem}
.calc-warn{color:var(--danger); font-weight:600}

/* ---------- Auslastungsbalken ---------- */
.bar{height:8px; background:#e9edf3; border-radius:999px; overflow:hidden; min-width:80px}
.bar-fill{height:100%; background:var(--brand); border-radius:999px}

/* ---------- Aufklapp-Box ---------- */
.add-box{margin-bottom:1.25rem}
.add-box > summary{display:inline-flex; list-style:none; margin-bottom:.25rem}
.add-box > summary::-webkit-details-marker{display:none}
.add-box > summary::marker{content:""}

/* =====================================================================
   MOBILE  (Handy)
   ===================================================================== */
@media (max-width:760px){
  .navtoggle-btn{display:block}
  .mainnav{
    display:none; width:100%; flex-direction:column; align-items:stretch; gap:.1rem;
    margin-left:0; padding-top:.5rem;
  }
  .navtoggle:checked ~ .mainnav{display:flex}
  .mainnav a{padding:.7rem .6rem; border-radius:8px}
  .nav-user{border-top:1px solid var(--border); margin-top:.3rem; padding-top:.7rem !important}

  .brand-logo{height:34px}
  h1{font-size:1.3rem}

  .table{border:none; box-shadow:none; background:transparent}
  .table thead{display:none}
  .table tbody tr,.table tfoot tr{
    display:block; background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:.8rem; padding:.4rem .9rem;
  }
  .table td{
    display:flex; justify-content:space-between; align-items:flex-start; gap:1rem;
    padding:.5rem 0; border-bottom:1px dashed var(--border); text-align:right;
  }
  .table tr td:last-child{border-bottom:none}
  .table td::before{
    content:attr(data-label); font-weight:700; color:var(--muted);
    text-align:left; flex:0 0 auto; text-transform:none; letter-spacing:0;
  }
  .table td[data-label=""]::before{content:""}
  .cell-actions{justify-content:flex-end}
  .row-sum td{background:transparent}

  .approve-actions .btn{flex:1}
}

/* =====================================================================
   TEAM-KALENDER
   ===================================================================== */
.cal-nav{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.9rem}
.cal-title{font-weight:700; font-size:1.1rem; color:var(--brand); margin:0 .3rem}
.cal-legend{display:flex; gap:1.2rem; flex-wrap:wrap; margin-bottom:.9rem; color:var(--muted); font-size:.85rem}
.cal-legend span{display:flex; align-items:center; gap:.4rem}
.lg{display:inline-block; width:16px; height:16px; border-radius:4px; border:1px solid var(--border)}
.lg-gen{background:var(--brand); border-color:var(--brand)}
.lg-off{background:repeating-linear-gradient(45deg,#cfe0f1,#cfe0f1 3px,#eaf2fa 3px,#eaf2fa 6px)}
.lg-we{background:#eef1f5}

.cal-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border);
  border-radius:var(--radius); background:#fff; box-shadow:var(--shadow)}
.cal{border-collapse:collapse; width:100%; font-size:.8rem}
.cal th,.cal td{border:1px solid #eef1f5; text-align:center; padding:0}
.cal .day-head{min-width:30px; padding:.3rem 0; background:#f7f9fc; color:var(--muted);
  font-weight:700; line-height:1.1}
.cal .day-head .d-wt{display:block; font-size:.62rem; font-weight:600}
.cal .day-head .d-num{display:block; font-size:.8rem; color:var(--text)}
.cal td{height:30px}
.cal .cal-name{position:sticky; left:0; z-index:2; background:#fff; text-align:left;
  padding:.4rem .7rem; min-width:150px; max-width:200px; font-weight:600; white-space:nowrap;
  border-right:2px solid var(--border)}
.cal thead .cal-name{background:#f1f6fb; z-index:3; color:var(--brand)}
.cal .we{background:#eef1f5}
.cal .on-gen{background:var(--brand)}
.cal .on-off{background:repeating-linear-gradient(45deg,#cfe0f1,#cfe0f1 4px,#eaf2fa 4px,#eaf2fa 8px)}
.cal .today{box-shadow:inset 0 0 0 2px var(--accent)}
.cal .day-head.today{background:#fff7da}
.cal-sum{min-width:38px; padding:.3rem .4rem; font-weight:700; background:#f7f9fc; color:var(--brand)}