/* Rahmen fuer Screenshots und Trailer auf den App- und Spielseiten. Alle drei kommen aus dem Monitor im Logo, und sie sind absichtlich verschieden laut: Die Trailer tragen Marine, die Screenshots nur Papier und Messing. So ist der Trailer auf jeder Seite das Erste, was ins Auge faellt. Screenshots Messing-Passepartout, sitzt direkt am Trailer hochkant Telefongehaeuse .trailer.hoch Trailer quer Monitor mit Fuss .trailer.quer Die Store-Screenshots zeigen selbst schon ein Telefon. Deshalb bekommen sie das Passepartout und nicht das Gehaeuse: sonst stuende dort ein Telefon im Telefon. Wird nach dem Seiten-CSS geladen und gewinnt bei gleicher Spezifitaet. */ :root { /* Der Pixelschweif des Logos, 13 Quadrate. Dieselbe Form wie --schweif-klein im Stil der Startseite. */ --schweif: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20112%20105%22%3E%3Crect%20x=%2256%22%20y=%220%22%20width=%2212%22%20height=%2211%22/%3E%3Crect%20x=%2282%22%20y=%2212%22%20width=%2214%22%20height=%2214%22/%3E%3Crect%20x=%2229%22%20y=%2220%22%20width=%2212%22%20height=%2212%22/%3E%3Crect%20x=%2263%22%20y=%2226%22%20width=%2218%22%20height=%2217%22/%3E%3Crect%20x=%2234%22%20y=%2241%22%20width=%2222%22%20height=%2221%22/%3E%3Crect%20x=%2217%22%20y=%2248%22%20width=%2213%22%20height=%2212%22/%3E%3Crect%20x=%2286%22%20y=%2248%22%20width=%2212%22%20height=%2212%22/%3E%3Crect%20x=%2269%22%20y=%2249%22%20width=%2211%22%20height=%2210%22/%3E%3Crect%20x=%22100%22%20y=%2263%22%20width=%2212%22%20height=%2211%22/%3E%3Crect%20x=%2259%22%20y=%2265%22%20width=%2210%22%20height=%228%22/%3E%3Crect%20x=%2274%22%20y=%2271%22%20width=%2213%22%20height=%2212%22/%3E%3Crect%20x=%2294%22%20y=%2278%22%20width=%2211%22%20height=%2210%22/%3E%3C/svg%3E"); } /* ---------------- Screenshots: Messing-Passepartout ---------------- Papier als Rand, darin eine feine Messinglinie. Beides liegt im Innenabstand des Bildes, das Bild selbst bleibt unberuehrt. */ .bilder { gap: 1.4rem; } .bilder img { box-sizing: border-box; padding: 12px; background: var(--schirm); border: 1px solid var(--linie); border-radius: 2px; box-shadow: inset 0 0 0 4px var(--schirm), inset 0 0 0 5px rgba(169, 137, 74, 0.55), 0 1px 0 var(--haarlinie); } .bilder figcaption { margin-top: 0.65rem; } /* ---------------- Gemeinsam: der aufgebrochene Rahmen ---------------- Oben rechts hat der Rahmen keine Ecke. Zwei Radierer in der Grundfarbe nehmen sie weg, und dort fliegen die Pixel heraus. */ .trailer video { display: block; width: 100%; height: auto; background: #000; } .trailer .schweif { position: absolute; z-index: 3; pointer-events: none; width: var(--sw-b); height: var(--sw-h); background: var(--rahmen); -webkit-mask: var(--schweif) no-repeat 0 0 / 100% 100%; mask: var(--schweif) no-repeat 0 0 / 100% 100%; } /* ---------------- Trailer hochkant: Telefongehaeuse ---------------- */ .trailer.hoch { --rd: 9px; --sw-b: 56px; --sw-h: 52px; position: relative; max-width: 320px; padding: 22px var(--rd) 18px; background: var(--rahmen); border-radius: 28px; border-top-right-radius: 0; box-shadow: 0 0 0 1px var(--kante-aussen), 0 22px 34px -24px rgba(3, 28, 66, 0.75); } .trailer.hoch video { border-radius: 12px; } .trailer.hoch::before, .trailer.hoch::after { content: ''; position: absolute; z-index: 2; top: -2px; right: -2px; background: var(--grund); pointer-events: none; } .trailer.hoch::before { width: calc(var(--sw-b) * 1.08); height: calc(var(--rd) + 2px); } .trailer.hoch::after { width: calc(var(--rd) + 2px); height: calc(var(--sw-h) * 0.59); } .trailer.hoch .schweif { top: calc(-0.457 * var(--sw-h)); right: 0; } .trailer .hoerer { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 30%; height: 4px; border-radius: 2px; background: var(--kante-innen); box-shadow: inset 0 0 0 1px rgba(169, 137, 74, 0.35); } /* ---------------- Trailer quer: Monitor mit Fuss ---------------- Rahmen, Hals, Sockel und das Betriebslaempchen wie im Logo. */ .trailer.quer { max-width: 900px; } .trailer .monitor { --rd: 12px; --sw-b: 96px; --sw-h: 90px; position: relative; border: var(--rd) solid var(--rahmen); border-radius: 12px; border-top-right-radius: 0; background: var(--rahmen); box-shadow: 0 0 0 1px var(--kante-aussen); } .trailer .monitor video { border-radius: 2px; } .trailer .monitor::before, .trailer .monitor::after { content: ''; position: absolute; z-index: 2; pointer-events: none; background: var(--grund); top: calc(-1 * (var(--rd) + 2px)); right: calc(-1 * (var(--rd) + 2px)); } .trailer .monitor::before { width: calc(var(--sw-b) * 1.08); height: calc(var(--rd) + 3px); } .trailer .monitor::after { width: calc(var(--rd) + 3px); height: calc(var(--sw-h) * 0.59); } .trailer .monitor .schweif { top: calc(-0.457 * var(--sw-h) - var(--rd)); right: calc(-1 * var(--rd)); } .trailer .laempchen { position: absolute; z-index: 3; bottom: -9px; right: 18px; width: 6px; height: 6px; border-radius: 50%; background: var(--linie); box-shadow: 0 0 0 2px rgba(169, 137, 74, 0.25); } .trailer .hals { width: 18%; max-width: 90px; height: 18px; margin: 0 auto; background: var(--rahmen); border-radius: 0 0 3px 3px; } .trailer .sockel { width: 40%; max-width: 220px; height: 12px; margin: 0 auto; background: var(--rahmen); border-radius: 6px; } @media (max-width: 480px) { .trailer .monitor { --rd: 8px; --sw-b: 60px; --sw-h: 56px; } .trailer .hals { height: 12px; } .trailer .sockel { height: 9px; } } /* ---------------- Funktions-Kacheln: Porzellan ---------------- Wie ein Teller aus der Porzellanmanufaktur in Rudolstadt-Volkstedt: weisse Glasur, eine Doppellinie in Kobaltblau mit Rosetten in den Ecken, aussen ein feiner Goldrand. Das Kobalt liegt nah am Marineblau der Seite. Der Rahmen ist ein SVG als border-image (Neuner-Raster): Die Ecken mit den Rosetten bleiben fest, die Linien dazwischen werden gedehnt. Das SVG braucht width und height, sonst skaliert der Browser es auf die ganze Kachel, bevor er es zerschneidet, und die Rosetten verziehen sich. */ /* Kapitaelchen fuer die Titel. Lokal gehostet wie fonts.css, damit keine Anfrage an Google geht (OFL, aus dem Google-CSS vom 19.09.2026). */ @font-face { font-family: 'Playfair Display SC'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/playfair-display-sc-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Playfair Display SC'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/playfair-display-sc-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } .raster { row-gap: 1.6rem; } .karte { --kobalt: #1F3C7A; container-type: inline-size; text-align: center; padding: 0 0.25rem 0.1rem; border: 32px solid transparent; border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96' fill='none' stroke='%231F3C7A'%3E%3Cdefs%3E%3Cg id='e'%3E%3Cpath d='M32 4H4V32' stroke-width='1.2'/%3E%3Cpath d='M32 9H9V32' stroke-width='.55'/%3E%3Cg fill='%231F3C7A' stroke='none'%3E%3Cellipse cx='18' cy='14.2' rx='1.5' ry='2.6'/%3E%3Cellipse cx='18' cy='21.8' rx='1.5' ry='2.6'/%3E%3Cellipse cx='14.2' cy='18' rx='2.6' ry='1.5'/%3E%3Cellipse cx='21.8' cy='18' rx='2.6' ry='1.5'/%3E%3C/g%3E%3Ccircle cx='18' cy='18' r='1.3' fill='%23FFFEF8' stroke-width='.6'/%3E%3Cpath d='M24 24l3 3' stroke-width='.6'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23e'/%3E%3Cuse href='%23e' transform='matrix%28-1 0 0 1 96 0%29'/%3E%3Cuse href='%23e' transform='matrix%281 0 0 -1 0 96%29'/%3E%3Cuse href='%23e' transform='matrix%28-1 0 0 -1 96 96%29'/%3E%3Cpath d='M32 4H64M32 92H64M4 32V64M92 32V64' stroke-width='1.2'/%3E%3Cpath d='M32 9H64M32 87H64M9 32V64M87 32V64' stroke-width='.55'/%3E%3C/svg%3E") 32 / 32px stretch; border-radius: 3px; background: radial-gradient(120% 90% at 25% 15%, #FFFFFD 0%, #FBFAF4 55%, #F2EFE4 100%) border-box; box-shadow: 0 0 0 1px #C9A961, 0 0 0 3px #FFFEF8, 0 0 0 4px rgba(201, 169, 97, 0.55), 0 10px 22px -16px rgba(31, 60, 122, 0.45); } .karte h3 { margin: 0; /* Waechst mit der Kachel, damit auch lange Woerter in eine Zeile passen */ font: 400 clamp(0.95rem, 5.2cqi + 0.1rem, 1.2rem)/1.25 'Playfair Display SC', 'Playfair Display', Georgia, serif; letter-spacing: 0.06em; color: var(--kobalt); text-wrap: balance; hyphens: manual; } /* Zierlinie unter dem Titel: Linie, Raute, zwei Voluten, Raute, Linie */ .karte h3::after { content: ''; display: block; width: min(120px, 70%); height: 12px; margin: 0.55rem auto 0.7rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12' fill='none' stroke='%231F3C7A' stroke-width='.8'%3E%3Cpath d='M4 6H44M76 6H116'/%3E%3Cpath d='M48 6l3-3 3 3-3 3z' fill='%231F3C7A'/%3E%3Cpath d='M66 6l3-3 3 3-3 3z' fill='%231F3C7A'/%3E%3Cpath d='M60 6c-2-3.5-5.5-3-5.5 0M60 6c2-3.5 5.5-3 5.5 0'/%3E%3C/svg%3E") center / contain no-repeat; } .karte p { margin: 0; color: #3E4A63; }