/* ============================================================================
   Parat mockup — Wellen-Ansicht (interner Overlay-Layer)
   ----------------------------------------------------------------------------
   Zeigt per Toggle, welches sichtbare Element in welcher Welle enthalten ist.
   Quelle der Zuordnung: parat-leistungsumfang-wellen.md (A0-Matrix + A9),
   Stand 2026-07-27. Elemente tragen data-welle="1|2|3|none";
   assets/wellen.js injiziert Badges, Toggle-Button und Legende.
   Standardmäßig aus; Zustand wird in localStorage gehalten, damit der Layer
   beim Wechsel zwischen den beiden Mockup-Seiten anbleibt.
   ============================================================================ */

/* Wellen-Farben: Design-System-Palette, je Welle ein Ton. Welle 1 und Welle 2
   sind je ein Block; die frühere Trennung in A- und B-Pfad wird nicht mehr
   gezeigt. "none" = im Mockup sichtbar, aber bewusst nicht im Angebot (A9). */
.w-1    { --w-c: var(--proj-blue);        --w-rgb: 93,147,225;  }
.w-2    { --w-c: var(--proj-green);       --w-rgb: 124,199,149; }
.w-3    { --w-c: var(--proj-rose);        --w-rgb: 217,138,176; }
/* "none" ist die Abwesenheits-Kategorie: neutraler Slate statt Warnfarbe. Der
   Ton liegt bewusst hell, weil die gestrichelten Kanten sonst im dunklen
   Canvas versacken; die Strichelung trägt die Bedeutung, nicht die Farbe. */
