/*
 * PixelHobel – gemeinsame Seitenbausteine
 *
 *   .phx-zurueck   Rücksprung über dem Seitenkopf   (layouts/pixelhobel/page/header.php)
 *   .phx-eyebrow-weg  Eyebrow als Weg zurück        (layouts/pixelhobel/page/header.php)
 *   .phx-meldung   Hinweis-/Erfolgs-/Fehlerbox       (layouts/pixelhobel/page/meldung.php)
 *   .phx-leer      Leerzustand einer Liste           (layouts/pixelhobel/page/leer.php)
 *   .phx-dialog    Bestätigungsdialog                (js/bestaetigen.js)
 *
 * Farben kommen aus den Template-Variablen (--ars-*); die Tönungen entstehen
 * per color-mix aus dem jeweiligen Grund, damit Hell- und Dunkelmodus ohne
 * eigene Regeln stimmen (wie in list.css).
 */

/* --- Rücksprung ------------------------------------------------------- */
.phx-zurueck { margin: 0 0 .75rem; }
.phx-zurueck a {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px; /* Zielgröße für Touch (WCAG 2.5.8) */
  color: var(--ars-text-soft, #5b6670); font-weight: 600; text-decoration: none;
}
.phx-zurueck a:hover { color: var(--ars-text, #20252b); text-decoration: underline; }
.phx-zurueck a:focus-visible { outline: 3px solid var(--ars-orange, #af5800); outline-offset: 2px; border-radius: 4px; }

/* --- Eyebrow als Weg zurück -------------------------------------------
 * Der Text über der Überschrift nennt die Ebene darüber (»Mein
 * Arbeitsbereich«) - dann kann er auch dorthin führen. Er behält dabei sein
 * Aussehen: Farbe, Stärke und Größe kommen vom Eyebrow, nicht von der
 * Verweis-Gestaltung des Templates. Der Pfeil zeigt, dass es zurückgeht.
 */
.phx-eyebrow-weg {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 24px; /* Zielgröße (WCAG 2.5.8) */
  color: inherit; font: inherit; text-decoration: none;
}
.phx-eyebrow-weg > i { font-size: .8em; }
.phx-eyebrow-weg:hover { color: inherit; text-decoration: underline; }
.phx-eyebrow-weg:focus-visible {
  outline: 3px solid var(--ars-orange, #af5800); outline-offset: 2px; border-radius: 4px;
}

/* --- Meldung ---------------------------------------------------------- */
.phx-meldung {
  --phx-meldung-farbe: var(--ars-tuerkis-dark, #006f74);
  margin: 0 0 1rem; padding: .8rem 1rem;
  border: 1px solid color-mix(in srgb, var(--phx-meldung-farbe) 45%, var(--ars-bg, #fff));
  border-left: 5px solid var(--phx-meldung-farbe);
  border-radius: 6px;
  background: color-mix(in srgb, var(--phx-meldung-farbe) 9%, var(--ars-bg, #fff));
  color: var(--ars-text, #20252b);
}
.phx-meldung--erfolg  { --phx-meldung-farbe: var(--ars-gruen, #2e7d32); }
.phx-meldung--warnung { --phx-meldung-farbe: var(--ars-orange, #af5800); }
.phx-meldung--fehler  { --phx-meldung-farbe: var(--ars-rot, #c1121f); }
.phx-meldung__titel { display: block; margin: 0 0 .15rem; font-weight: 700; }
.phx-meldung p { margin: 0; }
.phx-meldung p + p { margin-top: .5rem; }

/* --- Leerzustand ------------------------------------------------------ */
.phx-leer {
  margin: 1rem 0; padding: 1.4rem 1rem; text-align: center;
  border: 1px dashed var(--ars-border, #d9dedf); border-radius: 6px;
  color: var(--ars-text-soft, #5b6670);
}
.phx-leer p { margin: 0 0 .75rem; }
.phx-leer p:last-child { margin-bottom: 0; }

/* --- Bestätigungsdialog ------------------------------------------------ */
.phx-dialog {
  max-width: min(28rem, calc(100vw - 2rem)); padding: 1.25rem 1.4rem;
  border: 1px solid var(--ars-border, #d9dedf); border-radius: 8px;
  background: var(--ars-bg, #fff); color: var(--ars-text, #20252b);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}
.phx-dialog::backdrop { background: rgba(0, 0, 0, .5); }
.phx-dialog__frage { margin: 0 0 1.1rem; font-size: 1.05rem; line-height: 1.5; }
.phx-dialog__aktionen { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; }