/* ============================================================ 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: ============================================================ */ /* 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; } /* Auch auf dem Handy waren Platz 2 und 3 exakt gleich hoch (gemessen 145/95/95). Eine Treppe wie auf dem Desktop passt hier nicht, dafuer ist die Breite zu knapp und der Text bricht ohnehin um. Was geht, ist die Schrift zu staffeln: dadurch braucht Platz 3 weniger Zeilen und wird von allein flacher, ohne dass eine feste Hoehe den Text abschneidet. */ /* Die frueher hier stehende Schriftstaffel ist entfallen (Manni, 31.07.2026): sie liess Platz 3 kleiner wirken, und genau das stimmt nicht mehr. Alle drei Flaechen sind gleich gross, der Unterschied ist die Standzeit. */ /* ---------- Die Staffel sichtbar machen (Manni, 30.07.2026) ---------- Auf dem Desktop sahen die drei Flaechen fast gleich aus. Nachgemessen bei 1280 px Fensterbreite: 70, 59 und 59 px hoch. Platz 2 und Platz 3 waren also exakt gleich gross, obwohl Platz 3 nur 42 Prozent von Platz 1 kostet. Damit verkauft sich Platz 1 nicht, und das zu Recht: niemand zahlt mehr als das Doppelte fuer dieselbe Flaeche. Auf dem Handy bleibt es eng beieinander, dort ist die Breite die Waehrung und fuer eine Treppe fehlt schlicht der Platz. Ab 720 px ist genug Luft. Gewaehlt: 104 / 76 / 58 px. Das Verhaeltnis 1 : 0,73 : 0,56 liegt nahe am Preisverhaeltnis 1 : 0,66 : 0,42, ohne dass Platz 3 unbrauchbar klein wird. Genau proportional waeren 104 / 69 / 44 px, und 44 px reichen fuer zwei Textzeilen nicht mehr. */ @media (min-width: 720px) { /* ALLE DREI GLEICH GROSS (Manni, 31.07.2026). Die Hoehenstaffel 104 / 76 / 58 ist gestrichen: sie beschrieb ein Produkt, das es so nicht mehr gibt. In den Apps sind die drei Flaechen gleich gross, sie unterscheiden sich allein in der STANDZEIT von fuenf, drei und einer Minute. Eine Buchungsseite, die eine groessere Flaeche zeigt als die App liefert, verkauft etwas Falsches. Was hier steht, muss dem entsprechen, was ankommt. */ .nk-platz { min-height: 92px; padding: 16px 18px; gap: 15px; } .nk-pl-titel { font-size: 1.22rem; } .nk-pl-unter { font-size: .88rem; } .nk-pl-preis { font-size: 1.32rem; } /* Der Rang traegt jetzt die Standzeit. Sie ist der Unterschied, also bekommt sie das Gewicht, das frueher die Hoehe hatte. */ .nk-pl-rang { font-size: .95rem; padding: 8px 15px; } } /* Auf dem Handy ebenfalls gleich gross, aus demselben Grund. Der frueher hier stehende Block staffelte die Schrift, damit Platz 3 flacher wird; das ist mit der Gleichbehandlung hinfaellig. */ @media (max-width: 719px) { .nk-pl-rang { font-size: .8rem; } /* Der gestrichelte Logoplatz mitten im Satz faellt hier weg (31.07.2026). Auf 360 px bleiben der Mitte nur 136 px, der Titel bricht auf drei Zeilen, und der Rahmen um "Ihre Werbung" schnitt genau durch diesen Umbruch: auf dem Handy stand da ein Kasten quer ueber zwei Zeilen Text. Der Satz allein sagt dasselbe, und die gestrichelte Flaeche steht auf breiteren Schirmen weiterhin. */ .nk-pl-blink { border: 0; padding: 0; animation: none; } } /* 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; } }