/* MINIMAL RUN - Eigenwerbung: Karte im Startlauf und am Ende, Logo in der Ecke, Herkunftszeile (werbung.js).
   Typografie wie die Webseiten (IMPACT4WEB): Labels 600 Versalien gesperrt, Satz normal, Abstufung ueber Deckkraft,
   weisser Rahmen um Bilder */

/* Logo oben rechts (gegenueber dem Namen oben links): nur das Zeichen - der Name steht darin. Ausserhalb des eigenen
   Spiels immer da und anklickbar, im eigenen Spiel ausgeblendet */
#marke { position: absolute; right: calc(var(--u) * 1.6); top: calc(var(--u) * 1.2); display: block; line-height: 0;
         width: max(40px, calc(var(--u) * 2.9)); aspect-ratio: 1; pointer-events: auto; touch-action: manipulation;
         transition: opacity 0.4s, transform 0.2s; }
#marke img { width: 100%; height: 100%; display: block; }
#marke span { display: none; }
#marke.ohne-bild { width: auto; aspect-ratio: auto; }
#marke.ohne-bild span { display: block; line-height: 1; color: #fff; font-weight: 600; letter-spacing: 0.14em;
                        font-size: var(--u); white-space: nowrap; }
#marke:hover { transform: scale(1.05); }
#marke.aus { opacity: 0; pointer-events: none; }

/* Herkunft im Startlauf: unter Bestenliste und Legende, leise */
#herkunft { color: rgb(255 255 255 / 0.66); font-size: calc(var(--u) * 0.85); margin-top: calc(var(--u) * 0.4); }

/* Karte: unten ueber Menue/Ton. Ringsum derselbe Abstand (--a), Bild links, Text rechts, beides mittig. Video und
   Standbild 16:9 mit weissem Rahmen (Signatur der Webseiten), Markenzeichen quadratisch (hat seinen Rahmen schon) */
#werbung { --u: max(10px, min(1.5vw, 2.4vh)); --a: max(10px, calc(var(--u) * 0.9));
           position: absolute; left: 50%; bottom: calc(var(--u) * 4.4 + 18px); transform: translateX(-50%);
           width: min(calc(100% - var(--u) * 3.2), max(340px, calc(var(--u) * 34))); box-sizing: border-box;
           display: flex; align-items: center; gap: var(--a); padding: var(--a);
           background: rgb(10 10 14 / 0.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
           border: 1px solid rgb(255 255 255 / 0.22); box-shadow: 0 10px 40px rgb(0 0 0 / 0.45);
           color: #fff; text-decoration: none; pointer-events: auto; touch-action: manipulation;
           font-size: max(13px, calc(var(--u) * 0.98)); transition: border-color 0.25s; }
#werbung.neu { animation: werbungNeu 0.6s ease-out; }
@keyframes werbungNeu { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
#werbung:hover { border-color: rgb(255 255 255 / 0.6); }
#werbung .medium { flex: 0 0 34%; position: relative; aspect-ratio: 16 / 9; overflow: hidden; line-height: 0;
                   box-sizing: border-box; border: 2px solid #fff; }
#werbung .medium video, #werbung .medium img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
                                               display: block; }
#werbung.zeichen .medium { flex: 0 0 auto; width: max(56px, calc(var(--u) * 5.2)); aspect-ratio: 1; border: 0; }
#werbung.ohne-medium .medium { display: none; }
#werbung .text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--a) * 0.45);
                 text-transform: none; letter-spacing: 0; font-weight: 400; line-height: 1.38; }
/* Label wie auf den Webseiten: 0,72 der Grundschrift, 600, Versalien, 0,14em; Marke in ihrem Akzent */
#werbung .marke, #werbung .ziel { font-size: 0.72em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em;
                                  line-height: 1.2; }
#werbung .ziel { color: rgb(255 255 255 / 0.66); transition: color 0.25s; }
#werbung:hover .ziel { color: #fff; }
/* das Markenzeichen nennt die Marke schon */
#werbung.zeichen .marke { display: none; }
#werbung .satz { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }

/* Platz fuer die Karte: Titel, Bestenliste und Legende stehen zwischen Logo und Karte; fehlt Hoehe, fallen nacheinander
   Legende, Bestenliste und Herkunft weg (werbung.js) */
#anzeige.mit-werbung #mitte { top: calc(var(--u) * 1.6 + max(40px, calc(var(--u) * 2.9)));
                              bottom: calc(var(--werbung-platz, 30%) + var(--u) * 0.6); }
#anzeige.eng1 #legende, #anzeige.eng2 #liste, #anzeige.eng2 #best, #anzeige.eng3 #herkunft { display: none !important; }