/* site.css — MP-6: geteiltes Stylesheet für alle Sprachen/Seiten der muku.ch-Marketingwebsite. Eine Datei für Start- und beide Spielseiten, Look-and-Feel je Seite über eine Klasse am (page-home/page-muku/ page-race) und ein paar CSS-Variablen — kein Duplikat je Sprache, die Übersetzungen ändern nur Text, nie Layout/Farbe. Nutzer-Vorgabe 2026-08-19: stilistisch an id/impressum.html und id/datenschutz.html angleichen (dunkler Verlauf, Glas-Karten, ruhige Akzentfarbe) statt der ersten, hellen Fassung -- dieselbe Bauform, damit die Website nicht wie ein Bruch zu den bereits verlinkten Rechtsseiten wirkt. Anders als dort (MG-494: bewusst EINE neutrale Farbe für alle Spiele) bekommen hier die beiden SPIELSEITEN trotzdem ihren eigenen Akzentton (Grün/Gold) — der dunkle Verlauf und die Glas-Karten bleiben aber auf allen drei Seiten identisch, das ist der eigentliche Wiedererkennungswert. Kein Web-Font-Import: Systemschrift wie bei den Rechtsseiten ('Segoe UI'), keine externe Anfrage, keine Ladezeit. */ :root { --bg-1: #253040; --bg-2: #161c25; --bg-3: #0d1117; --text: #e6e9ee; --text-soft: #9aa4b2; --card-bg: rgba(255,255,255,0.05); --card-border: rgba(255,255,255,0.13); --accent: #9FC3E8; /* neutraler Plattform-Ton (wie id/impressum.html) */ --accent-strong: #7FE0FF; --accent-ink: #0d1117; /* dunkler Text auf hellem Akzent-Knopf */ --radius: 14px; --maxw: 760px; --font: 'Segoe UI', Arial, sans-serif; } body.page-muku { --accent: #9fe3b0; --accent-strong: #6fe89f; } body.page-race { --accent: #f0c83c; --accent-strong: #ff8a7a; } * { box-sizing: border-box; min-width: 0; } html { scroll-behavior: smooth; } body { margin: 0; background: radial-gradient(ellipse at 50% 0%, var(--bg-1) 0%, var(--bg-2) 60%, var(--bg-3) 100%); background-color: var(--bg-3); color: var(--text); font-family: var(--font); font-size: 17px; line-height: 1.6; -webkit-text-size-adjust: 100%; overflow-x: hidden; } a { color: var(--accent-strong); } a:hover { opacity: 0.85; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } /* ---------- Kopf ---------- */ /* Zwei Zeilen statt einer engen Dreier-Reihe (Marke + drei Nav-Links + vier Sprach-Links passen auf keinem Telefon nebeneinander) -- Zeile 1 bleibt kurz (Marke + Sprachumschalter), Zeile 2 traegt die Navigation und darf frei umbrechen. Klassischer Flexbox-Fallstrick sonst: Flex-Kinder duerfen ohne min-width:0 nicht unter ihre Inhaltsbreite schrumpfen und sprengen den Header seitlich, statt umzubrechen. */ header.top { border-bottom: 1px solid var(--card-border); } header.top .bar { max-width: var(--maxw); margin: 0 auto; padding: 16px 20px 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } header.top .brand { display: flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap; } /* MP-6 Nachtrag: das Logo-Bild ist jetzt ein freigestelltes Portrait (transparenter Hintergrund), kein quadratisches Icon mehr -- border- radius/box-shadow eines Icons wuerden hier nichts abrunden (nichts Sichtbares reicht bis in die Ecken) bzw. einen rechteckigen Schatten um die transparenten Raender zeichnen. drop-shadow folgt stattdessen dem Alphakanal. */ /* width fix + height:auto statt fixer Hoehe -- dasselbe height:auto- Prinzip wie bei .screenshot (s. dort): das Portrait ist nicht quadratisch (Ohren breiter als der Kopf hoch ist) und hat sein Seitenverhaeltnis schon einmal geaendert (erste Fassung eng geschnitten, zweite mit ganzen Ohren+Fuessen) -- eine fixe Hoehe wuerde bei der naechsten Aenderung wieder verzerren. */ header.top .brand img { display: block; width: 32px; height: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); vertical-align: middle; } /* MP-165-Nachtrag (Markus-Befund, 2026-09-08): die erste Fassung hatte den Zusatz auf eine EIGENE, engere Laufweite/Groesse eingestellt (0.22em/9px) statt die Optik des fruehren Startseiten-Hero (.brand-hero-word, jetzt entfernt) einfach verkleinert zu uebernehmen -- Nutzer-Vorgabe: "wie es vorher auf der Startseite war, nur kleiner, gleiche Hoehe wie das Icon". Jetzt DIESELBEN Werte wie dort (letter-spacing 1px/0.16em, font-weight 800/600), nur proportional herunterskaliert, statt neu erfundener Werte -- die Gesamt-Hoehe (Name+Zusatz) landet damit bei ~28px, ungefaehr auf Hoehe des 32x28px-Icons daneben (align-items:center auf .brand zentriert den Rest). */ .brand-word { display: flex; flex-direction: column; line-height: 1.05; } .brand-name { font-weight: 800; font-size: 19px; color: var(--accent); letter-spacing: 1px; text-shadow: 0 2px 12px rgba(0,0,0,0.8); } .brand-tag { font-size: 9px; font-weight: 600; color: var(--text-soft); letter-spacing: 0.16em; text-transform: uppercase; } header.top nav { max-width: var(--maxw); margin: 0 auto; padding: 0 20px 16px; display: flex; justify-content: center; gap: 8px 16px; flex-wrap: wrap; font-size: 0.92em; } header.top nav a { color: var(--text-soft); text-decoration: none; white-space: nowrap; } header.top nav a:hover, header.top nav a.current { color: var(--accent); text-decoration: underline; } .langswitch { display: flex; gap: 8px; font-size: 0.82em; } .langswitch a { color: var(--text-soft); text-decoration: none; padding: 2px 7px; border-radius: 6px; } .langswitch a.current { color: var(--accent); background: rgba(255,255,255,0.09); font-weight: 700; } .langswitch a:hover { color: var(--accent); } /* ---------- Hero ---------- */ .hero { padding: 48px 0 40px; text-align: center; } /* MP-165 (Nutzer-Vorgabe, 2026-09-08): Muku links, Begruessungstext rechts daneben -- ersetzt den vorherigen zentrierten Logo-Lockup (.brand-hero, Icon+Wortmarke gestapelt) samt der "Coole Spiele fuer coole Kids"- Ueberschrift/des Lead-Texts darunter. Die Wortmarke "muku.ch"/"Apps & Games" steht seit MP-165 bereits im Kopf jeder Seite (header.top .brand), eine zweite, grosse Wiederholung hier auf der Startseite ist damit nicht mehr noetig. Mobil gestapelt (Bild ueber Text, zentriert), ab 620px nebeneinander -- dieselbe Breakpoint-Logik wie .tiles weiter unten. */ .hero-intro { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; } @media (min-width: 620px) { .hero-intro { flex-direction: row; align-items: center; text-align: left; gap: 32px; } } .hero-intro-img { /* Freigestelltes Portrait (transparenter Hintergrund) statt Icon -- drop-shadow folgt dem Alphakanal, box-shadow wuerde ein Rechteck um die transparenten Raender zeichnen (s. header.top .brand img). height:auto statt fixer Hoehe: nicht quadratisch (Ohren breiter als der Kopf hoch ist), und das Seitenverhaeltnis hat sich schon einmal geaendert -- dieselbe Lehre wie bei .screenshot. */ width: 128px; height: auto; flex: 0 0 auto; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.55)); } .hero-intro-text h1 { font-size: clamp(24px, 5vw, 34px); line-height: 1.2; margin: 0 0 10px; letter-spacing: 0.5px; color: var(--accent); text-shadow: 0 2px 12px rgba(0,0,0,0.8); } .hero-intro-text p { font-size: 1.05em; color: var(--text-soft); margin: 0; max-width: 46em; } /* ---------- Kacheln (Startseite) ---------- */ .tiles { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 32px 0; } @media (min-width: 620px) { .tiles { grid-template-columns: 1fr 1fr; } } .tile { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); backdrop-filter: blur(6px); padding: 24px; text-decoration: none; color: inherit; display: block; transition: transform .15s, box-shadow .15s, border-color .15s; } .tile:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.4); border-color: var(--accent); opacity: 1; } .tile img { width: 56px; height: 56px; border-radius: 14px; margin-bottom: 12px; } .tile h3 { margin: 0 0 8px; font-size: 1.2em; color: var(--accent); } .tile p { margin: 0; color: var(--text-soft); font-size: 0.96em; } .tile .go { display: inline-block; margin-top: 12px; color: var(--accent-strong); font-weight: 700; font-size: 0.92em; } /* ---------- Abschnitte ---------- */ section { padding: 28px 0; } section h2 { font-size: 1.4em; margin: 0 0 14px; color: var(--accent); } .card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); backdrop-filter: blur(6px); padding: 24px; color: var(--text); } .story-img { display: block; width: 200px; height: auto; margin: 20px auto 0; border-radius: var(--radius); filter: drop-shadow(0 10px 20px rgba(0,0,0,0.45)); } .values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; list-style: none; margin: 20px 0 0; padding: 0; } @media (min-width: 480px) { .values { grid-template-columns: repeat(4, 1fr); } } .values li { background: rgba(255,255,255,0.06); border: 1px solid var(--card-border); color: var(--text); border-radius: 12px; padding: 14px 12px; text-align: center; font-size: 0.9em; font-weight: 600; } /* ---------- Spielseiten: für Kinder / für Eltern ---------- */ .cta { display: inline-block; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 800; font-size: 1.15em; padding: 16px 36px; border-radius: 999px; box-shadow: 0 10px 28px rgba(0,0,0,0.5); margin: 10px 0 4px; } .cta:hover { opacity: 0.9; } .checklist { list-style: none; margin: 12px 0 0; padding: 0; } .checklist li { padding: 8px 0 8px 30px; position: relative; border-bottom: 1px solid var(--card-border); color: var(--text); } .checklist li:last-child { border-bottom: none; } .checklist.yes li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-strong); font-weight: 800; } .checklist.no li::before { content: "–"; position: absolute; left: 4px; color: var(--text-soft); font-weight: 800; } /* ---------- Screenshot-Galerie (MP-6 Nachtrag 2026-08-20) --------------- Klick auf ein Vorschaubild oeffnet die Vollbild-Lightbox mit Vor/Zurueck (assets/js/gallery.js). Raster aus Vorschaubildern statt eines einzelnen Screenshots -- Nutzer-Vorgabe. */ .gallery-section { padding-top: 8px; text-align: center; } /* Erstes Bild gross (dieselbe Rolle wie zuvor der einzelne Screenshot), der Rest als kleines Raster darunter -- Nutzer-Vorgabe 2026-08-20. max-width unterscheidet sich je Seite: Mukus-Adventure-Bilder sind Hochformat (schmal wirkungsvoll), Nino's-Race-Bilder Querformat (brauchen mehr Breite, um erkennbar zu bleiben). */ .gallery-featured { display: inline-block; width: 100%; max-width: 260px; margin: 0 0 14px; } body.page-race .gallery-featured { max-width: 480px; } .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; } @media (min-width: 480px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } } .gallery-thumb { padding: 0; border: 1px solid var(--card-border); background: var(--card-bg); border-radius: 12px; overflow: hidden; line-height: 0; cursor: pointer; transition: border-color .15s, transform .15s; } .gallery-thumb:hover { border-color: var(--accent); transform: translateY(-2px); } .gallery-thumb img { /* width:100% + height:auto, nicht die width/height-HTML-Attribute pur uebernehmen -- dieselbe Lehre wie beim fruehreren .screenshot: eine Regel, die nur EINE Dimension setzt, laesst die andere auf das HTML- Attribut zurueckfallen und kann so ein falsches Verhaeltnis erzeugen, wenn die Rastersspalte schmaler/breiter als das Attribut ist. */ display: block; width: 100%; height: auto; } /* Natives