/* ============================================================================
   RELAX Sensation · ARORA — Design System
   Quelle: RelaxSensation Styleguide (Farben #456d39 / #785e3f / #f0e5d9 /
   #f8f2ea, Schrift Inter). Wird von allen Seiten geladen; seiten­spezifisches
   CSS bleibt minimal in der jeweiligen Datei.
   ========================================================================== */

/* ---------- Schriften (self-hosted, CSP: font-src 'self') ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/inter-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter-latin-700-normal.woff2') format('woff2')}

/* ---------- Design-Tokens ---------- */
:root{
  /* Markenfarben (Styleguide) */
  --green:#456d39;          /* Primär */
  --green-strong:#3a5c30;   /* Hover/aktiv */
  --green-deep:#2c4724;     /* Text auf hellen Grün-Flächen, Logo-Ton */
  --green-soft:#e9efe3;     /* Hintergrund-Tint */
  --green-softer:#f2f5ec;
  --brown:#785e3f;          /* Sekundär / Finanz-Akzent */
  --brown-soft:#f0e7dc;
  --cream:#f0e5d9;          /* Fläche 2 */
  --paper:#f8f2ea;          /* Seiten-Hintergrund */

  /* Neutrale Ableitungen (warm) */
  --surface:#fffdfa;        /* Karten */
  --surface-2:#faf6ef;      /* Zeilen-Hover, Wells */
  --ink:#26301f;            /* Haupttext */
  --ink-2:#4c5245;          /* Sekundärtext */
  --muted:#71705f;          /* Beschriftungen, Hints (≥4.5:1 auf paper) */
  --line:#e6dccc;           /* Rahmen */
  --line-soft:#efe7da;      /* zarte Trenner */

  /* Status */
  --ok:#3d7a3a;      --ok-bg:#e7f0e2;    --ok-line:#b9d2ae;
  --warn:#8a6414;    --warn-bg:#f7edd4;  --warn-line:#e0c98e;
  --danger:#a83a2b;  --danger-bg:#f9e6e2;--danger-line:#e6b7ae;
  --info:#785e3f;    --info-bg:#f0e7dc;  --info-line:#d9c6ac;

  /* Geometrie & Effekte */
  --r-sm:6px; --r-md:10px; --r-lg:14px;
  --shadow-sm:0 1px 2px rgba(60,50,30,.06);
  --shadow-md:0 4px 16px rgba(60,50,30,.10);
  --shadow-lg:0 12px 40px rgba(40,35,20,.18);
  --focus:0 0 0 3px rgba(69,109,57,.28);
  --font:'Inter','Segoe UI Variable','Segoe UI',system-ui,-apple-system,sans-serif;
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);
     font-size:15px;line-height:1.55;font-feature-settings:'cv05' 1;}
h1,h2,h3,h4,p{margin:0}
img{max-width:100%;height:auto}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-sm)}
::selection{background:var(--green-soft)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--green);color:#fff;
  padding:10px 16px;border-radius:0 0 var(--r-md) 0;z-index:200;font-weight:600}
.skip-link:focus{left:0}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--font);font-size:.9rem;font-weight:600;line-height:1;
  border-radius:var(--r-md);border:1px solid transparent;cursor:pointer;
  padding:10px 16px;transition:background .12s,border-color .12s,color .12s,box-shadow .12s;
  text-decoration:none;white-space:nowrap;user-select:none}
.btn:hover{text-decoration:none}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn:focus-visible{box-shadow:var(--focus)}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover:not(:disabled){background:var(--green-strong)}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:var(--shadow-sm)}
.btn-secondary:hover:not(:disabled){border-color:var(--green);color:var(--green-deep)}
.btn-ghost{background:transparent;color:var(--ink-2)}
.btn-ghost:hover:not(:disabled){background:var(--surface-2);color:var(--ink)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover:not(:disabled){background:#8f2f22}
.btn-sm{padding:6px 11px;font-size:.82rem;border-radius:var(--r-sm)}
.btn-block{width:100%}
.btn .spin{width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  border-radius:50%;animation:uispin .7s linear infinite}
@keyframes uispin{to{transform:rotate(360deg)}}

/* Text-Link-Button (Tabellen-Aktionen) */
.link{background:none;border:none;padding:0;font-family:var(--font);font-size:.85rem;
  color:var(--green);cursor:pointer;text-decoration:none}
.link:hover{text-decoration:underline;color:var(--green-strong)}
.link.danger{color:var(--danger)}
.link:disabled{color:var(--muted);cursor:default;text-decoration:none}

/* ---------- Karten ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);padding:20px 22px}
.card + .card{margin-top:16px}
.card-title{font-size:1rem;font-weight:600;margin-bottom:4px;color:var(--ink)}
.card-sub{font-size:.85rem;color:var(--muted);margin-bottom:14px;line-height:1.5}

/* ---------- Stat-Kacheln ---------- */
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 18px;box-shadow:var(--shadow-sm)}
.stat .label{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin-bottom:6px}
.stat .value{font-size:1.55rem;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.stat .value em{font-style:normal;color:var(--green)}

/* ---------- Formulare ---------- */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;min-width:0}
.field > label{font-size:.8rem;font-weight:600;color:var(--ink-2)}
.field .req{color:var(--danger)}
.field-hint{font-size:.78rem;color:var(--muted);line-height:1.45}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=time],
input[type=month],input[type=search],input[type=tel],input[type=url],select,textarea{
  width:100%;font-family:var(--font);font-size:.92rem;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:9px 12px;transition:border-color .12s,box-shadow .12s;min-height:40px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green);box-shadow:var(--focus)}
