/* ============================================================
   Die drei Werbeplaetze, EINE Quelle fuer alle Seiten

   Benutzt von /neugierig (dort werden sie ausgeliefert), /apps (dort kommt
   jeder vorbei, der die App wechselt) und /werbepartnerschaft (dort werden sie
   gebucht, und der Kunde soll genau das Produkt sehen, das er bekommt).

   Vorher lag dieser Block zweimal im Quelltext, mit einer Warnung im Kommentar,
   dass beide Fassungen gleich bleiben muessen. Beim dritten Mal war Schluss.

   Eingebunden:  <link rel="stylesheet" href="css/werbeplaetze.css?v=1">
   ============================================================ */

/* Bewusst kein GIF: eine Animation aus CSS bleibt auf jedem Bildschirm scharf,
   wiegt nichts und laesst sich fuer Menschen abschalten, die Bewegung nicht
   vertragen. Platz 1 ist am kraeftigsten, nach unten wird es ruhiger. Das macht
   die Staffelung ohne ein Wort Erklaerung sichtbar. */
.nk-plaetze { display: grid; gap: 7px; margin: 0 0 10px; }

.nk-platz {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 13px;
  color: #fff; text-decoration: none;
  transition: transform .12s ease, filter .12s ease;
}
.nk-platz:active { transform: scale(.99); }
.nk-platz:hover { filter: brightness(1.06); }
.nk-platz > * { position: relative; z-index: 1; }

.nk-platz.platz1 {
  background: linear-gradient(120deg, #ff9836 0%, #FF7D0F 45%, #e05f00 100%);
  box-shadow: 0 4px 18px rgba(255,125,15,.34);
  padding: 14px;
}
.nk-platz.platz2 {
  background: linear-gradient(120deg, #35b4e0 0%, #0091C8 60%, #007099 100%);
  box-shadow: 0 3px 12px rgba(0,145,200,.28);
}
.nk-platz.platz3 {
  background: linear-gradient(120deg, #59626b 0%, #414952 60%, #2f353c 100%);
  box-shadow: 0 3px 10px rgba(0,0,0,.2);
}

/* Laufender Lichtstreifen, jetzt auf ALLEN drei Plaetzen (Manni, 30.07.2026).
   Die Staffelung steckt weiter in Tempo und Staerke: Platz 1 laeuft schnell und
   hell, Platz 2 langsamer, Platz 3 am langsamsten und am zartesten. Ein Platz
   ganz ohne Schimmer sah nicht ruhiger aus, sondern verkauft. */
.nk-platz::before {
  content: ''; position: absolute; top: -60%; left: -60%;
  width: 45%; height: 220%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.40) 50%, rgba(255,255,255,0) 100%);
  transform: rotate(18deg);
  animation: nkGlanz 3.4s ease-in-out infinite;
  pointer-events: none;
}
.nk-platz.platz2::before { animation-duration: 5.2s; opacity: .7; }
.nk-platz.platz3::before { animation-duration: 7s; opacity: .55; }
@keyframes nkGlanz {
  0%   { left: -60%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}

.nk-pl-rang {
  flex: none; padding: 4px 9px; border-radius: 8px;
  background: rgba(255,255,255,.22);
  font-family: var(--head); font-size: .74rem; font-weight: 800; letter-spacing: 1px;
  white-space: nowrap;
}
.nk-pl-mitte { flex: 1; min-width: 0; }
.nk-pl-titel {
  display: block; font-family: var(--head); font-weight: 800; line-height: 1.2;
  font-size: 1rem;
}
/* Nur leicht groesser als die anderen. Mit 1,15rem brach der Titel auf drei
   Zeilen um und die Kachel war 155 px hoch gegen 76 px bei den anderen. */
.nk-platz.platz1 .nk-pl-titel { font-size: 1.02rem; }
.nk-pl-unter { display: block; margin-top: 2px; font-size: .78rem; line-height: 1.3; color: rgba(255,255,255,.9); }

/* Der blinkende Platz, an dem spaeter das Kundenlogo steht */
.nk-pl-blink {
  display: inline-block; padding: 0 7px; border-radius: 7px;
  border: 2px dashed rgba(255,255,255,.75);
  animation: nkPuls 1.9s ease-in-out infinite;
}
@keyframes nkPuls {
  0%, 100% { border-color: rgba(255,255,255,.35); }
  50%      { border-color: rgba(255,255,255,.95); }
}

.nk-pl-preis {
  flex: none; text-align: right;
  font-family: var(--head); font-size: 1rem; font-weight: 800; line-height: 1.1;
  white-space: nowrap;
}
.nk-pl-preis small { display: block; font-family: inherit; font-size: .66rem; font-weight: 600; opacity: .85; }

/* Pflichthinweis, klein und ruhig unter den Plaetzen */
.nk-anzeige {
  display: block; margin: 0 0 10px; padding: 7px 12px;
  border-left: 4px solid #FF7D0F; border-radius: 10px;
  background: #fff6ee; color: #6b737b;
  font-size: .74rem; line-height: 1.4; text-decoration: none;
}
.nk-anzeige:hover { background: #ffeeda; }
.nk-anzeige b { color: #1A1A1A; letter-spacing: 1px; text-transform: uppercase; font-size: .68rem; }

/* Wer Bewegung abgestellt hat, bekommt dieselben Flaechen ohne Zappeln. */
@media (prefers-reduced-motion: reduce) {
  .nk-platz::before { animation: none; opacity: 0; }
  .nk-pl-blink { animation: none; border-color: rgba(255,255,255,.8); }
  .nk-platz { transition: none; }
}