/* ============================================================================
   Wildmoser Design-System — kanonische Basis (abgeleitet aus dem App-Portal)
   Quelle der Wahrheit: wildmoser-design/wildmoser.css
   Jede App bindet eine KOPIE dieser Datei VOR ihrem eigenen Stylesheet ein.
   Aenderungen immer zuerst hier, dann in die Apps synchronisieren.
   ============================================================================ */

:root{
  --bg:#ffffff;--surface:#f5f5f7;--card:#ffffff;
  --text:#1d1d1f;--muted:#6e6e73;
  --accent:#0071e3;--accent-hover:#0077ed;--link:#0066cc;
  --border:#d2d2d7;--hairline:rgba(0,0,0,.08);
  --ok:#1d8f3b;--ok-bg:#e6f4ea;--warn:#b25000;--warn-bg:#fff4e5;
  --err:#c9302c;--err-bg:#fdecea;--danger:#ff3b30;
  --shadow:0 4px 24px rgba(0,0,0,.06);
  --shadow-hover:0 14px 34px rgba(0,0,0,.11);
  --radius:18px;--radius-s:12px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);
     -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
     font-size:17px;line-height:1.47;margin:0}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

h1{font-size:44px;line-height:1.08;font-weight:600;letter-spacing:-.02em;margin:0 0 8px}
h2{font-size:28px;line-height:1.14;font-weight:600;letter-spacing:-.015em;margin:0 0 8px}
h3{font-size:21px;line-height:1.2;font-weight:600;letter-spacing:-.01em;margin:0 0 6px}
.sub{color:var(--muted);margin-bottom:36px;font-size:19px;letter-spacing:-.01em}
.muted{color:var(--muted);font-size:14px}

.wm-wrap{max-width:980px;margin:0 auto;padding:56px 22px 90px}
.wm-wrap.wide{max-width:1280px}

/* ── Topbar: schlank, milchig, sticky (Apple-Stil) ────────────────────────── */
.wm-topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:0 22px;height:56px;
  background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hairline)}
.wm-brand{font-weight:600;font-size:19px;letter-spacing:-.01em;line-height:1.05;color:var(--text)}
.wm-brand small{color:var(--muted);text-transform:uppercase;font-size:10px;
  letter-spacing:2px;display:block;font-weight:600;margin-bottom:1px}
.wm-topnav{display:flex;align-items:center}
.wm-topnav a,.wm-topnav button.linklike{color:var(--muted);text-decoration:none;margin-left:24px;
  font-size:14px;transition:color .2s;background:none;border:none;cursor:pointer;
  font-family:inherit;padding:0}
.wm-topnav a:hover,.wm-topnav button.linklike:hover{color:var(--text);text-decoration:none}

/* ── Karten & Bento-Kacheln ───────────────────────────────────────────────── */
.wm-card{background:var(--card);border:1px solid var(--hairline);
  border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.wm-grid{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:600px){.wm-grid{grid-template-columns:1fr 1fr}}
@media(min-width:860px){.wm-grid{grid-template-columns:1fr 1fr 1fr}}
.wm-tile{display:block;background:var(--surface);border:none;border-radius:var(--radius);
  padding:28px;text-decoration:none;color:inherit;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s cubic-bezier(.2,.7,.2,1),background .3s}
.wm-tile:hover{background:#fff;transform:translateY(-4px);box-shadow:var(--shadow-hover);text-decoration:none}

/* ── Formulare ────────────────────────────────────────────────────────────── */
label{display:block;font-size:14px;color:var(--muted);margin:18px 0 7px;font-weight:500}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=search],input[type=date],input[type=tel],input[type=url],
select,textarea{
  width:100%;padding:14px 16px;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-s);color:var(--text);font-size:17px;font-family:inherit;
  transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(0,113,227,.15)}
input:disabled,select:disabled,textarea:disabled{background:var(--surface);color:var(--muted)}

/* ── Buttons: Pill-Form ───────────────────────────────────────────────────── */
.btn{display:inline-block;background:var(--accent);color:#fff;border:none;border-radius:980px;
  padding:12px 24px;font-size:17px;font-weight:400;font-family:inherit;cursor:pointer;
  text-decoration:none;text-align:center;transition:background .2s,transform .1s}
.btn:hover{background:var(--accent-hover);text-decoration:none}
.btn:active{transform:scale(.98)}
.btn:disabled{background:#b8d6f5;cursor:default;transform:none}
.btn.sec{background:#e8e8ed;color:var(--text)}
.btn.sec:hover{background:#dcdce1}
.btn.danger{background:var(--danger);color:#fff}
.btn.danger:hover{background:#e0352b}
.btn.small{padding:8px 16px;font-size:14px}

/* ── Meldungen ────────────────────────────────────────────────────────────── */
.flash{padding:14px 18px;border-radius:14px;margin-bottom:16px;font-size:15px;font-weight:500}
.flash.ok{background:var(--ok-bg);color:var(--ok)}
.flash.warn{background:var(--warn-bg);color:var(--warn)}
.flash.error{background:var(--err-bg);color:var(--err)}

/* ── Tabellen ─────────────────────────────────────────────────────────────── */
table.wm{width:100%;border-collapse:collapse;font-size:15px}
table.wm th,table.wm td{text-align:left;padding:14px 14px;border-bottom:1px solid var(--hairline)}
table.wm th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.4px}
table.wm tr:last-child td{border-bottom:none}
table.wm tbody tr:hover td{background:var(--surface)}
.wm-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ── Pills / Status ───────────────────────────────────────────────────────── */
.pill{display:inline-block;font-size:12px;padding:3px 10px;border-radius:980px;
  background:#e8e8ed;color:var(--muted);font-weight:500;white-space:nowrap}
.pill.on,.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.off,.pill.err{background:var(--err-bg);color:var(--err)}
.pill.accent{background:rgba(0,113,227,.12);color:var(--accent)}

/* ── Checkbox-Karten ──────────────────────────────────────────────────────── */
.wm-check{display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--hairline);border-radius:var(--radius-s);padding:13px 14px;
  cursor:pointer;transition:background .2s}
.wm-check:hover{background:#ececef}
.wm-check input{width:18px;height:18px;accent-color:var(--accent)}

/* ── Hilfsklassen ─────────────────────────────────────────────────────────── */
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* ── Responsive Grundregeln ───────────────────────────────────────────────── */
@media(max-width:560px){
  .wm-wrap{padding:32px 18px 56px}
  .wm-topbar{position:static;height:auto;flex-direction:column;align-items:flex-start;gap:8px;padding:14px 18px}
  .wm-topnav{flex-wrap:wrap;gap:2px 20px}
  .wm-topnav a,.wm-topnav button.linklike{margin-left:0}
  h1{font-size:32px}
  h2{font-size:24px}
  .sub{font-size:17px}
  .btn{min-height:44px}
}