/*!
 * aslh-lexyhost – gemeinsame Flächen für ALLE Seiten (Startseite, Client-Area, Rechtstexte, Warenkorb)
 * Nutzerwunsch 2026-10-08: „mache alles andere auch so gut“ wie die Startseite.
 * Enthält die Bausteine der Startseiten-Sprache, die vorher nur in aslh-home.css lagen:
 *   Desktop-Grund · Panel-Material (wie das Dock) · Logo-Icon · Eckmarken · Lichtlauf beim Hover · Millimeterraster oben auf Unterseiten.
 * Startseiten-Spezifisches (Hero-Bühne, Black Card, Welle über Abschnitte, Lichtschein per JS) bleibt in aslh-home.css.
 * Lädt nach aslh-theme.css (siehe includes/head.tpl).
 *
 * Flächen-Liste (überall gleich, bewusst als einfache Selektorliste statt :is(), damit jeder Eintrag seine eigene
 * Spezifität behält und Sonderfälle wie die Black Card auf der Startseite nicht überschrieben werden):
 *   .aslh-panel · .aslh-surface · #main-body .card:not(.card .card) · .tiles .tile · .table-container · .aslh-legal__article
 */

/* ============ Desktop-Grund ============
   Hell: ruhiges Grau (surface), dunkel: Graphit (bg). Panels schweben darauf. */
body {
  --aslh-desk: var(--aslh-color-surface);
  --aslh-desk-dot: color-mix(in srgb, var(--aslh-color-text) 6%, transparent);
  --aslh-sheen-color: var(--aslh-color-brand);
}
:root[data-theme="dark"] body { --aslh-desk: var(--aslh-color-bg); --aslh-desk-dot: rgba(255, 255, 255, 0.04); --aslh-sheen-color: #FFFFFF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body { --aslh-desk: var(--aslh-color-bg); --aslh-desk-dot: rgba(255, 255, 255, 0.04); --aslh-sheen-color: #FFFFFF; } }
body, body.primary-bg-color { background: var(--aslh-desk); }

/* Millimeterraster oben auf Unterseiten: wie im Hero der Startseite, blendet nach unten und zu den Seiten weich aus.
   Die Startseite hat ihre eigene Welle über die Abschnitte (aslh-home.css). */
body:not(.aslh-home) #main-body { position: relative; z-index: 0; }
/* Offenes Modal: z-index 0 würde Dialoge in #main-body einsperren, Bootstraps .modal-backdrop (am <body>) läge darüber
   und blockiert jeden Klick (Warenkorb „Entfernen“, 2026-10-25). Solange ein Modal offen ist, kein eigener Stapelkontext.
   Die Dialoge nicht nach <body> verschieben: sie stecken in Formularen (Ja-Knopf = submit). */
body.modal-open:not(.aslh-home) #main-body { z-index: auto; }
body:not(.aslh-home) #main-body::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: min(75vh, 100%); z-index: -1; pointer-events: none;
  background:
    linear-gradient(var(--aslh-desk-dot) 1px, transparent 1px) center top / 24px 24px,
    linear-gradient(90deg, var(--aslh-desk-dot) 1px, transparent 1px) center top / 24px 24px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%), linear-gradient(90deg, transparent, #000 26%, #000 74%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 85%), linear-gradient(90deg, transparent, #000 26%, #000 74%, transparent);
  mask-composite: intersect;
}

