/*!
 * HexaHosting Design-System – hexa.css
 * https://cdn.hexahosting.de/assets/css/hexa.css
 *
 * Dunkles Theme, System-Font-Stack, keine externen Ressourcen (DSGVO).
 * Nur die in der SPEC gelisteten .hx-*-Klassen sind öffentliche API.
 */

/* =========================================================================
   1. Design-Tokens
   ========================================================================= */
:root {
  --hx-bg: #0b0d17;
  --hx-surface: #12152a;
  --hx-surface-2: #181c36;
  --hx-border: #23284a;
  --hx-text: #e6e8f2;
  --hx-muted: #9aa0bd;
  --hx-primary: #7c5cff;
  --hx-primary-hover: #6a4bf0;
  --hx-accent: #22d3ee;
  --hx-success: #22c55e;
  --hx-warning: #f59e0b;
  --hx-danger: #ef4444;
  --hx-radius: 12px;
  --hx-radius-sm: 8px;
  --hx-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --hx-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hx-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Abgeleitete (interne) Tokens */
  --hx-gradient: linear-gradient(135deg, var(--hx-primary) 0%, var(--hx-accent) 100%);
  --hx-focus-ring: 0 0 0 3px rgba(124, 92, 255, .55);
  --hx-glow: 0 0 0 1px rgba(124, 92, 255, .35), 0 8px 28px rgba(124, 92, 255, .25);
  --hx-transition: 160ms cubic-bezier(.2, .7, .3, 1);

  color-scheme: dark;
}

/* =========================================================================
   2. Reset & Basis
   ========================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--hx-bg);
  background-image:
    radial-gradient(1000px 500px at 85% -10%, rgba(124, 92, 255, .14), transparent 60%),
    radial-gradient(800px 420px at -10% 10%, rgba(34, 211, 238, .08), transparent 60%);
  background-repeat: no-repeat;
  color: var(--hx-text);
  font-family: var(--hx-font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* Sicherheitsnetz gegen horizontales Scrollen */
  overflow-wrap: break-word;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.015em;
  color: #fff;
}
h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.0625rem; }

p { margin: 0 0 1em; }

a {
  color: var(--hx-accent);
  text-decoration: none;
  transition: color var(--hx-transition);
}
a:hover { color: #67e8f9; text-decoration: underline; text-underline-offset: 3px; }

code, kbd, pre, samp { font-family: var(--hx-mono); font-size: .9em; }
code {
  padding: .1em .4em;
  border-radius: 6px;
  background: var(--hx-surface-2);
  border: 1px solid var(--hx-border);
}

hr {
  border: 0;
  height: 1px;
  background: var(--hx-border);
  margin: 2rem 0;
}

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: rgba(124, 92, 255, .45); color: #fff; }

/* Sichtbarer Focus-Ring für Tastaturnutzer (global) */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--hx-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =========================================================================
   3. Layout
   ========================================================================= */

/* .hx-container – zentrierter Inhaltsbereich, max. 1200px */
.hx-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding: 0 16px;
}

/* .hx-grid – responsives Raster; Modifier legen Spaltenzahl fest.
   Unter 720px immer einspaltig. */
.hx-grid,
.hx-grid--2,
.hx-grid--3,
.hx-grid--4 {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px) {
  .hx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .hx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =========================================================================
   4. Navigation & Logo
   ========================================================================= */

/* .hx-nav – klebende Kopfleiste mit Blur */
.hx-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 13, 23, .78);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--hx-border);
}

/* .hx-nav__inner – Flex-Zeile innerhalb der Nav (meist mit .hx-container) */
.hx-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  min-height: 64px;
  padding-block: 8px;
}

/* .hx-nav__links – Linkliste (ul oder div) */
.hx-nav__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hx-nav__links a:not(.hx-btn) {
  display: inline-block;
  padding: 6px 10px;
  border-radius: var(--hx-radius-sm);
  color: var(--hx-muted);
  font-weight: 500;
  font-size: .95rem;
  transition: color var(--hx-transition), background-color var(--hx-transition);
}
.hx-nav__links a:not(.hx-btn):hover,
.hx-nav__links a:not(.hx-btn)[aria-current="page"] {
  color: var(--hx-text);
  background: var(--hx-surface-2);
  text-decoration: none;
}

/* .hx-logo – Logo-Link/Wrapper; enthaltenes Bild 32px hoch */
.hx-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--hx-text);
  font-weight: 700;
  text-decoration: none;
  flex-shrink: 0;
}
.hx-logo:hover { text-decoration: none; color: var(--hx-text); }
.hx-logo img,
img.hx-logo {
  height: 32px;
  width: auto;
}

/* =========================================================================
   5. Buttons
   ========================================================================= */

/* .hx-btn – Basis-Button (button, a, input[type=submit]) */
.hx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid var(--hx-border);
  border-radius: var(--hx-radius-sm);
  background: var(--hx-surface-2);
  color: var(--hx-text);
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--hx-transition),
    border-color var(--hx-transition),
    box-shadow var(--hx-transition),
    transform var(--hx-transition),
    color var(--hx-transition);
}
.hx-btn:hover {
  border-color: #343b6b;
  background: #1f2446;
  color: var(--hx-text);
  text-decoration: none;
}
.hx-btn:active { transform: translateY(1px); }
.hx-btn:focus-visible {
  outline: none;
  box-shadow: var(--hx-focus-ring);
}
.hx-btn:disabled,
.hx-btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

