/* 99-demo-flags.css — NUR FÜR DIE ENTWICKLUNG
   ============================================================
   Markiert alles, was NICHT aus dem Originalinhalt des Kunden
   stammt, in kräftigem Orange. So sieht man beim Draufschauen,
   was vor dem Livegang noch ersetzt werden muss.

   Diese Datei wird ausschliesslich von der lokalen Vorschau
   geladen (Konstante DS_DEMO_FLAGS in _dev-preview.php). Auf
   dem Server existiert die Konstante nicht — dann lädt nichts,
   und die Markierungen verschwinden von selbst.

   VERTRAG IM MARKUP
     [data-demo="entry"]  der ganze Eintrag ist erfunden
     [data-demo="date"]   nur das Datum ist ein Platzhalter

   Grundlage der Kennzeichnung: die ▸ DEMO-Vermerke in
   SITEMAP-processwire-it.txt.
   ============================================================ */

:root {
    --demo: #ff6a00;          /* kräftiges Orange, im Grün-Layout unverwechselbar */
    --demo-tint: #fff3e8;
}

/* ── Ganzer Eintrag erfunden ─────────────────────────────── */

[data-demo="entry"] {
    position: relative;
    outline: 2px dashed var(--demo);
    outline-offset: 3px;
    background: var(--demo-tint);
    border-radius: 4px;
}

/* Fähnchen oben rechts. pointer-events:none, damit es keinen
   Klick abfängt — die Markierung darf die Bedienung nicht ändern. */
[data-demo="entry"]::after {
    content: "ERFUNDEN";
    position: absolute;
    top: -9px;
    right: 6px;
    z-index: 5;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--demo);
    color: #fff;
    font-family: var(--font-display, sans-serif);
    font-size: var(--fs-body-sm);
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.5;
    pointer-events: none;
    white-space: nowrap;
}

/* ── Dev notes ──────────────────────────────────────────────
   Their size and opacity live in ONE place of their own:
   components-php/262-php-19-dev-note/. The old rule here,
   p[data-demo="entry"], also shrank invented CONTENT — an
   orange bio or caption is content and keeps its size. */

/* ── Einzelne Plättchen in einer Reihe ────────────────────
   Ein Fähnchen "ERFUNDEN" ist breiter als das Plättchen, das
   es markiert — bei vier davon nebeneinander sieht man nur
   noch Fähnchen. Hier genügt die orange Umrandung: was Orange
   bedeutet, sagt der Streifen ganz oben auf jeder Seite.

   Die Markierung sitzt am <li>, nicht an der Liste: in
   derselben Reihe stehen echte und erfundene Einträge, und
   nur die erfundenen dürfen orange sein. */
.x-chips > [data-demo="entry"] {
    outline-offset: 2px;
    border-radius: 999px;      /* folgt der Form des Plättchens */
}
.x-chips > [data-demo="entry"]::after { content: none; }

/* A notice card inside a list (262-php-02-card) keeps its own green:
   the pale tint would leave its white text unreadable. The dashed
   line and the flag mark it. */
.x262-card--notice[data-demo="entry"] { background: var(--brand); }

/* ── Nur das Datum ist ein Platzhalter ───────────────────── */

[data-demo="date"] {
    background: var(--demo-tint);
    box-shadow: 0 0 0 2px var(--demo-tint);
    color: var(--demo) !important;
    border-bottom: 1px dashed var(--demo);
}

[data-demo="date"]::after {
    content: " ⚑";
    font-size: .9em;
}

/* ── Das Testkonto in der Navigation ─────────────────────── */

[data-demo="account"] .x-nav__avatar {
    outline: 2px dashed var(--demo);
    outline-offset: 2px;
}

[data-demo="account"] .x-nav__myname::after {
    content: " · ERFUNDEN";
    color: var(--demo);
    font-family: var(--font-display, sans-serif);
    font-size: var(--fs-body-sm);
    font-weight: 700;
    letter-spacing: .08em;
}

/* ── Hinweisstreifen ganz oben ───────────────────────────── */

.x-demo-bar {
    position: relative;
    z-index: 200;
    background: var(--demo);
    color: #fff;
    font-family: var(--font-body, sans-serif);
    font-size: var(--fs-body-sm);
    line-height: 1.4;
    text-align: center;
    padding: 5px 12px;
}

.x-demo-bar b { font-weight: 700; }

@media print {
    .x-demo-bar { display: none; }
    [data-demo]::after { display: none; }
}


/* HINWEIS zum Archiv: die Deckkraft (opacity: .65, aus der Vorlage
   uebernommen) liegt auf der einzelnen Zeile und bleibt FEST — auch beim
   Zeigen. Eine Markierung in einer solchen Zeile verblasst deshalb mit;
   bei 65 % ist Orange weiterhin klar erkennbar. */