/* K11 Physiotherapie – Farben und Schriften aus k11-physio.de */
:root {
  --k11-copper: #a67047;
  --k11-copper-light: #B88D6C;
  --k11-copper-glow: #d39a6e;
  --k11-dark: #150E09;
  --k11-black: #111111;
  --k11-cream: #F8F4F0;
  --k11-white: #FFFFFF;
  --text: #2b211a;
  --muted: #7a6a5d;
  --error: #b3261e;
  --radius: 10px;
  --font-head: "Darker Grotesque", "Source Sans 3", system-ui, sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--k11-cream);
}
h1, h2 { font-family: var(--font-head); font-weight: 700; line-height: 1.1; color: var(--k11-dark); }
h1 { font-size: 2.4rem; margin: 0 0 .25rem; }
h2 { font-size: 1.6rem; margin: 0 0 .25rem; }
a { color: var(--k11-copper); }
.muted { color: var(--muted); margin-top: 0; }

/* Buttons & Formulare */
.btn {
  display: inline-block; width: 100%;
  padding: .8rem 1rem; margin-top: 1.25rem;
  border: 0; border-radius: var(--radius);
  font: 600 1rem var(--font-body); letter-spacing: .02em;
  color: var(--k11-white);
  background: linear-gradient(90deg, #7f4f2c, var(--k11-copper-glow) 55%, #7f4f2c);
  background-size: 200% 100%; background-position: 0 0;
  cursor: pointer; transition: background-position .4s ease;
}
.btn:hover, .btn:focus-visible { background-position: 100% 0; }
.btn:focus-visible, input:focus-visible { outline: 3px solid var(--k11-copper-light); outline-offset: 2px; }
.btn-ghost {
  width: auto; margin: 0; padding: .45rem .9rem;
  background: transparent; color: var(--k11-copper-light);
  border: 1px solid var(--k11-copper);
}
.btn-ghost:hover { background: var(--k11-copper); color: var(--k11-white); }

label { display: block; margin: 1rem 0 .35rem; font-weight: 600; font-size: .95rem; }
input[type=text], input[type=password] {
  width: 100%; padding: .7rem .85rem;
  font: 1rem var(--font-body); color: var(--text);
  background: var(--k11-white);
  border: 1px solid #d9cbbf; border-radius: var(--radius);
}
input:focus { border-color: var(--k11-copper); }

.alert { padding: .7rem .9rem; border-radius: var(--radius); margin: 1rem 0 0; font-size: .95rem; }
.alert-error { background: #fbe9e7; color: var(--error); border: 1px solid #f2c4bf; }
.alert-info { background: #f3ebe3; color: var(--k11-dark); border: 1px solid #e3d3c4; }

/* Login */
.login-page { background: radial-gradient(ellipse at top, #241810 0%, var(--k11-black) 65%); min-height: 100vh; }
.login-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 16px; }
.login-card {
  width: 100%; max-width: 400px;
  background: var(--k11-cream); border-radius: 16px;
  padding: 2.25rem 2rem 2rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  border-top: 4px solid var(--k11-copper);
}
.login-logo { display: block; width: 140px; margin: 0 auto 1.5rem; border-radius: 6px; }
.login-card h1 { text-align: center; }
.login-card > .muted { text-align: center; }
.login-foot { color: #8c7766; font-size: .85rem; margin-top: 1.5rem; }
.login-foot a { color: var(--k11-copper-light); }

/* Portal */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 24px; background: var(--k11-black);
  border-bottom: 3px solid var(--k11-copper);
}
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.brand img { height: 40px; width: auto; }
.brand span { font: 700 1.6rem var(--font-head); color: var(--k11-copper-light); }
.topbar-right { display: flex; align-items: center; gap: 1rem; }
.topbar-right form { margin: 0; }
.user { color: var(--k11-cream); font-size: .95rem; }

.content { max-width: 1100px; margin: 0 auto; padding: 2.5rem 24px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.tile {
  background: var(--k11-white); border-radius: var(--radius);
  padding: 1.5rem; border-left: 4px solid var(--k11-copper);
  box-shadow: 0 2px 10px rgba(21,14,9,.06);
}
.tile p { margin: 0; color: var(--muted); }

@media (max-width: 560px) {
  .topbar { padding: .6rem 16px; }
  .user { display: none; }
  .content { padding: 1.75rem 16px; }
  h1 { font-size: 2rem; }
}

/* ---------- Navigation ---------- */
.mainnav { display: flex; gap: .25rem; padding: 0 24px; background: #1b130d; overflow-x: auto; }
.mainnav a {
  padding: .7rem 1rem; color: #cdb8a6; text-decoration: none; white-space: nowrap;
  border-bottom: 3px solid transparent; font-weight: 600; font-size: .95rem;
}
.mainnav a:hover { color: var(--k11-white); }
.mainnav a[aria-current="page"] { color: var(--k11-white); border-bottom-color: var(--k11-copper-glow); }

/* ---------- Panels & Formulare ---------- */
.panel {
  background: var(--k11-white); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: 0 2px 10px rgba(21,14,9,.06);
}
.panel h2 { margin-bottom: .75rem; }
.panel.narrow { max-width: 440px; margin-top: 1.5rem; }
.panel-danger { border-top: 3px solid var(--error); }
.panel .btn { width: auto; min-width: 180px; }
.content > .alert:first-child { margin: 0 0 1.25rem; }
.hint { font-size: .87rem; color: var(--muted); margin: .35rem 0 0; }
.back { margin: 0 0 .75rem; font-size: .95rem; }
.back a { text-decoration: none; }
select {
  width: 100%; padding: .7rem .85rem; font: 1rem var(--font-body); color: var(--text);
  background: var(--k11-white); border: 1px solid #d9cbbf; border-radius: var(--radius);
}
select:disabled { background: #f1ebe5; color: var(--muted); }
label.check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; margin-top: 1.1rem; }
label.check input { margin-top: .3rem; accent-color: var(--k11-copper); width: 1.05rem; height: 1.05rem; flex: none; }
.btn-danger { background: var(--error); }
.btn-danger:hover, .btn-danger:focus-visible { background: #8f1d17; }
.btn-small { width: auto; margin: 0; padding: .35rem .8rem; font-size: .9rem; text-decoration: none; }
code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .88em; background: #f3ebe3; padding: .1em .4em; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Admin ---------- */
.admin-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.5rem; margin-top: 1.75rem; align-items: start; }
.edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 1.75rem; align-items: start; }
.count { font: 600 .9rem var(--font-body); color: var(--muted); background: var(--k11-cream); padding: .1rem .55rem; border-radius: 999px; vertical-align: middle; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; padding: .5rem .6rem; border-bottom: 2px solid #eadfd4; white-space: nowrap; }
.table td { padding: .7rem .6rem; border-bottom: 1px solid #f0e7de; vertical-align: middle; }
.table td:last-child { text-align: right; }
.table tr.inactive td { color: var(--muted); }
.table tbody tr:hover { background: #fcf9f6; }
.badge { display: inline-block; font-size: .78rem; font-weight: 600; padding: .15rem .6rem; border-radius: 999px; white-space: nowrap; }
.badge-admin { background: var(--k11-dark); color: var(--k11-copper-light); }
.badge-mitarbeiter { background: #f3ebe3; color: #6b4a30; }
.badge-on { background: #e6f2e8; color: #2d6a3a; }
.badge-off { background: #fbe9e7; color: var(--error); }
.badge-pending { background: #fdf3e1; color: #8a5a12; }
a.tile-link { text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
a.tile-link:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(21,14,9,.1); }

@media (max-width: 900px) {
  .admin-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mainnav { padding: 0 8px; }
  .panel { padding: 1.15rem; }
  .panel .btn { width: 100%; }
}