|
|
| Zeile 1: |
Zeile 1: |
| /* ========================================
| |
| Pixo-Kacheln (Spiel-Grid)
| |
| ======================================== */
| |
| /* Grid-Container für Start-Kacheln */
| |
| .pixo-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(3, 1fr);
| |
| gap: 16px;
| |
| width: 100%;
| |
| }
| |
|
| |
|
| /* BASIS-KARTE */
| |
| .pixo-card {
| |
| display: block;
| |
| width: 100%;
| |
| margin: 0;
| |
| border-radius: 25px;
| |
| /* border: 2px solid #333; */
| |
| background: transparent;
| |
| box-shadow: 0 5px 16px rgba(0,0,0,0.5);
| |
| overflow: hidden;
| |
| font-family: inherit;
| |
| }
| |
|
| |
| /* Normale Karte mit Hero-Bild */
| |
| .pixo-card-hero {
| |
| position: relative;
| |
| width: 100%;
| |
| height: 150px;
| |
| background: transparent;
| |
| overflow: hidden;
| |
| }
| |
|
| |
| /* Bild im Hero-Bereich */
| |
| .pixo-card-hero img {
| |
| width: 100%;
| |
| height: 180px;
| |
| object-fit: cover;
| |
| border-radius: 20px;
| |
| background: transparent;
| |
| display: block;
| |
| }
| |
|
| |
| /* Karten OHNE Hero-Bild */
| |
| .pixo-card--nohero .pixo-card-hero {
| |
| height: auto; /* keine feste Höhe */
| |
| padding: 0;
| |
| margin: 0;
| |
| border-radius: 20px;
| |
| background: transparent;
| |
| border: 0;
| |
| }
| |
|
| |
| /* Falls irgendwo Standard-Rand auf Bildern sitzt, hier nochmal hart entfernen */
| |
| .pixo-card-hero a,
| |
| .pixo-card-hero img {
| |
| border: 0 !important;
| |
| margin: 0 !important;
| |
| padding: 0 !important;
| |
| background: transparent !important;
| |
| box-shadow: none !important;
| |
| }
| |
| /* Schwarzer Balken unter dem Hero-Bild */
| |
| .pixo-card-title-bar {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: flex-end;
| |
| width: 100%;
| |
| height: 30px;
| |
| background: #000;
| |
| padding: 6px 12px;
| |
| box-sizing: border-box;
| |
| }
| |
|
| |
| /* Titel rechtsbündig auf der Title-Bar */
| |
| .pixo-card-title-text {
| |
| position: static;
| |
| display: block;
| |
| font-size: 1.3rem;
| |
| font-weight: 700;
| |
| color: #fff;
| |
| text-shadow: 0 0 4px rgba(0,0,0,0.9);
| |
| white-space: nowrap;
| |
| padding: 0px 0px 2px 0px;
| |
| text-align: right;
| |
| }
| |
|
| |
| .pixo-card-hero-inner {
| |
| display: inline-block;
| |
| }
| |
