/* =========================================================================== public/look.css - DER HUB-LOOK --------------------------------------------------------------------------- Wird als LETZTE Stildatei geladen und legt sich ueber alles. Die vorhandenen Regeln bleiben unangetastet - Abschalten heisst: die eine -Zeile in der index.html auskommentieren. GRUNDSATZ Wappengruen ist der einzige Akzent. Vier Bedeutungsfarben (Zusage-Gruen, Gold, Glut-Orange, Stahl-Blau) tragen Bedeutung, alles andere ist Grau in drei Stufen. Flaechen bleiben FLACH; Licht liegt nur an Kanten und hinter Wappen. Bewegung an wenigen Stellen, alles unter 300 ms, alles aus bei "Bewegung reduzieren". BAUSTEINE (01 Grund, 02 Kopfleiste und die Platte stehen jetzt in /portal.css) 03 Karten Eckwinkel und Leuchtstreifen am Anpfiff 04 Kacheln Lichtfleck, Anheben unter der Maus 05 Tabellen Balken hinter den Zahlen (Breite setzt look.js) 06 Bewegung Karten kommen nacheinander, Zahlen zaehlen hoch =========================================================================== */ /* RAHMEN-TEILE SIND UMGEZOGEN 01 Grund und 02 Kopfleiste standen frueher hier und wurden von portal.css mit "!important" ueberstimmt. Jetzt gibt es sie nur noch EINMAL - in /portal.css (Abschnitte "Grund" und "Rahmen"). Hier bleiben die Bausteine der einzelnen Bereiche - und zwar OHNE "!important": die Datei steht hinter dem eingebetteten Stil der index.html und gewinnt bei gleicher Gewichtung ohnehin. So kann jede Bereichsdatei (public/portal/*.css) sie schlicht ueberschreiben, ohne dass ein Wettruesten beginnt. */ :root{ /* Eigene Quelle, die bei jeder Suche nach "--rot" durchfaellt. Zeigt jetzt auf das Haus-Token, statt einen eigenen Wert zu halten - dann kann sie nicht mehr auseinanderlaufen. */ --look-rot-hell:var(--rot-hell, #7CCB92); } /* -------------------------------------------------------------- 03 Karten */ /* .platte steht in /portal.css (Baustein "Platte"). */ .h-wert .zahl{font-variant-numeric:tabular-nums} /* Anpfiff: roter Leuchtstreifen links, Eckwinkel rechts oben */ /* Formkurve der Mannschaft (home.js zeichnet die Balken) */ @keyframes look-wachsen{from{transform:scaleY(0)}to{transform:scaleY(1)}} /* ------------------------------------------------------------- 04 Kacheln */ /* ------------------------------------------------------------ 05 Tabellen */ /* Der Balken hinter der Zahl war als Block zu laut - jetzt eine feine Linie unter der Zahl, die den Anteil am Bestwert zeigt. */ .sx-tabelle td{position:relative;font-variant-numeric:tabular-nums} .sx-tabelle td[data-balken]{--w:0%} .sx-tabelle td[data-balken]::before{content:'';position:absolute;left:14%;right:14%;bottom:5px;height:2px; width:calc(var(--w) * .72);margin:0 auto;border-radius:1px;background:rgba(255,255,255,.22);pointer-events:none} .sx-tabelle td[data-balken="gut"]::before{background:rgba(51,192,106,.55)} .sx-tabelle td[data-balken="gold"]::before{background:rgba(212,166,42,.6)} .sx-tabelle td[data-balken="blau"]::before{background:rgba(95,168,199,.6)} .sx-tabelle td[data-balken="rot"]::before{background:rgba(47,160,94,0.45)} .sx-tabelle td.sx-nr{color:var(--silber-matt);font-family:var(--zahl);width:52px} .sx-tabelle td.sx-posk{width:64px} .sx-tabelle td.sx-posk .sx-pos{min-width:0;padding:3px 8px;font-size:.6rem} .sx-tabelle th[data-sort]{cursor:pointer;user-select:none} .sx-tabelle th[data-sort]:hover{color:var(--weiss)} .sx-tabelle tr.erster td{background:transparent} .sx-tabelle tr.erster td:first-child{box-shadow:inset 3px 0 0 var(--gold)} .sx-tabelle th.an{color:var(--look-rot-hell)} /* ------------------------------------------------------------ 06 Bewegung */ /* Das Hereinkommen der Karten und der Hauptknopf stehen in /portal.css (Abschnitt "Bewegung"). */ .t-zeile,.s-zeile{transition:transform .12s,border-color .12s} .t-zeile:hover,.s-zeile:hover{transform:translateX(2px)} @media (prefers-reduced-motion:reduce){ .t-zeile,.s-zeile{transition:none !important} } /* ========================================================================= 07 AUFSTELLUNGSBRETT - Perspektive wie im Fernsehen Der Platz liegt gekippt, die Plaettchen stehen aufrecht darauf. Alles nur Ansicht: die Plaetze bleiben, wo sie sind, Antippen geht wie vorher. Am Handy wird flacher gekippt, damit nichts zu klein wird. ========================================================================= */ .feld-kopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap;max-width:820px;margin:0 auto 4px; padding:10px 16px;background:var(--karbon);border:1px solid var(--linie-hell); border-radius:14px 14px 0 0;position:relative;overflow:hidden} .feld-kopf::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--rot); box-shadow:0 0 16px rgba(47,160,94,0.45)} .feld-kopf-wappen{width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(47,160,94,.45))} .feld-kopf > b{font-family:var(--anzeige);font-weight:900;font-size:1rem} .feld-chip{padding:4px 10px;border-radius:7px;border:1px solid var(--linie-hell); font-family:var(--eng);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--silber)} .feld-chip.rot{border-color:var(--rot);color:var(--look-rot-hell)} .feld-fort{margin-left:auto;display:flex;align-items:center;gap:10px;font-family:var(--eng); font-size:.66rem;letter-spacing:.14em;color:var(--silber-matt);text-transform:uppercase} .feld-fort i{font-style:normal} .feld-balken{width:120px;height:8px;border-radius:4px;background:var(--karbon-hoch); border:1px solid var(--linie-hell);overflow:hidden;display:block} .feld-balken b{display:block;height:100%;background:var(--zusage);transition:width .3s} .feld-buehne{max-width:820px;margin:-26px auto 0;perspective:1200px;perspective-origin:50% 36%; padding:0 0 6px} .feld{transform:rotateX(20deg);transform-origin:50% 100%;overflow:visible; border-radius:8px; box-shadow:0 60px 80px -30px rgba(0,0,0,.95); background: radial-gradient(ellipse at 15% 0%,rgba(255,255,255,.12),transparent 45%), radial-gradient(ellipse at 85% 0%,rgba(255,255,255,.12),transparent 45%), repeating-linear-gradient(180deg,#0d2617 0 8.33%,#113020 8.33% 16.66%)} .feld::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:8px; background:radial-gradient(ellipse at 50% 55%,transparent 50%,rgba(0,0,0,.55) 100%)} .feld-linien{--l:rgba(255,255,255,.45)} .f-mittellinie,.f-mittelkreis,.f-strafraum,.f-strafraum::after{box-shadow:0 0 8px rgba(255,255,255,.22)} .feld-linien{border:2px solid var(--l);border-radius:6px;inset:1.5%} /* Reihenlinien */ .f-reihe{position:absolute;height:2px;z-index:1;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(51,192,106,.55) 12%,rgba(51,192,106,.55) 88%,transparent)} /* Plaettchen stehen aufrecht auf dem gekippten Platz */ .platz{transform:translate(-50%,-50%) rotateX(-20deg);transform-origin:50% 100%; transform-style:preserve-3d;width:10%} .platz:hover{transform:translate(-50%,-50%) rotateX(-20deg) translateY(-4px) scale(1.06)} .p-schatten{position:absolute;left:50%;bottom:-6px;width:110%;height:16px;transform:translateX(-50%) rotateX(20deg); background:radial-gradient(ellipse,rgba(0,0,0,.65),transparent 70%);pointer-events:none;z-index:-1} .p-figur{border:2px solid var(--f);border-radius:16px;background:#191620; box-shadow:0 14px 30px -12px rgba(0,0,0,.95),0 0 0 3px rgba(0,0,0,.35)} .p-figur-bild{border-radius:14px; -webkit-mask-image:linear-gradient(#000 70%,transparent 100%);mask-image:linear-gradient(#000 70%,transparent 100%)} .platz:hover .p-figur{box-shadow:0 18px 36px -12px rgba(0,0,0,.95),0 0 26px color-mix(in srgb,var(--f) 55%,transparent)} .platz.mit-figur .p-tafel{margin-top:4px;border-bottom:2px solid var(--f);font-size:.62rem;padding:2px 6px} /* Freier Platz: gestricheltes Fenster */ .platz.leer{width:11.5%} .p-frei{width:74%;aspect-ratio:1;margin:0 auto;border-radius:14px;border:2px dashed rgba(255,255,255,.35); background:rgba(0,0,0,.22);display:flex;flex-direction:column;align-items:center;justify-content:center; color:rgba(255,255,255,.6);transition:.15s} .p-frei b{font-family:var(--eng);font-size:.7rem;letter-spacing:.14em} .p-frei small{font-size:.55rem;letter-spacing:.1em;color:var(--silber-matt);text-transform:uppercase;margin-top:2px} .platz.leer:hover .p-frei{border-color:var(--look-rot-hell);color:var(--look-rot-hell); box-shadow:0 0 0 6px rgba(47,160,94,0.2),0 0 12px rgba(47,160,94,0.45)} /* Kurzstatistik beim Zeigen */ .p-karte{display:none;position:absolute;left:104%;top:0;min-width:150px;padding:9px 11px;text-align:left; border-radius:10px;background:var(--karbon);border:1px solid var(--linie-hell); box-shadow:0 14px 30px -10px rgba(0,0,0,.9);font-size:.68rem;color:var(--silber);z-index:9} .p-karte b{display:block;color:var(--weiss);margin-bottom:4px;font-size:.72rem} .p-karte span{display:flex;justify-content:space-between;gap:8px} .p-karte em{font-style:normal;color:var(--weiss);font-weight:700} .p-karte i{font-style:normal;color:var(--silber-matt)} .platz:hover .p-karte[data-voll]{display:block} @media(max-width:760px){ .feld{transform:rotateX(12deg)} .platz{transform:translate(-50%,-50%) rotateX(-12deg)} .feld-buehne{padding-top:16px} .feld-fort{margin-left:0} .p-karte{display:none} } @media (prefers-reduced-motion:reduce){.feld-balken b{transition:none}} /* ========================================================================= 08 STARTSEITE - Buehne und Bildkacheln Bilder liegen unter public/images/: buehne.jpg (oder .png) das grosse Bild oben, 1920 x 600 empfohlen bereich-termine.jpg, bereich-kader.jpg, bereich-taktik.jpg ... je Kachel ein Bild, 600 x 400 empfohlen Fehlt ein Bild, faellt die Stelle auf den roten Look zurueck. ========================================================================= */ .sx-tabelle td.sx-matt{color:var(--silber-matt)} .sx-tabelle th,.sx-tabelle td{padding-left:8px;padding-right:8px} /* Rolle als Balken unter dem Spieler in der Kaderliste */ .s-zeile{position:relative;overflow:hidden} .s-zeile::after{content:'';position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:2px 2px 0 0; background:var(--balken,transparent)} .s-legende-stufen{margin-top:6px} .s-legende-stufen i.balken{width:14px;height:4px;border-radius:2px;display:inline-block;vertical-align:middle} /* Rueckennummer auf dem Feld: klare Plakette oben rechts am Fenster statt des kleinen blassen Punkts am Fuss */ .p-figur .p-figur-nr{left:auto;right:-6px;bottom:auto;top:-8px;min-width:26px;height:24px;line-height:22px; padding:0 6px;border-radius:7px;background:var(--nacht);color:#fff;border:1.5px solid var(--f); font-size:.78rem;font-weight:900;box-shadow:0 2px 8px rgba(0,0,0,.7)} /* Kaderliste: Ueberschriften je Mannschaftsteil */ .s-gruppenkopf{display:flex;align-items:center;gap:8px;margin:12px 4px 6px;font-family:var(--eng); font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--silber-matt)} .s-gruppenkopf:first-child{margin-top:2px} .s-gruppenkopf i{width:10px;height:10px;border-radius:3px;background:var(--silber-matt)} .s-gruppenkopf.gk-TW i{background:var(--gold)} .s-gruppenkopf.gk-DEF i{background:var(--stahl)} .s-gruppenkopf.gk-MF i{background:var(--zusage)} .s-gruppenkopf.gk-ST i{background:var(--rot)} .s-gruppenkopf::after{content:'';flex:1;height:1px;background:var(--linie)} /* Kaderliste: Gruppen einklappbar */ .s-gruppenkopf{cursor:pointer;user-select:none} .s-gruppenkopf b{margin-left:auto;font-weight:400;color:var(--silber-matt)} .s-gruppenkopf::after{flex:1 1 auto} .s-gruppenkopf.zu{opacity:.7}