/* =========================================================================== Frankfurt Sim - gemeinsames Stylesheet Zwei Leitgedanken: 1) BEAMER-TAUGLICHKEIT. Die Klasse schaut auf eine ca. 2,2 m breite Projektion, oft aus einigen Metern Entfernung. Beamer waschen duenne Schrift und schwache Kontraste aus. Deshalb: groessere Grundschrift (19px statt der ueblichen 16px), kraeftigere Schriftschnitte, sattere Farben und dunklerer Text als bei einem reinen Bildschirm-Design. 2) BEREICHSFARBEN ALS ORIENTIERUNG. Jedes Aufgabengebiet hat eine eigene Farbe und ein eigenes Symbol, die UEBERALL gleich verwendet werden - in der Navigation, im farbigen Kopfband der Seite und in den Karten- Ueberschriften. So erkennen die Schueler auf einen Blick "die gruene Seite ist der Verkauf, die orange das Personal", auch quer durch den Raum. Das ist bewusst kein Selbstzweck: Farbe ersetzt hier Lesearbeit. =========================================================================== */ :root { /* --- Grundfarben (kontraststark fuer Projektion) --- */ --bg-main: #eef2f7; --panel-bg: #ffffff; --border: #cbd5e1; --text-main: #0f172a; --text-muted: #52637a; /* --- Bereichsfarben: eine pro Aufgabengebiet --- */ --area-map: #0284c7; /* Stadtkarte / Ueberblick */ --area-store: #15803d; /* Filiale & Verkauf */ --area-hr: #ea580c; /* Personal */ --area-money: #7c3aed; /* Finanzen */ --area-target: #db2777; /* Zielscheibe / Reflexion */ --area-help: #0d9488; /* Anleitung */ /* --- Signalfarben (Status, Rueckmeldung) --- */ --accent-blue: #0284c7; --accent-green: #15803d; --accent-gold: #d97706; --accent-purple: #7c3aed; --accent-red: #dc2626; --accent-lock: #7c8ca0; --shadow: 0 4px 10px -2px rgba(15,23,42,0.10), 0 2px 5px -2px rgba(15,23,42,0.06); --shadow-lift: 0 10px 22px -6px rgba(15,23,42,0.22); --radius: 14px; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', 'Trebuchet MS', system-ui, sans-serif; } /* Grundschriftgroesse bewusst erhoeht - siehe Beamer-Hinweis oben. */ html { font-size: 19px; } body { background-color: var(--bg-main); /* Dezentes Punktraster: gibt der Flaeche Textur, ohne abzulenken. */ background-image: radial-gradient(circle at 1px 1px, rgba(15,23,42,0.05) 1px, transparent 0); background-size: 22px 22px; color: var(--text-main); padding: 18px; animation: page-fade-in 0.35s ease; } @keyframes page-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* --- Kopfbereich mit farbigem Bereichsband ------------------------------- */ header { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; background: var(--panel-bg); padding: 20px 26px 18px; border-radius: var(--radius); border: 2px solid var(--border); box-shadow: var(--shadow); margin-bottom: 18px; } /* Das farbige Band oben zeigt, in welchem Bereich man gerade ist. Die Seite setzt dafuer data-area="store" o.ae. auf . */ header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: var(--area-current, var(--area-map)); } header h2 { font-size: 1.5rem; letter-spacing: -0.3px; } .header-titles { display: flex; flex-direction: column; gap: 4px; } .round-label { font-size: 0.85rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; } body[data-area="map"] { --area-current: var(--area-map); } body[data-area="store"] { --area-current: var(--area-store); } body[data-area="hr"] { --area-current: var(--area-hr); } body[data-area="money"] { --area-current: var(--area-money); } body[data-area="target"] { --area-current: var(--area-target); } body[data-area="help"] { --area-current: var(--area-help); } /* --- Navigation: jede Seite in ihrer Bereichsfarbe ----------------------- */ .nav-links { display: flex; gap: 10px; flex-wrap: wrap; } .nav-links a { text-decoration: none; padding: 11px 16px; border-radius: 10px; background: #e8edf3; color: var(--text-main); font-weight: 700; font-size: 0.95rem; border-bottom: 4px solid #cbd5e1; transition: background 0.15s ease, transform 0.12s ease; } .nav-links a:hover { background: #dbe3ec; transform: translateY(-2px); } .nav-links a:active { transform: translateY(1px); border-bottom-width: 2px; } .nav-links a.active { color: #fff; } .nav-links a[data-area="map"] { border-bottom-color: #0284c7; } .nav-links a[data-area="store"] { border-bottom-color: #15803d; } .nav-links a[data-area="hr"] { border-bottom-color: #ea580c; } .nav-links a[data-area="money"] { border-bottom-color: #7c3aed; } .nav-links a[data-area="target"] { border-bottom-color: #db2777; } .nav-links a[data-area="help"] { border-bottom-color: #0d9488; } .nav-links a.active[data-area="map"] { background: #0284c7; } .nav-links a.active[data-area="store"] { background: #15803d; } .nav-links a.active[data-area="hr"] { background: #ea580c; } .nav-links a.active[data-area="money"] { background: #7c3aed; } .nav-links a.active[data-area="target"] { background: #db2777; } .nav-links a.active[data-area="help"] { background: #0d9488; } /* --- Karten -------------------------------------------------------------- */ .card { background: var(--panel-bg); border: 2px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); transition: box-shadow 0.2s ease; } .card:hover { box-shadow: var(--shadow-lift); } .card-title { font-size: 1.15rem; font-weight: 800; margin-bottom: 12px; color: var(--area-current, var(--text-main)); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* --- Bedienelemente: gross genug fuer Projektion und schnelle Klicks ---- */ label { display: block; font-weight: 700; font-size: 0.92rem; color: var(--text-muted); margin-bottom: 6px; } input[type="number"], input[type="text"], input[type="password"], select, textarea { width: 100%; padding: 12px 14px; font-size: 1rem; font-weight: 600; border: 2px solid var(--border); border-radius: 10px; background: #fff; color: var(--text-main); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--area-current, var(--area-map)); box-shadow: 0 0 0 4px rgba(2,132,199,0.18); } button, .btn { font-size: 1rem; font-weight: 800; cursor: pointer; border: none; border-radius: 10px; padding: 13px 20px; background: var(--area-current, var(--area-map)); color: #fff; border-bottom: 4px solid rgba(0,0,0,0.22); transition: transform 0.1s ease, box-shadow 0.15s ease, filter 0.15s ease; } button:hover, .btn:hover { filter: brightness(1.08); box-shadow: var(--shadow-lift); } button:active, .btn:active { transform: translateY(2px); border-bottom-width: 2px; } button:disabled, .btn:disabled { filter: grayscale(0.6); cursor: not-allowed; } /* --- Status-Rueckmeldungen ---------------------------------------------- */ .status-badge { padding: 7px 13px; border-radius: 999px; font-size: 0.85rem; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; animation: badge-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes badge-pop { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } .status-green { background: #dcfce7; color: #14532d; border: 2px solid #22c55e; } .status-yellow { background: #fef3c7; color: #78350f; border: 2px solid #f59e0b; } .status-red { background: #fee2e2; color: #7f1d1d; border: 2px solid #ef4444; } /* --- Banner -------------------------------------------------------------- */ #unlock-banner, #event-banner { max-width: 100%; margin: 0 0 18px; padding: 15px 22px; border-radius: 12px; font-weight: 700; font-size: 1rem; display: none; animation: banner-slide-in 0.35s ease; border-left: 8px solid; } #unlock-banner { background: #dcfce7; color: #14532d; border-color: #22c55e; } #event-banner { background: #fef3c7; color: #78350f; border-color: #f59e0b; } #unlock-banner.show, #event-banner.show { display: block; } @keyframes banner-slide-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } } /* --- Rundentimer: soll auch aus der letzten Reihe lesbar sein ----------- */ #round-timer { display: inline-block; padding: 9px 20px; border-radius: 999px; font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; border: 2px solid transparent; transition: background 0.3s ease, color 0.3s ease; } #round-timer.timer-normal { background: #e0f2fe; color: #075985; border-color: #7dd3fc; } #round-timer.timer-warning { background: #fef3c7; color: #78350f; border-color: #fbbf24; } #round-timer.timer-critical { background: #fee2e2; color: #7f1d1d; border-color: #f87171; animation: timer-pulse 1s infinite; } @keyframes timer-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(1.06); } } /* --- Gesperrte Bereiche -------------------------------------------------- */ .locked-cell { opacity: 0.45; filter: grayscale(0.5); } .locked-note { font-size: 0.72rem; color: var(--accent-lock); display: block; margin-top: 3px; font-weight: 700; } #locked-view { display: none; max-width: 560px; margin: 70px auto; text-align: center; } #locked-view .lock-icon { font-size: 3.4rem; margin-bottom: 12px; } #locked-view a { display: inline-block; margin-top: 18px; padding: 13px 26px; background: #0284c7; color: white; border-radius: 10px; text-decoration: none; font-weight: 800; } /* --- Einblendungen und Konfetti ----------------------------------------- */ #sim-toast { animation: toast-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); font-size: 1.05rem; } @keyframes toast-pop { from { opacity: 0; transform: translate(-50%, -16px); } to { opacity: 1; transform: translate(-50%, 0); } } @keyframes confetti-fall { to { transform: translateY(100vh) rotate(360deg); opacity: 0; } } /* --- Zielscheibe --------------------------------------------------------- */ .target-card svg circle { transition: filter 0.15s ease; } .target-card svg circle:hover { filter: brightness(0.9); } /* --- Kennzahlen-Kacheln: die wichtigsten Zahlen gross und ruhig --------- */ .kpi-box, .kpi-value, .kpi-val { font-variant-numeric: tabular-nums; } .kpi-value, .kpi-val { font-size: 1.6rem; font-weight: 800; } .kpi-label { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); } .kpi-icon { font-size: 1.8rem; } /* Auf kleinen Anzeigen (Schueler-Laptops) wieder etwas kompakter. */ @media (max-width: 900px) { html { font-size: 17px; } body { padding: 12px; } .card { padding: 16px; } } /* --- Wochenabschluss-Animation: Warenfluss vom Händler bis zur Kundschaft --- Flaches Design mit kräftigen Konturen und kleiner Farbpalette, damit auch auf der Projektion sofort erkennbar ist, was passiert. Reines SVG + CSS - der Pi hat keinen Internetzugang für Animationsbibliotheken. */ @keyframes belt-run { from { transform: translateX(0); } to { transform: translateX(46px); } } @keyframes box-travel { from { transform: translateX(-30px); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { transform: translateX(330px); opacity: 0; } } @keyframes coin-pop { from { transform: translateY(0) scale(0.4); opacity: 0; } 35% { opacity: 1; } to { transform: translateY(-46px) scale(1.1); opacity: 0; } } @keyframes shop-bounce{ 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes truck-nudge{ 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } } .flow-belt { animation: belt-run 0.7s linear infinite; } .flow-box { animation: box-travel 3.2s linear infinite; } .flow-coin { animation: coin-pop 1.9s ease-out infinite; } .flow-shop { animation: shop-bounce 2.4s ease-in-out infinite; } .flow-truck { animation: truck-nudge 1.6s ease-in-out infinite; }