/* =====================================================================
   PPP Media – Verfügbarkeiten & Einteilung
   ===================================================================== */

:root{
  --green:#43b97f;
  --teal:#16b5a8;
  --cyan:#24b4e9;
  --slate:#5b7c93;

  --ink:#0f172a;
  --ink-2:#334155;
  --muted:#64748b;
  --line:#e2e8f0;
  --line-2:#cbd5e1;
  --bg-card:#ffffff;
  --bg-soft:#f8fafc;

  --yes:#16a34a;
  --yes-bg:#dcfce7;
  --maybe:#d97706;
  --maybe-bg:#fef3c7;
  --no:#94a3b8;
  --no-bg:#f1f5f9;

  --radius:14px;
  --shadow:0 10px 30px rgba(8,15,40,.18);
  --shadow-sm:0 2px 8px rgba(8,15,40,.10);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15px;line-height:1.55;color:var(--ink);
  background-color:#0b1230;
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  background-repeat:no-repeat;
}

a{color:#0f766e;text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.25;margin:0 0 .5rem}
h1{font-size:1.55rem;letter-spacing:-.01em}
h2{font-size:1.15rem}
h3{font-size:1rem}
p{margin:0 0 .8rem}
small{font-size:.82rem}

/* ---------- Layout ---------- */
.container{width:100%;max-width:1080px;margin:0 auto;padding:0 1rem}
.container--wide{max-width:1500px}
main.container,main.container--wide{padding-top:1.5rem;padding-bottom:3rem}

/* ---------- Header ---------- */
.app-header{
  position:sticky;top:0;z-index:50;
  background:rgba(9,16,42,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.app-header__inner{display:flex;align-items:center;gap:1rem;min-height:64px}
.brand{display:flex;align-items:center;gap:.7rem;color:#fff;text-decoration:none;flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand img{height:34px;width:auto;background:#fff;padding:5px 8px;border-radius:8px}
.brand__txt{display:flex;flex-direction:column;line-height:1.15}
.brand__txt strong{font-size:.95rem;font-weight:650}
.brand__txt small{font-size:.72rem;color:#a8c2d8}

.app-nav{margin-left:auto;display:flex;align-items:center;gap:.15rem;flex-wrap:wrap}
.app-nav a{
  color:#cfe0ee;padding:.4rem .6rem;border-radius:8px;font-size:.86rem;white-space:nowrap;
}
@media(max-width:1240px){ .brand__txt{display:none} }
.app-nav a:hover{background:rgba(255,255,255,.10);color:#fff;text-decoration:none}
.app-nav a.is-active{background:rgba(255,255,255,.16);color:#fff;font-weight:600}
.nav-sep{width:1px;height:24px;background:rgba(255,255,255,.18);margin:0 .35rem}
.nav-lang{border:1px solid rgba(255,255,255,.25);font-size:.75rem !important;letter-spacing:.04em;padding:.25rem .5rem !important}
.nav-user{display:flex;align-items:center;gap:.45rem}
.nav-user__name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-out{color:#94a9be !important}
.avatar{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(135deg,var(--teal),var(--cyan));
  color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.02em;
}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;padding:.5rem;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:#fff;margin:4px 0;border-radius:2px}

@media(max-width:860px){
  .nav-toggle{display:block}
  .app-nav{
    display:none;order:3;width:100%;flex-direction:column;align-items:stretch;
    padding:.5rem 0 .9rem;gap:.15rem;
  }
  body.nav-open .app-nav{display:flex}
  .app-header__inner{flex-wrap:wrap}
  .nav-sep{display:none}
  .app-nav a{padding:.6rem .7rem}
}

/* ---------- Footer ---------- */
.app-footer{padding:1.2rem 0 2rem;color:#93a7bd;font-size:.8rem}
.app-footer .container{display:flex;gap:1rem;justify-content:space-between;flex-wrap:wrap}
.app-footer a{color:#b9cbdd}

/* ---------- Karten ---------- */
.card{
  background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:1.25rem 1.35rem;margin-bottom:1.15rem;
}
.card--pad0{padding:0;overflow:hidden}
.card__head{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  padding:1rem 1.35rem;border-bottom:1px solid var(--line);
}
.card__head h2{margin:0}
.card__head .spacer{margin-left:auto}
.card__body{padding:1.1rem 1.35rem}
.card__foot{padding:.9rem 1.35rem;border-top:1px solid var(--line);background:var(--bg-soft)}

.page-head{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin:.25rem 0 1.1rem}
.page-head h1{color:#fff;margin:0;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.page-head p{color:#c8d8e8;margin:.15rem 0 0;font-size:.9rem}
.page-head .spacer{margin-left:auto}

.grid{display:grid;gap:1.15rem}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

/* ---------- Kennzahlen ---------- */
.stat{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1rem 1.1rem}
.stat__val{font-size:1.9rem;font-weight:700;line-height:1.1;letter-spacing:-.02em}
.stat__lbl{font-size:.8rem;color:var(--muted);margin-top:.15rem}
.stat--green .stat__val{color:var(--green)}
.stat--teal .stat__val{color:var(--teal)}
.stat--cyan .stat__val{color:var(--cyan)}
.stat--warn .stat__val{color:var(--maybe)}

.progress{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:.6rem}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--cyan))}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.6rem 1.05rem;border-radius:10px;border:1px solid transparent;
  font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;
  background:var(--bg-soft);color:var(--ink-2);border-color:var(--line-2);
  transition:filter .15s,background .15s;text-decoration:none;
}
.btn:hover{text-decoration:none;filter:brightness(.98)}
.btn--primary{background:linear-gradient(135deg,var(--teal),var(--cyan));color:#fff;border-color:transparent}
.btn--primary:hover{filter:brightness(1.06)}
.btn--green{background:var(--green);color:#fff;border-color:transparent}
.btn--ghost{background:transparent;border-color:var(--line-2);color:var(--ink-2)}
.btn--danger{background:#fee2e2;color:#b91c1c;border-color:#fecaca}
.btn--sm{padding:.35rem .65rem;font-size:.8rem;border-radius:8px}
.btn--block{width:100%}
.btn--light{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.3)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}

/* ---------- Formulare ---------- */
.field{margin-bottom:.95rem}
.field label{display:block;font-size:.83rem;font-weight:600;color:var(--ink-2);margin-bottom:.3rem}
.field .hint{font-size:.78rem;color:var(--muted);margin-top:.25rem}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=time],input[type=search],select,textarea{
  width:100%;padding:.6rem .75rem;border:1px solid var(--line-2);border-radius:10px;
  font:inherit;font-size:.92rem;background:#fff;color:var(--ink);
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(22,181,168,.16);
}
textarea{min-height:80px;resize:vertical}
.checkbox{display:flex;align-items:flex-start;gap:.55rem;font-size:.9rem;color:var(--ink-2)}
.checkbox input{margin-top:.2rem;width:16px;height:16px;accent-color:var(--teal)}
.form-row{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* ---------- Meldungen ---------- */
.alert{padding:.75rem 1rem;border-radius:10px;margin-bottom:1rem;font-size:.9rem;box-shadow:var(--shadow-sm)}
.alert--success{background:#dcfce7;color:#14532d;border:1px solid #bbf7d0}
.alert--error{background:#fee2e2;color:#7f1d1d;border:1px solid #fecaca}
.alert--info{background:#e0f2fe;color:#0c4a6e;border:1px solid #bae6fd}
.alert--warn{background:#fef3c7;color:#78350f;border:1px solid #fde68a}
.notice{background:var(--bg-soft);border:1px dashed var(--line-2);border-radius:10px;padding:1rem;color:var(--muted);font-size:.9rem;text-align:center}

/* ---------- Badges ---------- */
.badge{display:inline-block;padding:.15rem .5rem;border-radius:99px;font-size:.72rem;font-weight:700;letter-spacing:.02em}
.badge--yes{background:var(--yes-bg);color:#166534}
.badge--maybe{background:var(--maybe-bg);color:#92400e}
.badge--no{background:var(--no-bg);color:#475569}
.badge--admin{background:#e0e7ff;color:#3730a3}
.badge--pending{background:var(--maybe-bg);color:#92400e}
.badge--active{background:var(--yes-bg);color:#166534}
.badge--disabled{background:#fee2e2;color:#991b1b}
.badge--open{background:#fee2e2;color:#991b1b}
.badge--full{background:var(--yes-bg);color:#166534}
.badge--building{background:#e0f2fe;color:#075985}
.badge--kind{background:#f1f5f9;color:#475569;font-weight:600}

.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--no-bg)}
.dot--yes{background:var(--yes)}
.dot--maybe{background:var(--maybe)}
.dot--no{background:var(--no)}

/* ---------- Tabellen ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{padding:.6rem .7rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;background:var(--bg-soft)}
tbody tr:hover{background:#fbfdff}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.table--compact th,.table--compact td{padding:.4rem .55rem}

/* ---------- Verfügbarkeits-Editor ---------- */
.day-block{margin-bottom:1.15rem}
.day-block__head{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  padding:.7rem 1.35rem;background:linear-gradient(90deg,#0f2b4a,#123a5c);color:#fff;
  border-radius:var(--radius) var(--radius) 0 0;
}
.day-block__head h3{margin:0;font-size:.98rem}
.day-block__head .spacer{margin-left:auto}
.day-block__body{background:#fff;border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow);overflow:hidden}

.slot-row{
  display:flex;align-items:center;gap:1rem;padding:.7rem 1.35rem;border-bottom:1px solid var(--line);flex-wrap:wrap;
}
.slot-row:last-child{border-bottom:0}
.slot-row--yes{background:linear-gradient(90deg,rgba(22,163,74,.07),transparent 60%)}
.slot-row--maybe{background:linear-gradient(90deg,rgba(217,119,6,.07),transparent 60%)}
.slot-row__no{
  flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--bg-soft);
  display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;color:var(--muted);
}
.slot-row__time{flex:0 0 auto;min-width:112px;font-weight:650;font-variant-numeric:tabular-nums}
.slot-row__meta{flex:1 1 220px;display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:.85rem}
.slot-row__choice{flex:0 0 auto;margin-left:auto}

.choice{display:inline-flex;background:var(--bg-soft);border:1px solid var(--line-2);border-radius:10px;padding:2px;gap:2px}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice label{
  padding:.35rem .7rem;border-radius:8px;font-size:.82rem;font-weight:600;color:var(--muted);
  cursor:pointer;user-select:none;white-space:nowrap;transition:background .12s,color .12s;
}
.choice label:hover{background:#fff}
.choice input:checked + label{color:#fff}
.choice input[value=yes]:checked + label{background:var(--yes)}
.choice input[value=maybe]:checked + label{background:var(--maybe)}
.choice input[value=no]:checked + label{background:var(--no)}
.choice input:focus-visible + label{box-shadow:0 0 0 3px rgba(22,181,168,.3)}

.legend{display:flex;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:var(--muted);align-items:center}
.legend span{display:inline-flex;align-items:center;gap:.35rem}

.save-pill{
  position:fixed;right:1rem;bottom:1rem;z-index:60;
  padding:.5rem .9rem;border-radius:99px;font-size:.83rem;font-weight:600;
  box-shadow:var(--shadow);opacity:0;transform:translateY(8px);transition:.2s;pointer-events:none;
  background:#0f172a;color:#fff;
}
.save-pill.is-visible{opacity:1;transform:none}
.save-pill.is-ok{background:var(--yes)}
.save-pill.is-err{background:#dc2626}

/* ---------- Matrix (Verfügbarkeitsansicht) ---------- */
.matrix{border-collapse:separate;border-spacing:0;font-size:.82rem;width:max-content;min-width:auto}
.matrix th,.matrix td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:.35rem .45rem;white-space:nowrap}
.matrix thead th{position:sticky;top:0;z-index:3;background:#f1f5f9}
.matrix .col-slot{
  position:sticky;left:0;z-index:2;background:#fff;min-width:250px;max-width:330px;
  white-space:normal;box-shadow:1px 0 0 var(--line);
  text-transform:none;letter-spacing:0;color:var(--ink);font-weight:500;font-size:.82rem;
}
.matrix .col-slot strong{margin-right:.25rem}
.matrix th.num{width:1%;white-space:nowrap}
.matrix thead .col-slot{z-index:4;background:#f1f5f9}
.matrix tbody tr:hover .col-slot{background:#f8fafc}
.matrix td.cell{text-align:center;width:34px;cursor:default}
.matrix td.cell--yes{background:var(--yes-bg)}
.matrix td.cell--maybe{background:var(--maybe-bg)}
.matrix td.cell--no{background:#fff}
.matrix .rot{height:130px;vertical-align:bottom;padding:0}
.matrix .rot > div{
  writing-mode:vertical-rl;transform:rotate(180deg);
  padding:.4rem .25rem;font-size:.78rem;font-weight:600;color:var(--ink-2);text-transform:none;letter-spacing:0;
}
.matrix .daysep{border-left:2px solid var(--slate)}
.matrix tr.day-start td,.matrix tr.day-start th{border-top:2px solid var(--slate)}

/* ---------- Einteilung ---------- */
.assign-slot{border-bottom:1px solid var(--line);padding:.85rem 1.35rem}
.assign-slot:last-child{border-bottom:0}
.assign-slot__head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.5rem}
.assign-slot__time{font-weight:700;font-variant-numeric:tabular-nums;min-width:110px}
.assign-slot__count{margin-left:auto;font-size:.8rem;color:var(--muted)}
.chips{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;background:var(--bg-soft);
  border:1px solid var(--line-2);border-radius:99px;padding:.2rem .3rem .2rem .55rem;font-size:.83rem;
}
.chip--assigned{background:#ecfdf5;border-color:#a7f3d0;color:#065f46;font-weight:600}
.chip--maybe{background:var(--maybe-bg);border-color:#fde68a;color:#92400e}
.chip--me{outline:2px solid var(--teal);outline-offset:1px}
.chip form{display:inline}
.chip__x{
  border:0;background:rgba(0,0,0,.06);color:inherit;border-radius:50%;width:18px;height:18px;
  line-height:1;font-size:.8rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
}
.chip__x:hover{background:rgba(0,0,0,.14)}
.add-select{display:inline-flex;gap:.35rem;align-items:center}
.add-select select{padding:.3rem .5rem;font-size:.82rem;border-radius:8px;max-width:260px}

/* ---------- Anmeldeseiten ---------- */
body.auth-page{display:flex;flex-direction:column}
.auth-wrap{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:2.5rem 1rem;width:100%;
}
.auth-card{
  width:100%;max-width:430px;background:#fff;border-radius:18px;box-shadow:var(--shadow);
  padding:2rem 1.9rem 1.7rem;
}
.auth-logo{display:block;margin:0 auto 1.4rem;max-width:230px;width:70%;height:auto}
.auth-card h1{font-size:1.3rem;text-align:center;margin-bottom:.25rem}
.auth-card .sub{text-align:center;color:var(--muted);font-size:.87rem;margin-bottom:1.4rem}
.auth-links{display:flex;justify-content:space-between;gap:1rem;margin-top:1.1rem;font-size:.85rem;flex-wrap:wrap}
.auth-lang{text-align:center;margin-top:1.2rem;font-size:.8rem}
.auth-lang a{color:#cfe0ee}

/* ---------- Diverses ---------- */
.muted{color:var(--muted)}
.small{font-size:.82rem}
.right{text-align:right}
.center{text-align:center}
.nowrap{white-space:nowrap}
.mt{margin-top:1rem}
.mb0{margin-bottom:0}
.hr{height:1px;background:var(--line);margin:1.1rem 0;border:0}
.tabs{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:1.1rem}
.tabs a{
  padding:.5rem .9rem;border-radius:10px;background:rgba(255,255,255,.12);color:#dbe8f4;
  font-size:.88rem;font-weight:600;
}
.tabs a:hover{background:rgba(255,255,255,.2);text-decoration:none;color:#fff}
.tabs a.is-active{background:#fff;color:var(--ink)}
.toolbar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem}
.toolbar input,.toolbar select{width:auto;min-width:150px}
.toolbar input[type=checkbox]{min-width:0;width:16px;height:16px}
.toolbar .checkbox{background:rgba(255,255,255,.10);padding:.45rem .8rem;border-radius:10px}

/* ---------- Druck ---------- */
@media print{
  body{background:#fff !important;color:#000}
  .app-header,.app-footer,.tabs,.toolbar,.btn,.no-print{display:none !important}
  .card{box-shadow:none;border:1px solid #ddd;page-break-inside:avoid}
  .page-head h1{color:#000;text-shadow:none}
  .day-block__head{background:#eee !important;color:#000 !important}
  a{color:#000}
}