/* Shared design system for hof.hirschenhof.it (homepage + status page). */
:root {
  --bg: #0f120e;
  --glow-a: rgba(106, 150, 96, 0.14);
  --glow-b: rgba(207, 168, 94, 0.10);
  --surface: rgba(255, 255, 255, 0.035);
  --surface-hover: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.09);
  --border-hover: rgba(207, 168, 94, 0.45);
  --text: #e9e7e0;
  --muted: #a1a094;
  --faint: #6d6c62;
  --accent: #cfa85e;
  --ok: #6fce8f;
  --warn: #e0b45e;
  --down: #e0766e;
  --icon-sat: 42%;
  --icon-lit: 68%;
  --icon-bg-alpha: 0.13;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f2ea;
    --glow-a: rgba(122, 160, 110, 0.16);
    --glow-b: rgba(186, 144, 66, 0.12);
    --surface: rgba(255, 255, 255, 0.72);
    --surface-hover: #ffffff;
    --border: rgba(66, 62, 44, 0.14);
    --border-hover: rgba(160, 124, 51, 0.55);
    --text: #27261f;
    --muted: #6e6c5e;
    --faint: #98957f;
    --accent: #a07c33;
    --ok: #3d9a63;
    --warn: #a8802b;
    --down: #c2554c;
    --icon-sat: 46%;
    --icon-lit: 38%;
    --icon-bg-alpha: 0.12;
    --shadow: 0 12px 28px rgba(80, 70, 40, 0.14);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(1100px 600px at 12% -8%, var(--glow-a), transparent 60%),
    radial-gradient(1000px 700px at 92% 112%, var(--glow-b), transparent 60%),
    var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(28px, 6vh, 64px) 24px 40px;
  padding-top: max(clamp(28px, 6vh, 64px), env(safe-area-inset-top));
}

.wrap { width: 100%; max-width: 980px; }

header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: clamp(28px, 5vh, 52px);
}
.mark { width: 74px; height: 74px; color: var(--accent); margin-bottom: 14px; }
.mark .gem { fill: var(--accent); }
h1 {
  margin: 0;
  font-family: "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;
  font-weight: 500;
  font-size: clamp(34px, 6vw, 46px);
  letter-spacing: 0.045em;
}
.tagline {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.tagline .dot { color: var(--accent); padding: 0 6px; }

nav.tabs {
  display: flex;
  gap: 6px;
  margin-top: 22px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}
nav.tabs a {
  padding: 6px 20px;
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  transition: color 0.15s, background 0.15s;
}
nav.tabs a:hover { color: var(--text); }
nav.tabs a.active {
  color: var(--bg);
  background: var(--accent);
  font-weight: 600;
}

.group { margin-bottom: 36px; }
.group h2 {
  margin: 0 0 14px 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.card {
  position: relative;
  display: flex;
  gap: 15px;
  align-items: flex-start;
  padding: 18px 18px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: transform 0.16s ease, border-color 0.16s ease,
              background 0.16s ease, box-shadow 0.16s ease;
}
a.card:hover, a.card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--border-hover);
  background: var(--surface-hover);
  box-shadow: var(--shadow);
  outline: none;
}

.icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: hsl(var(--h) var(--icon-sat) var(--icon-lit));
  background: hsl(var(--h) 50% 50% / var(--icon-bg-alpha));
  border: 1px solid hsl(var(--h) 50% 50% / 0.18);
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-size: 22px;
}
.icon svg { width: 25px; height: 25px; }

.card .body { min-width: 0; }
.card .name {
  font-weight: 600;
  font-size: 16.5px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.sso-badge {
  display: inline-grid;
  place-items: center;
  color: var(--accent);
  opacity: 0.85;
  flex: none;
}
.sso-badge svg { width: 12px; height: 12px; display: block; }
.card .desc { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.card .host {
  display: inline-block;
  margin-top: 9px;
  color: var(--faint);
  font: 12px ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.01em;
}
.card:hover .host { color: var(--accent); }

.status {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--faint);
  opacity: 0.45;
  transition: background 0.3s, opacity 0.3s, box-shadow 0.3s;
}
.status.ok   { background: var(--ok);   opacity: 1; box-shadow: 0 0 8px color-mix(in srgb, var(--ok) 60%, transparent); }
.status.down { background: var(--down); opacity: 1; }

.notice {
  border: 1px dashed var(--border);
  border-radius: 14px;
  padding: 34px 24px;
  text-align: center;
  color: var(--muted);
}
.notice strong { color: var(--text); font-weight: 600; }

footer {
  margin-top: 18px;
  padding-top: 22px;
  text-align: center;
  color: var(--faint);
  font-size: 12.5px;
  letter-spacing: 0.03em;
}
footer .warn { color: var(--down); }
footer a { color: var(--muted); }

/* Boot splash: antlers draw themselves in, wordmark rises, overlay lifts.
   Shown once per session (script removes it immediately on repeat loads). */
#boot {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: var(--bg);
  animation: boot-out 0.55s ease 1.55s forwards;
}
#boot .inner { display: flex; flex-direction: column; align-items: center; }
#boot .mark { width: 96px; height: 96px; margin-bottom: 18px; }
#boot .mark path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: boot-draw 1s ease-out forwards; }
#boot .mark path:nth-child(2) { animation-delay: 0.15s; }
#boot .mark path:nth-child(3) { animation-delay: 0.28s; }
#boot .mark path:nth-child(4) { animation-delay: 0.4s; }
#boot .mark .gem { animation: boot-fade 0.5s ease 0.75s both; }
#boot .word {
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-size: 26px;
  letter-spacing: 0.14em;
  animation: boot-rise 0.7s ease 0.45s both;
}
@keyframes boot-draw { to { stroke-dashoffset: 0; } }
@keyframes boot-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes boot-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes boot-out  { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .card, .status, nav.tabs a { transition: none; }
  #boot { animation-delay: 0.3s; animation-duration: 0.2s; }
  #boot .mark path { animation: none; stroke-dashoffset: 0; }
  #boot .mark .gem, #boot .word { animation: none; }
}