/* * BigMic — gemeinsames Stylesheet aller Seiten. * * Farben, Formen und Maße sind aus den Apps übernommen (FlexiList und SportTimer, jeweils * ui/theme/Farben.kt und ui/theme/Theme.kt). Website und Apps sollen erkennbar zusammengehören: * derselbe Marken-Farbverlauf mit Glanzlicht, dieselben Kartenformen, dieselben Farbwerte. * * Bewusst OHNE externe Schriften, Skripte oder Bilder von fremden Servern. Damit werden * keine Daten an Dritte übertragen, es braucht kein Einwilligungsbanner und keine Cookies. */ :root { /* Marke — in hellem wie dunklem Design identisch, genau wie in den Apps */ --euro-blau: #003399; --euro-blau-hell: #5C8AD1; --gold: #FFC72C; --verlauf-oben: var(--euro-blau-hell); --verlauf-unten: var(--euro-blau); --auf-verlauf: var(--gold); --auf-verlauf-leise: #A9BFE0; /* Helles Design (Farben.kt: FarbenHell) */ --seite: #E5E5E5; --karte: #FAFAFA; --rahmen: #C8C8C8; --text: #003399; --neben: #5C8AD1; --flies: #333333; --loeschen: #E30613; /* Abschnittsfarben des SportTimers (Farben.kt: phase…) */ --phase-vorbereitung: #E8A317; --phase-aktivitaet: #1B8A4B; --phase-pause: #5C8AD1; /* Maße wie Masse.kt — der goldene Schnitt als Grundlage */ --ecke-gross: 14px; --ecke-karte: 10px; --glanz-hoehe: 34px; } /* * Dunkles Design — es gilt in zwei Fällen: * 1. Das Gerät steht auf dunkel und der Besucher hat nichts anderes gewählt. * 2. Der Besucher hat am Schalter oben rechts „dunkel" gewählt. * Die Wahl am Schalter setzt data-modus auf das -Element und sticht die * Geräteeinstellung damit aus — in beide Richtungen. * * Der Marken-Farbverlauf bleibt unverändert. Das ist in den Apps genauso: Der Kopfbereich * trägt die Marke und wechselt deshalb nicht die Farbe. */ @media (prefers-color-scheme: dark) { :root:not([data-modus="hell"]) { color-scheme: dark; --seite: #2A2E30; --karte: #383D40; --rahmen: #4B5154; --text: #86A8DC; --neben: #A9BFE0; --flies: #D8DBDD; --loeschen: #C1443C; --phase-vorbereitung: #FFC72C; --phase-aktivitaet: #35D68A; --phase-pause: #86A8DC; } } :root[data-modus="dunkel"] { color-scheme: dark; --seite: #2A2E30; --karte: #383D40; --rahmen: #4B5154; --text: #86A8DC; --neben: #A9BFE0; --flies: #D8DBDD; --loeschen: #C1443C; --phase-vorbereitung: #FFC72C; --phase-aktivitaet: #35D68A; --phase-pause: #86A8DC; } * { box-sizing: border-box; } body { margin: 0; background: var(--seite); color: var(--flies); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.65; } /* ══════════════════════════════════════════════════════════════════════════ Kopfbereich — die Marken-Fläche aus den Apps ══════════════════════════════════════════════════════════════════════════ */ /* * Farbverlauf von hellblau oben links nach euroblau unten rechts, unten abgerundet. * Genau die Fläche, mit der in den Apps jede Seite beginnt (MarkenFlaeche.kt). */ header.marke { background: linear-gradient(135deg, var(--verlauf-oben), var(--verlauf-unten)); border-radius: 0 0 var(--ecke-gross) var(--ecke-gross); padding: 26px 20px 20px; text-align: center; position: relative; overflow: hidden; } /* * Glanzlicht: weißer Verlauf von oben nach unten, der dem Kopfbereich die dezente * 3D-Wirkung gibt, die alle Apps des Hauses haben (Glanzlicht in MarkenFlaeche.kt). */ header.marke::before, footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--glanz-hoehe); background: linear-gradient(to bottom, rgba(255, 255, 255, .19), transparent); pointer-events: none; } /* * Eingestreute Zeichen als Muster: € auf den Seiten rund um FlexiList und BigMic, * die Stoppuhr auf der SportTimer-Seite. In den Apps ist es dasselbe Muster — * ein Euro-Symbol hätte in einer Sport-App nichts zu suchen. */ header.marke .deko { position: absolute; color: var(--gold); font-weight: 700; pointer-events: none; user-select: none; line-height: 1; } header.marke .deko svg { width: 1em; height: 1em; display: block; fill: currentColor; } header.marke .marke-logo, header.marke h1, header.marke .untertitel, header.marke nav { position: relative; z-index: 1; } /* * Die Wortmarke steht frei auf dem Farbverlauf — „Big" in hellem Blau, „Mic" in Gold, * darunter der Slogan. Dieselbe Fassung wie in den Apps (BigMicMarke.kt), deshalb ohne * helle Karte darunter: Die aufgehellten Farben tragen auf dem Verlauf von allein. */ header.marke .marke-logo { display: block; margin: 0 auto; } header.marke .marke-logo img { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .30)); } /* Startseite groß, Unterseiten kleiner — die beiden Breiten stehen im goldenen Schnitt */ header.marke h1.marke-logo { width: min(382px, 62%); } header.marke a.marke-logo { width: min(236px, 45%); margin-bottom: 12px; } /* Auf schmalen Handys darf die Marke mehr Platz einnehmen, sonst wirkt sie verloren */ @media (max-width: 520px) { header.marke h1.marke-logo { width: 78%; } header.marke a.marke-logo { width: 52%; } } /* Seitentitel der Unterseiten, in Gold wie die Kopfzeile in den Apps */ header.marke h1 { margin: 0; color: var(--auf-verlauf); font-size: 1.7rem; letter-spacing: .3px; text-shadow: 0 2px 6px rgba(0, 0, 0, .25); } header.marke .untertitel { margin: 5px 0 0; color: #DCE7F8; font-size: .95rem; } /* ══════════════════════════════════════════════════════════════════════════ Umschalter hell/dunkel ══════════════════════════════════════════════════════════════════════════ */ /* * Sonne oder Mond, ohne Rahmen, oben rechts im Kopf — wie in den Einstellungen der Apps. * Ohne Skript bleibt der Knopf verborgen, dann gilt die Einstellung des Geräts. */ .modus-schalter { position: absolute; top: 14px; right: 14px; z-index: 2; width: 42px; height: 42px; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, .14); color: var(--gold); cursor: pointer; display: grid; place-items: center; line-height: 0; } .modus-schalter:hover, .modus-schalter:focus-visible { background: rgba(255, 255, 255, .28); } .modus-schalter svg { width: 22px; height: 22px; fill: currentColor; } /* Im hellen Design steht der Mond für „umschalten auf dunkel" — und umgekehrt */ .modus-schalter .sonne { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-modus="hell"]) .modus-schalter .sonne { display: block; } :root:not([data-modus="hell"]) .modus-schalter .mond { display: none; } } :root[data-modus="dunkel"] .modus-schalter .sonne { display: block; } :root[data-modus="dunkel"] .modus-schalter .mond { display: none; } :root[data-modus="hell"] .modus-schalter .sonne { display: none; } :root[data-modus="hell"] .modus-schalter .mond { display: block; } /* ══════════════════════════════════════════════════════════════════════════ Navigation — wie die Tab-Leiste der Apps ══════════════════════════════════════════════════════════════════════════ */ nav { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } nav a { color: var(--gold); text-decoration: none; font-size: .9rem; padding: 6px 12px; border-radius: 8px; background: rgba(255, 255, 255, .12); } nav a:hover, nav a:focus { background: rgba(255, 255, 255, .24); } nav a[aria-current="page"] { font-weight: 700; background: rgba(255, 255, 255, .28); } /* ══════════════════════════════════════════════════════════════════════════ Inhalt — Karten wie in den Apps ══════════════════════════════════════════════════════════════════════════ */ main { max-width: 780px; margin: 0 auto; padding: 20px 16px 60px; } .karte { background: var(--karte); border: 1px solid var(--rahmen); border-radius: var(--ecke-karte); padding: 20px; margin-bottom: 16px; } h2 { color: var(--text); font-size: 1.25rem; margin: 0 0 12px; } h3 { color: var(--text); font-size: 1rem; margin: 20px 0 6px; } h3:first-of-type { margin-top: 6px; } p { margin: 0 0 12px; } p:last-child { margin-bottom: 0; } a { color: var(--neben); } ul { padding-left: 1.2em; } li { margin: 4px 0; } code { background: rgba(92, 138, 209, .14); border-radius: 4px; padding: 1px 5px; font-size: .92em; } .hinweis { border-left: 4px solid var(--gold); background: rgba(255, 199, 44, .12); padding: 12px 16px; border-radius: 0 8px 8px 0; margin: 16px 0; } .knopf { display: inline-block; background: var(--euro-blau); color: #fff; text-decoration: none; padding: 10px 20px; border-radius: 8px; font-weight: 600; } .knopf:hover { background: var(--euro-blau-hell); } /* * Merkmalsliste: statt Aufzählungspunkten das Zeichen der jeweiligen App — * € bei FlexiList, die Stoppuhr beim SportTimer. Über --zeichen umstellbar. */ .merkmale { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; --zeichen: "€"; } .merkmale.timer { --zeichen: "\23F1"; } .merkmale li { padding-left: 26px; position: relative; } .merkmale li::before { content: var(--zeichen); position: absolute; left: 0; color: var(--gold); font-weight: 700; } table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--rahmen); } th { color: var(--text); } /* ══════════════════════════════════════════════════════════════════════════ App-Kacheln der Startseite ══════════════════════════════════════════════════════════════════════════ */ /* * Jede App bekommt eine eigene Kachel mit Kopfstreifen im Marken-Farbverlauf. * So ist auf einen Blick zu sehen, wovon der folgende Abschnitt handelt. */ .app-karte { padding: 0; overflow: hidden; } .app-kopf { background: linear-gradient(135deg, var(--verlauf-oben), var(--verlauf-unten)); padding: 14px 20px; position: relative; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .app-kopf::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 16px; background: linear-gradient(to bottom, rgba(255, 255, 255, .19), transparent); } .app-kopf h2 { margin: 0; color: var(--gold); position: relative; font-size: 1.3rem; } .app-kopf .rolle { color: #DCE7F8; font-size: .9rem; position: relative; } .app-inhalt { padding: 18px 20px 20px; } /* Zustand einer App: „im Play Store" oder „in Arbeit" */ .stand { display: inline-block; font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(255, 199, 44, .18); color: var(--text); border: 1px solid var(--gold); margin-bottom: 10px; } /* Kennzahlen wie Preis und Voraussetzung, zweispaltig auf breiten Fenstern */ .eckdaten { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .eckdaten div { background: rgba(92, 138, 209, .10); border-radius: 8px; padding: 10px 14px; } .eckdaten dt { font-size: .8rem; color: var(--neben); text-transform: uppercase; letter-spacing: .5px; } .eckdaten dd { margin: 2px 0 0; color: var(--text); font-weight: 700; } /* * Die drei Abschnitte des SportTimers in ihren Farben — Vorbereitung Gold, * Aktivität Grün, Pause Blau. Dieselbe Zuordnung wie in der App. */ .phasen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; list-style: none; padding: 0; margin: 0; } .phasen li { border-left: 5px solid var(--rahmen); background: rgba(92, 138, 209, .08); border-radius: 0 8px 8px 0; padding: 8px 12px; margin: 0; } .phasen .vorbereitung { border-left-color: var(--phase-vorbereitung); } .phasen .aktivitaet { border-left-color: var(--phase-aktivitaet); } .phasen .pause { border-left-color: var(--phase-pause); } .phasen b { color: var(--text); display: block; } /* ══════════════════════════════════════════════════════════════════════════ Fußbereich ══════════════════════════════════════════════════════════════════════════ */ footer { background: linear-gradient(135deg, var(--verlauf-oben), var(--verlauf-unten)); border-radius: var(--ecke-gross) var(--ecke-gross) 0 0; padding: 18px 20px; text-align: center; color: #DCE7F8; font-size: .85rem; position: relative; overflow: hidden; } footer p { position: relative; } footer a { color: var(--gold); text-decoration: none; margin: 0 8px; } footer a:hover { text-decoration: underline; } /* * Verweis auf die andere Sprachfassung — steht über den Karten, damit ein Prüfer * von Google die englische Fassung sofort findet. */ .sprachwahl { margin: 0 0 14px; text-align: right; font-size: .9rem; } .sprachwahl a { display: inline-block; background: var(--karte); border: 1px solid var(--rahmen); border-radius: 999px; padding: 5px 14px; text-decoration: none; } .sprachwahl a:hover { border-color: var(--neben); }