/* ==========================================================================
   Prototyp-Hinweis

   Der Prototyp sieht aus wie der Shop, weil er genau das zeigen soll. Ohne
   eine Markierung ist er von aussen nicht davon zu unterscheiden: die Titel
   enden auf "Conrad Electronic", im Fuss stehen Firmensitz und Copyright.
   Diese Leiste sagt in einem Satz, was die Seite ist und was sie nicht ist.

   Sie steht im Fluss ganz oben statt fixiert am unteren Rand, weil dort
   schon die mobile Kaufleiste (bottom 0), der Nach-oben-Knopf (bottom 24)
   und die Toasts (bottom 24) liegen. Oben im Fluss kollidiert sie mit
   nichts, verschiebt kein fixiertes Element und scrollt mit der Seite weg.
   ========================================================================== */

.proto-hinweis {
  background: #15181f;
  color: #f1f2f5;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  border-bottom: 1px solid #2c313c;
}

.proto-hinweis-inhalt {
  max-width: 1440px;
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}

.proto-hinweis-marke {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.proto-hinweis-text {
  font-size: 12px;
  line-height: 1.45;
  color: #b9bdc7;
}

/* Rueckt nur dort nach rechts, wo eine Zeile reicht. Bricht die Leiste um,
   steht der Link unter dem Satz statt allein auf einer dritten Zeile. */
.proto-hinweis-link {
  margin-left: auto;
  font-size: 12px;
  color: #f1f2f5;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.proto-hinweis-link:hover { color: #ffffff; }

@media (max-width: 640px) {
  .proto-hinweis-link { margin-left: 0; }
}