input::placeholder{color:#a49e8d}
input:disabled,select:disabled{background:var(--surface-2);color:var(--muted);cursor:not-allowed}
input[type=file]{width:100%;font-family:var(--font);font-size:.85rem;color:var(--ink-2);
  border:1px dashed var(--line);border-radius:var(--r-md);padding:10px 12px;background:#fff}
input[type=file]::file-selector-button{font-family:var(--font);font-size:.82rem;font-weight:600;
  color:var(--green-deep);background:var(--green-soft);border:none;border-radius:var(--r-sm);
  padding:7px 12px;margin-right:10px;cursor:pointer}
input[type=checkbox],input[type=radio]{accent-color:var(--green);width:16px;height:16px}
select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2371705f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1.5 1.8 6 6.2l4.5-4.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;cursor:pointer}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.form-grid .full{grid-column:1/-1}
@media(max-width:560px){.form-grid{grid-template-columns:1fr}}
fieldset{border:none;padding:0;margin:0 0 6px}
fieldset legend{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--brown);padding:0;margin-bottom:10px}
fieldset + fieldset{border-top:1px solid var(--line-soft);padding-top:14px;margin-top:8px}

/* Inline-Meldungen unter Formularen */
.msg{font-size:.84rem;color:var(--muted);margin-top:10px;line-height:1.5;word-break:break-word}
.msg:empty{display:none}
.msg.ok{color:var(--ok)}
.msg.bad{color:var(--danger)}

/* ---------- Tabellen ---------- */
.table-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);overflow-x:auto;margin-bottom:26px}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{padding:10px 14px;text-align:left;vertical-align:middle}
thead th{position:sticky;top:0;background:var(--surface-2);color:var(--muted);font-weight:600;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;
  border-bottom:1px solid var(--line);z-index:1}
tbody tr{border-top:1px solid var(--line-soft)}
tbody tr:first-child{border-top:none}
tbody tr:hover{background:var(--surface-2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.actions{text-align:right;white-space:nowrap}
.cut{color:var(--brown);font-weight:600}
.table-empty{padding:34px 20px;text-align:center;color:var(--muted);font-size:.9rem}
.table-empty .ico{display:block;font-size:1.5rem;margin-bottom:6px;opacity:.6}

/* Lade-Skeletons */
.skel{display:inline-block;height:12px;border-radius:6px;width:100%;
  background:linear-gradient(90deg,var(--line-soft) 25%,#f6efe4 45%,var(--line-soft) 65%);
  background-size:200% 100%;animation:skel 1.2s ease-in-out infinite}
@keyframes skel{from{background-position:200% 0}to{background-position:-200% 0}}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;
  font-size:.74rem;font-weight:600;border:1px solid var(--line);color:var(--ink-2);background:#fff;
  white-space:nowrap;vertical-align:middle}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75}
.badge.plain::before{display:none}
.badge.ok,.badge.active,.badge.paid{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-line)}
.badge.warn,.badge.pending{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-line)}
.badge.bad,.badge.failed{color:var(--danger);background:var(--danger-bg);border-color:var(--danger-line)}
.badge.info{color:var(--info);background:var(--info-bg);border-color:var(--info-line)}
.badge.expired,.badge.neutral{color:var(--muted);background:var(--surface-2)}

.dot{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle}
.dot.on{background:#3f9648}.dot.off{background:#c0554e}.dot.warn{background:#d9a441}

/* Kopierbare Referenz-Nummern */
.ref{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:.74rem;color:var(--muted);
  cursor:pointer;letter-spacing:.02em;display:inline-block;border:none;background:none;padding:0}
.ref:hover{color:var(--green)}
.ref::before{content:'⧉ ';opacity:.55}

/* ---------- Hinweis-Boxen ---------- */
.note{border:1px solid var(--info-line);background:var(--info-bg);color:var(--ink-2);
  border-radius:var(--r-md);padding:11px 14px;font-size:.85rem;line-height:1.55}
.note.warn{border-color:var(--warn-line);background:var(--warn-bg)}
.note.bad{border-color:var(--danger-line);background:var(--danger-bg)}
.note.ok{border-color:var(--ok-line);background:var(--ok-bg)}

/* ---------- Toasts ---------- */
#toasts{position:fixed;right:16px;bottom:16px;z-index:120;display:flex;flex-direction:column;
  gap:8px;max-width:min(380px,calc(100vw - 32px))}
.toast{display:flex;gap:10px;align-items:flex-start;background:var(--ink);color:#f6f3ea;
  border-radius:var(--r-md);padding:11px 14px;font-size:.86rem;line-height:1.45;
  box-shadow:var(--shadow-lg);animation:toast-in .18s ease-out}
.toast.ok{background:var(--green-deep)}
.toast.bad{background:#6e2418}
.toast .t-ico{flex:none;margin-top:1px}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Dialog (Bestätigungen) ---------- */
dialog.ui-dialog{border:none;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  padding:0;max-width:min(430px,calc(100vw - 32px));width:100%;background:var(--surface);color:var(--ink)}
dialog.ui-dialog::backdrop{background:rgba(38,48,31,.45)}
.ui-dialog .dlg-body{padding:22px 24px 6px}
.ui-dialog h2{font-size:1.05rem;font-weight:600;margin:0 0 8px;color:var(--ink);
  text-transform:none;letter-spacing:normal}
.ui-dialog p{font-size:.9rem;color:var(--ink-2);line-height:1.55;white-space:pre-line}
.ui-dialog .dlg-actions{display:flex;justify-content:flex-end;gap:10px;padding:18px 24px 20px}

/* ---------- Diverses ---------- */
.hidden{display:none !important}
.row{display:flex;gap:10px}
.muted{color:var(--muted)}
.small{font-size:.82rem}
.legal-links a{color:var(--muted);font-size:.78rem}
.legal-links a:hover{color:var(--ink-2)}