/* .hx-btn--primary – Hauptaktion mit Gradient-Glow */
.hx-btn--primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--hx-primary) 0%, #8f6bff 55%, #6d8bff 100%);
  color: #fff;
  box-shadow: 0 6px 20px rgba(124, 92, 255, .32), inset 0 1px 0 rgba(255, 255, 255, .15);
}
.hx-btn--primary:hover {
  border-color: transparent;
  background: linear-gradient(135deg, var(--hx-primary-hover) 0%, #7c5cff 55%, #5c7cf5 100%);
  color: #fff;
  box-shadow: 0 8px 28px rgba(124, 92, 255, .45), 0 0 0 1px rgba(34, 211, 238, .2), inset 0 1px 0 rgba(255, 255, 255, .15);
}
.hx-btn--primary:focus-visible {
  box-shadow: var(--hx-focus-ring), 0 6px 20px rgba(124, 92, 255, .32);
}

/* .hx-btn--ghost – transparent, nur Rahmen */
.hx-btn--ghost {
  background: transparent;
  border-color: var(--hx-border);
}
.hx-btn--ghost:hover {
  background: rgba(124, 92, 255, .1);
  border-color: rgba(124, 92, 255, .55);
}

/* .hx-btn--danger – destruktive Aktion */
.hx-btn--danger {
  background: rgba(239, 68, 68, .12);
  border-color: rgba(239, 68, 68, .45);
  color: #fca5a5;
}
.hx-btn--danger:hover {
  background: var(--hx-danger);
  border-color: var(--hx-danger);
  color: #fff;
}
.hx-btn--danger:focus-visible { box-shadow: 0 0 0 3px rgba(239, 68, 68, .5); }

/* .hx-btn--sm – kompakte Variante */
.hx-btn--sm {
  min-height: 32px;
  padding: 6px 12px;
  font-size: .85rem;
  border-radius: 7px;
}

/* .hx-btn--block – volle Breite */
.hx-btn--block {
  display: flex;
  width: 100%;
  white-space: normal;
}

/* =========================================================================
   6. Card
   ========================================================================= */

/* .hx-card – Fläche mit Rahmen, dezentem Verlauf und Hover-Glow (bei Links) */
.hx-card {
  position: relative;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--hx-border);
  border-radius: var(--hx-radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0) 40%),
    var(--hx-surface);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 4px 18px rgba(0, 0, 0, .2);
  transition: border-color var(--hx-transition), box-shadow var(--hx-transition), transform var(--hx-transition);
}
.hx-card > :last-child { margin-bottom: 0; }
a.hx-card { display: block; color: inherit; text-decoration: none; }
a.hx-card:hover,
.hx-card:focus-within {
  border-color: rgba(124, 92, 255, .45);
}
a.hx-card:hover { box-shadow: var(--hx-glow); transform: translateY(-2px); }
@media (max-width: 480px) {
  .hx-card { padding: 18px; }
}

/* =========================================================================
   7. Badges
   ========================================================================= */

/* .hx-badge – kleines Status-Label; Standard = primary */
.hx-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid rgba(124, 92, 255, .4);
  border-radius: 999px;
  background: rgba(124, 92, 255, .14);
  color: #c4b5fd;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .02em;
  white-space: nowrap;
  vertical-align: middle;
}
.hx-badge--success { background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .4); color: #86efac; }
.hx-badge--warning { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .4); color: #fcd34d; }
.hx-badge--danger  { background: rgba(239, 68, 68, .12);  border-color: rgba(239, 68, 68, .4);  color: #fca5a5; }
.hx-badge--muted   { background: rgba(154, 160, 189, .1); border-color: var(--hx-border);         color: var(--hx-muted); }

/* =========================================================================
   8. Formulare
   ========================================================================= */

/* .hx-field – Wrapper für Label + Eingabe (+ optionaler Hinweis) */
.hx-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  min-width: 0;
}
.hx-field small,
.hx-field .hx-muted { font-size: .825rem; }

/* .hx-label – Feldbeschriftung */
.hx-label {
  display: block;
  color: var(--hx-text);
  font-size: .875rem;
  font-weight: 600;
}

/* .hx-input / .hx-select – Text-Eingaben und Auswahllisten */
.hx-input,
.hx-select {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--hx-border);
  border-radius: var(--hx-radius-sm);
  background: var(--hx-bg);
  color: var(--hx-text);
  font-family: inherit;
  font-size: 1rem; /* ≥16px verhindert iOS-Zoom */
  line-height: 1.4;
  transition: border-color var(--hx-transition), box-shadow var(--hx-transition), background-color var(--hx-transition);
}
textarea.hx-input { min-height: 110px; resize: vertical; }
.hx-input::placeholder { color: #6b7194; opacity: 1; }
.hx-input:hover,
.hx-select:hover { border-color: #343b6b; }
.hx-input:focus,
.hx-select:focus,
.hx-input:focus-visible,
.hx-select:focus-visible {
  outline: none;
  border-color: var(--hx-primary);
  background: #0d1020;
  box-shadow: var(--hx-focus-ring);
}
.hx-input:disabled,
.hx-select:disabled { opacity: .55; cursor: not-allowed; }
.hx-input[aria-invalid="true"],
.hx-select[aria-invalid="true"] { border-color: var(--hx-danger); }
.hx-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, .45); }