.w-none { --w-c: #B4BCCC;                 --w-rgb: 180,188,204; }

/* Fallback-Höhe der Legenden-Leiste; wellen.js überschreibt sie mit der
   tatsächlich gemessenen Höhe, sobald die Leiste umbricht. */
:root { --wl-bar-h: 3.5rem; }

/* ---------- Markierte Elemente ---------- */
.w-mark { position: relative; }
body.wellen-on .w-mark { outline: 2px solid rgba(var(--w-rgb), 0.55); outline-offset: 3px; }
/* Gestrichelte Kanten brauchen mehr Deckkraft als durchgezogene, sonst
   verliert die unterbrochene Linie zu viel Substanz gegen den Hintergrund. */
body.wellen-on .w-mark.w-none { outline-style: dashed; outline-color: rgba(var(--w-rgb), 0.85); }

.wellen-badge {
  position: absolute; top: -0.62rem; right: 0.55rem; z-index: 60;
  display: none; align-items: center; padding: 0.14rem 0.5rem; border-radius: 999px;
  background: #14161B; border: 1px solid rgba(var(--w-rgb), 0.85); color: var(--w-c);
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  white-space: nowrap; line-height: 1.4; pointer-events: none;
}
body.wellen-on .wellen-badge { display: inline-flex; }
.wellen-badge.w-none { border-style: dashed; }

/* Variante fürs Seiten-Titel-Badge (steht im Textfluss neben der Überschrift) */
.wellen-badge.wb-inline { position: static; margin-left: 0.65rem; vertical-align: 0.2em; pointer-events: auto; }

/* Variante für Elemente mit overflow:hidden (z. B. KPI-Kacheln): Badge sitzt innen */
.wellen-badge.wb-in { top: 0.45rem; right: 0.5rem; }

/* Beschneidende Container geben das Klipping frei, solange das Overlay an
   ist, sonst wird die Pille an der Oberkante abgeschnitten. */
body.wellen-on .w-mark.wl-unclip { overflow: visible; }

/* Variante: Badge rechts neben dem Element (z. B. Kopfzeilen-Titel) */
.wellen-badge.wb-side { top: 50%; right: auto; left: calc(100% + 0.6rem); transform: translateY(-50%); }

/* Mini-Punkt für Navigations-Einträge (Sidebar Back-Office-App) */
.wellen-dot {
  display: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; flex-shrink: 0;
  background: var(--w-c); box-shadow: 0 0 6px rgba(var(--w-rgb), 0.6);
}
body.wellen-on .wellen-dot { display: inline-block; }
.wellen-dot.w-none { background: transparent; border: 1.5px dashed var(--w-c); box-shadow: none; }
.nav-item > .wellen-dot { margin-left: auto; }
.nav-item > .badge + .wellen-dot, .nav-item > .badge ~ .wellen-dot { margin-left: 0.4rem; }

/* Inline-Chip für den Demo-Navigator der Techniker-App */
.wellen-chip {
  display: none; margin-left: auto; padding: 0.12rem 0.45rem; border-radius: 999px; flex-shrink: 0;
  border: 1px solid rgba(var(--w-rgb), 0.6); color: var(--w-c); background: rgba(var(--w-rgb), 0.08);
  font-size: 0.56rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
}
body.wellen-on .wellen-chip { display: inline-flex; }
.wellen-chip.w-none { border-style: dashed; border-color: rgba(var(--w-rgb), 0.85); }

/* ---------- Inline-Auszeichnung für Beschreibungstexte ----------
   Ein Rahmen liest sich als "das ist ein Feature". Erklärende Texte
   bekommen deshalb keinen Rahmen, sondern nennen ihre Welle im Satz. */
.wellen-inline { display: none; font-weight: 800; color: var(--w-c); }
body.wellen-on .wellen-inline { display: inline; }

/* Basis-Text, den im Overlay eine Wellen-Notiz vollständig ersetzt, damit
   dieselbe Aussage nicht zweimal untereinander steht. */
body.wellen-on .wellen-hide { display: none; }

/* ---------- Erklär-Notizen (nur im Overlay sichtbar) ---------- */
.wellen-note {
  display: none; margin: 1rem 0; padding: 0.75rem 0.95rem;
  border-left: 3px solid var(--w-c, var(--accent-gold));
  border-radius: 0 0.5rem 0.5rem 0; background: rgba(var(--w-rgb, 212,175,55), 0.07);
  font-size: 0.82rem; line-height: 1.5; color: var(--text-primary);
}
body.wellen-on .wellen-note { display: block; }
.wellen-note b { color: var(--w-c); }

/* ---------- Toggle-Button (fix unten rechts) ---------- */
.wellen-toggle {
  /* über der Legenden-Leiste, sonst verdeckt sie ihn bei gleichem z-index */
  position: fixed; right: 1.15rem; bottom: 1.15rem; z-index: 330;
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px;
  padding: 0.55rem 1.05rem; border-radius: 999px;
  background: rgba(20,22,28,0.94); border: 1px solid rgba(255,255,255,0.18);
  color: var(--text-muted); font-family: inherit; font-size: 0.82rem; font-weight: 700;
  cursor: pointer; box-shadow: 0 12px 34px rgba(0,0,0,0.45);
  transition: color .16s, border-color .16s, background .16s;
}
.wellen-toggle:hover { color: #fff; border-color: rgba(255,255,255,0.32); }
.wellen-toggle .wt-ico { display: inline-block; font-size: 1rem; line-height: 1; }
body.wellen-on .wellen-toggle { background: rgba(212,175,55,0.16); border-color: rgba(212,175,55,0.55); color: var(--accent-gold-light); }

/* ---------- Aufmerksamkeits-Hinweis am Toggle ----------
   Der Button sitzt unten rechts und wird schlicht übersehen. Solange ihn
   niemand benutzt hat (wellen.js setzt .wl-hint), läuft ein paar Mal ein
   Ring nach außen und die Wellen-Glyphe schwingt mit. Endlich statt endlos:
   fünf Durchläufe, danach steht der Button ruhig. Beim ersten Klick fällt
   der Hinweis weg und kommt nie wieder. */
@keyframes wl-ping {
  0%       { transform: scale(1);    opacity: 0.55; }
  55%, 100%{ transform: scale(1.34); opacity: 0; }
}
@keyframes wl-sway {
  0%, 100% { transform: translateY(0); }
  25%      { transform: translateY(-2px); }
  60%      { transform: translateY(1px); }
}
.wellen-toggle.wl-hint {
  border-color: rgba(212,175,55,0.45);
  color: var(--accent-gold-light);
}
.wellen-toggle.wl-hint::after {
  content: ''; position: absolute; inset: -1px; border-radius: 999px;
  border: 1px solid var(--accent-gold); pointer-events: none;
  /* will-change wäre hier Ballast: der Ring läuft einmalig und verschwindet. */
  animation: wl-ping 2.6s cubic-bezier(0.22,0.61,0.36,1) 1.1s 5 both;
}
.wellen-toggle.wl-hint .wt-ico { animation: wl-sway 2.6s ease-in-out 1.1s 5; }
/* Sobald der Zeiger da ist, hat der Hinweis seinen Zweck erfüllt. */
.wellen-toggle.wl-hint:hover::after, .wellen-toggle.wl-hint:focus-visible::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .wellen-toggle.wl-hint::after { animation: none; opacity: 0.4; transform: none; }
  .wellen-toggle.wl-hint .wt-ico { animation: none; }
}

/* ---------- Legende: horizontale Leiste am unteren Rand ----------
   Bewusst eine Leiste statt einer Karte: eine schwebende Karte verdeckt
   immer irgendeinen Inhalt, egal wo sie sitzt. Die Leiste nimmt eine
   feste Zeile, und der Seiteninhalt bekommt unten genau diesen Platz
   als Padding dazu, damit nichts dahinter verschwindet.
   Rechts bleibt Raum für den Toggle-Button, der in der Leiste sitzt. */
.wellen-legend {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 320;
  display: none; align-items: center; gap: 0.4rem 1.15rem; flex-wrap: wrap;
  min-height: 3.5rem; padding: 0.5rem 13.5rem 0.5rem 1.1rem;
  background: rgba(20,22,28,0.97); border-top: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 -14px 44px rgba(0,0,0,0.5);
}
body.wellen-on .wellen-legend { display: flex; }
/* Der Seiteninhalt weicht der Leiste aus, statt darunter zu verschwinden. */
body.wellen-on { padding-bottom: var(--wl-bar-h); }
/* Seiten mit fester Sidebar: die Leiste beginnt daneben, sonst deckt sie
   den Fuß der Sidebar (Zurück-Link und Nutzerzeile) ab. */
body.wl-has-sidebar .wellen-legend { left: var(--sidebar-w); }

.wellen-legend .wl-title { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent-gold); flex-shrink: 0; }
.wellen-legend .wl-row { display: inline-flex; align-items: center; gap: 0.45rem; }
.wellen-legend .wl-sw { width: 0.7rem; height: 0.7rem; border-radius: 0.2rem; flex-shrink: 0; background: rgba(var(--w-rgb), 0.35); border: 1px solid var(--w-c); }
.wellen-legend .wl-row.w-none .wl-sw { border-style: dashed; background: rgba(var(--w-rgb), 0.18); }
.wellen-legend .wl-name { font-size: 0.76rem; font-weight: 800; color: var(--w-c); line-height: 1.3; white-space: nowrap; }
.wellen-legend .wl-div { width: 1px; height: 1.15rem; background: rgba(255,255,255,0.16); flex-shrink: 0; }
.wellen-legend .wl-group { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); flex-shrink: 0; }
.wellen-legend .wl-foot { font-size: 0.64rem; color: var(--text-subtle); margin-left: auto; white-space: nowrap; }

.wellen-toggle { bottom: 0.55rem; }

/* Die Quellenzeile fällt zuerst weg, damit die Wellen möglichst lange in
   einer Zeile stehen. Bricht die Leiste doch um, misst wellen.js ihre
   Höhe und schreibt sie nach --wl-bar-h zurück. */
@media (max-width: 1300px) {
  .wellen-legend .wl-foot { display: none; }
}
/* Schmale Viewports: der Button rutscht unter die Wellen statt neben sie. */
@media (max-width: 760px) {
  .wellen-legend { padding-right: 1.1rem; padding-bottom: 3.6rem; }
}
/* Unter 1024px wird die Sidebar zur Schublade, die Leiste darf wieder ganz links beginnen. */
@media (max-width: 1024px) {
  body.wl-has-sidebar .wellen-legend { left: 0; }
}