/* Kennzeichnung der Demo-Ansicht (/demo/, 03.09.2026).
   Nur in der Demo geladen – im echten Portal existiert diese Datei nicht im
   Seitenkopf. Deshalb darf sie hier großzügig mit !important-freien, aber
   spezifischen Regeln arbeiten: Sie kann nichts anderes stören.

   Farbwahl: Terrakotta ist im Portal die Signalfarbe (CTA). Für den Balken ist
   sie richtig – er soll auffallen, ohne wie eine Fehlermeldung auszusehen. */

.dk-demo-balken {
  background: var(--pw-terra-700);
  color: var(--pw-text-invers);
  border-bottom: 3px solid var(--pw-terra-900);
}
.dk-demo-balken-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.dk-demo-schild {
  flex: none;
  background: var(--pw-text-invers);
  color: var(--pw-terra-800);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}
.dk-demo-text {
  margin: 0;
  /* min-width:0 – dieselbe Falle wie im Feld-Raster (siehe design.css):
     ohne sie sprengt der lange Satz den Flex-Streifen. */
  min-width: 0;
  flex: 1 1 320px;
  font-size: 15px;
  line-height: 1.45;
}
.dk-demo-text strong { font-weight: 800; }
.dk-demo-link {
  flex: none;
  color: var(--pw-text-invers);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.dk-demo-link:hover { color: var(--pw-terra-100); }

/* Die mitlaufende Marke: bleibt sichtbar, wenn der Balken weggescrollt ist.
   `pointer-events: none`, damit sie niemals einen Knopf verdeckt, den jemand
   drücken will. */
.dk-demo-marke {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 60;
  pointer-events: none;
  background: var(--pw-terra-700);
  color: var(--pw-text-invers);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
}

/* Kennzeichnung direkt am Inhalt: Zusatz zu den Überschriften der Listen und
   Profile (wird im Markup als <span class="dk-demo-hinweis"> gesetzt). */
.dk-demo-hinweis {
  display: block;
  margin: 10px 0 0;
  padding: 10px 14px;
  border-left: 4px solid var(--pw-terra-600);
  background: var(--pw-terra-50);
  color: var(--pw-terra-900);
  font-size: 15px;
  line-height: 1.5;
  border-radius: 0 8px 8px 0;
}

@media (max-width: 599.98px) {
  .dk-demo-balken-inner { padding: 9px 14px; gap: 10px; }
  .dk-demo-lang { display: none; }
  .dk-demo-text { font-size: 14px; flex-basis: 100%; order: 3; }
  .dk-demo-link { font-size: 14px; }
  .dk-demo-marke { right: 10px; bottom: 10px; font-size: 11px; padding: 6px 10px; }
}

/* Drucken: Der Hinweis muss auf dem Ausdruck stehen bleiben – ein
   ausgedrucktes Beispielprofil ohne Kennzeichnung wäre genau das Papier, das
   niemand herumzeigen soll. */
@media print {
  .dk-demo-balken { background: #fff; color: #000; border-bottom: 2px solid #000; }
  .dk-demo-schild { background: #000; color: #fff; }
  .dk-demo-marke { position: static; background: #000; }
}