.hx-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
  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 d='M1 1.5l5 5 5-5' fill='none' stroke='%239aa0bd' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}
.hx-select:focus { background-color: #0d1020; }
.hx-select option { background: var(--hx-surface); color: var(--hx-text); }

/* =========================================================================
   9. Tabelle
   ========================================================================= */

/* .hx-table – Datentabelle. Auf schmalen Screens in einen scrollbaren
   Wrapper legen oder Tabelle selbst scrollen lassen (display:block). */
.hx-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .925rem;
  border: 1px solid var(--hx-border);
  border-radius: var(--hx-radius);
  background: var(--hx-surface);
  overflow: hidden;
}
.hx-table th,
.hx-table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--hx-border);
}
.hx-table th {
  background: var(--hx-surface-2);
  color: var(--hx-muted);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hx-table tbody tr:last-child td { border-bottom: 0; }
.hx-table tbody tr { transition: background-color var(--hx-transition); }
.hx-table tbody tr:hover { background: rgba(124, 92, 255, .06); }
@media (max-width: 719px) {
  .hx-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .hx-table th,
  .hx-table td { padding: 10px 12px; }
}

/* =========================================================================
   10. Hilfsklassen
   ========================================================================= */

/* .hx-muted – gedämpfte Sekundärschrift */
.hx-muted { color: var(--hx-muted); }

/* .hx-gradient-text – Text mit Verlauf primary → accent */
.hx-gradient-text {
  background: var(--hx-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--hx-primary); /* Fallback */
}

/* .hx-hidden – vollständig ausblenden */
.hx-hidden { display: none !important; }

/* .hx-spinner – Ladeindikator; erbt Größe über font-size (1em) */
.hx-spinner {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  border: 2px solid rgba(154, 160, 189, .25);
  border-top-color: var(--hx-primary);
  border-right-color: var(--hx-accent);
  border-radius: 50%;
  vertical-align: -.25em;
  animation: hx-spin .75s linear infinite;
}
@keyframes hx-spin { to { transform: rotate(360deg); } }

/* =========================================================================
   11. Toasts (von Hexa.toast() erzeugt)
   ========================================================================= */

/* .hx-toast-container – fester Stapel unten rechts (mobil: volle Breite) */
.hx-toast-container {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}

/* .hx-toast – einzelne Meldung; Typ über data-type / Modifier */
.hx-toast {
  position: relative;
  width: 100%;
  padding: 12px 16px 12px 18px;
  border: 1px solid var(--hx-border);
  border-radius: var(--hx-radius-sm);
  background: var(--hx-surface-2);
  box-shadow: var(--hx-shadow);
  color: var(--hx-text);
  font-size: .925rem;
  line-height: 1.45;
  overflow: hidden;
  pointer-events: auto;
  animation: hx-toast-in 220ms cubic-bezier(.2, .7, .3, 1) both;
}
.hx-toast::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--hx-accent);
}
.hx-toast--success,
.hx-toast[data-type="success"] { border-color: rgba(34, 197, 94, .4); }
.hx-toast--success::before,
.hx-toast[data-type="success"]::before { background: var(--hx-success); }
.hx-toast--error,
.hx-toast[data-type="error"] { border-color: rgba(239, 68, 68, .45); }
.hx-toast--error::before,
.hx-toast[data-type="error"]::before { background: var(--hx-danger); }
.hx-toast--info::before,
.hx-toast[data-type="info"]::before { background: var(--hx-gradient); }
.hx-toast.is-leaving { animation: hx-toast-out 200ms ease-in both; }

@keyframes hx-toast-in {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes hx-toast-out {
  to { opacity: 0; transform: translateY(6px); }
}

/* =========================================================================
   12. Footer
   ========================================================================= */

/* .hx-footer – Seitenfuß */
.hx-footer {
  margin-top: 64px;
  padding: 32px 0;
  border-top: 1px solid var(--hx-border);
  background: linear-gradient(180deg, rgba(18, 21, 42, 0), rgba(18, 21, 42, .7));
  color: var(--hx-muted);
  font-size: .9rem;
}
.hx-footer a { color: var(--hx-muted); }
.hx-footer a:hover { color: var(--hx-text); }

/* =========================================================================
   13. Bewegung reduzieren
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* Spinner bleibt erkennbar, dreht sich aber langsam statt gar nicht */
  .hx-spinner {
    animation-duration: 1.6s !important;
    animation-iteration-count: infinite !important;
  }
  .hx-btn:active,
  a.hx-card:hover { transform: none; }
}