/* ============ Panel-Material (wie das Dock) ============ */
.aslh-panel, .aslh-surface,
#main-body .card:not(.card .card), .tiles .tile, .table-container, .aslh-legal__article,
.ticket-reply {
  position: relative;
  background-color: var(--aslh-island-bg);
  border: 1px solid var(--aslh-island-border);
  border-radius: 0;
  box-shadow: var(--aslh-shadow-lg);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  backdrop-filter: saturate(1.5) blur(16px);
  transition: border-color var(--aslh-dur-base) var(--aslh-ease-out);
}
.aslh-panel__bar {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--aslh-island-border);
}
.aslh-panel__title { margin: 0; font-family: var(--aslh-font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; color: var(--aslh-color-text); }

/* ============ Eckmarken („Das gerahmte Quadrat“) ============
   Vier feine Schnittmarken außerhalb der Ecken; ruhig in Graphit, beim Hover rücken sie nach außen und werden orange. */
@property --aslh-tick { syntax: "<color>"; inherits: false; initial-value: transparent; }
.aslh-panel::after, .aslh-surface::after,
#main-body .card:not(.card .card)::after, .tiles .tile::after, .table-container::after, .aslh-legal__article::after {
  content: ""; position: absolute; inset: -7px; pointer-events: none;
  --aslh-tick: color-mix(in srgb, var(--aslh-color-text) 30%, transparent);
  background:
    linear-gradient(var(--aslh-tick), var(--aslh-tick)) left top / 14px 1px,
    linear-gradient(var(--aslh-tick), var(--aslh-tick)) left top / 1px 14px,
    linear-gradient(var(--aslh-tick), var(--aslh-tick)) right top / 14px 1px,
    linear-gradient(var(--aslh-tick), var(--aslh-tick)) right top / 1px 14px,
    linear-gradient(var(--aslh-tick), var(--aslh-tick)) left bottom / 14px 1px,
    linear-gradient(var(--aslh-tick), var(--aslh-tick)) left bottom / 1px 14px,
    linear-gradient(var(--aslh-tick), var(--aslh-tick)) right bottom / 14px 1px,
    linear-gradient(var(--aslh-tick), var(--aslh-tick)) right bottom / 1px 14px;
  background-repeat: no-repeat;
  transition: inset 480ms var(--aslh-ease-out), --aslh-tick 300ms var(--aslh-ease-out);
}
.aslh-panel:hover::after, .aslh-panel:focus-within::after,
.aslh-surface:hover::after, .aslh-surface:focus-within::after,
#main-body .card:not(.card .card):hover::after, #main-body .card:not(.card .card):focus-within::after,
.tiles .tile:hover::after, .tiles .tile:focus-within::after,
.table-container:hover::after, .table-container:focus-within::after,
.aslh-legal__article:hover::after, .aslh-legal__article:focus-within::after {
  inset: -11px; --aslh-tick: var(--aslh-color-brand);
}
/* Auf schmalen Bildschirmen bleiben die Marken innerhalb des Seitenrands */
@media (max-width: 575.98px) {
  .aslh-panel::after, .aslh-surface::after, #main-body .card:not(.card .card)::after, .tiles .tile::after, .table-container::after, .aslh-legal__article::after,
  .aslh-panel:hover::after, .aslh-surface:hover::after, #main-body .card:not(.card .card):hover::after, .tiles .tile:hover::after, .table-container:hover::after, .aslh-legal__article:hover::after { inset: -6px; }
}

/* ============ Lichtlauf beim Hover ============
   Dasselbe Licht wie im Dock: oben und unten gegenläufig hin und her; in Ruhe aus und angehalten. */
.aslh-panel::before, .aslh-surface::before,
#main-body .card:not(.card .card)::before, .tiles .tile::before, .table-container::before, .aslh-legal__article::before {
  content: ""; position: absolute; inset: -1px; z-index: 2; pointer-events: none;
  background:
    var(--aslh-sweep-light) var(--aslh-sweep) 0 / 34% 2px no-repeat,
    var(--aslh-sweep-light) calc(100% - var(--aslh-sweep)) 100% / 34% 2px no-repeat;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--aslh-color-brand) 75%, transparent));
  opacity: 0;
  animation: aslh-sweep 2.75s var(--aslh-ease-in-out) infinite alternate;
  animation-play-state: paused;
  transition: opacity 320ms var(--aslh-ease-out);
}
.aslh-panel:hover::before, .aslh-panel:focus-within::before,
.aslh-surface:hover::before, .aslh-surface:focus-within::before,
#main-body .card:not(.card .card):hover::before, #main-body .card:not(.card .card):focus-within::before,
.tiles .tile:hover::before, .tiles .tile:focus-within::before,
.table-container:hover::before, .table-container:focus-within::before,
.aslh-legal__article:hover::before, .aslh-legal__article:focus-within::before {
  opacity: 1; animation-play-state: running;
}

/* ============ Logo-Icon ============
   Das LH-Zeichen im Kleinen: Graphit-Quadrat, oranger Rahmen, oranges Linien-Icon. Hebt sich beim Hover federnd (Dock-Vergrößerung). */
.aslh-app-icon {
  flex-shrink: 0;
  display: inline-grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  background: var(--aslh-color-mark);
  box-shadow: inset 0 0 0 2px var(--aslh-color-brand);
  color: var(--aslh-color-brand);
  font-size: 1rem; line-height: 1;
  transition: transform var(--aslh-dur-spring) var(--aslh-ease-spring), box-shadow var(--aslh-dur-base) var(--aslh-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .aslh-panel::after, .aslh-surface::after, #main-body .card:not(.card .card)::after, .tiles .tile::after, .table-container::after, .aslh-legal__article::after { transition: none; }
  .aslh-panel::before, .aslh-surface::before, #main-body .card:not(.card .card)::before, .tiles .tile::before, .table-container::before, .aslh-legal__article::before { animation: none; --aslh-sweep: 50%; }
  .aslh-app-icon { transition: none; }
}