/* --------------------------------------------------------------------------- Nunito, mitgeliefert - kein Abruf bei einem fremden Dienst. Seit dem 22.09.2026 nach Marios Klickmodell; bis dahin Inter. Eine Datei, 39 kB, mit allen deutschen Zeichen. Die Ziffern sind von Haus aus gleich breit - Zahlen springen beim Hochzaehlen nicht. font-display:swap heisst: der Text steht sofort in der Systemschrift da und wechselt, sobald die Datei geladen ist. Niemand sieht eine leere Seite, auch nicht im schlechten Konferenz-WLAN. Lizenz: SIL Open Font License 1.1, siehe schrift/OFL.txt --------------------------------------------------------------------------- */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url(schrift/nunito-latin.woff2) format('woff2'); } /* =========================================================================== Punktlicht - Gestaltung. Farben und Schrift nach Marios Klickmodell vom 22.09.2026: Nachtblau #243E63 als Traeger, Gold fuer die Lichtpunkte der Wortmarke, weiche Flaechen mit Schatten statt Linien. Rot nur noch fuer "Loeschen". Die Startseite der Decks hat ein eigenes Stilblatt (decks.css); hier steht, was alle anderen Seiten brauchen. Die Schrift wird mitgeliefert und liegt auf demselben Server - es gibt keinen Abruf bei einem fremden Dienst, und die Anwendung laeuft in einem Netz ohne Internetzugang. Grundsaetze: grosse Tippziele, ein Bildschirm je Frage, keine Scrollpflicht auf dem Handy, sichtbarer Tastaturfokus, Bewegung nur wenn erwuenscht. Die Leinwand ist aus zehn Metern lesbar - und ebenso im geteilten Bildschirm einer Videokonferenz, wo sie oft nur ein Drittel so gross ankommt. =========================================================================== */ :root { --blau: #243E63; --blau-hell: #34557F; --blau-zart: #E6ECF4; --rot: #A23B32; --tinte: #2E3A47; --grau: #66707C; --grau-hell: #8A939D; --linie: #E3E6EA; --papier: #FAFAFB; --feld: #ffffff; --gruen: #2F7A57; --gold: #E3A63A; --r: 14px; --schatten: 0 7px 18px rgba(31,56,100,.12), 0 2px 5px rgba(31,56,100,.08); /* Nunito zuerst, danach die Systemschrift des Geraets als Rueckfall - falls die Datei nicht ankommt, sieht es anders aus, aber nie kaputt. */ --sans: 'Nunito', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace; /* Sechs Toene fuer das Ringdiagramm. Unterscheidbar, aber ruhig - keine Signalfarben, weil eine Schulform nicht "gefaehrlich" ist. Die Reihenfolge ist die der Optionen, nicht der Groesse. */ --ring1: #243E63; --ring2: #2f7d8c; --ring3: #8d5bb5; --ring4: #b5701f; --ring5: #c2233a; --ring6: #5a6b80; } /* --------------------------------------------------------------------------- Dunkle Fassung der Leinwand. Umgeschaltet wird im Moderationspult; gesetzt wird data-thema am -Element, schon serverseitig, damit beim Laden nichts aufblitzt. Was NICHT dunkel wird: der Bildrahmen beim Fragetyp "punkte". Ein Grundriss, eine Landkarte, eine hochgeladene Grafik sind Inhalt und werden nicht eingefaerbt, nur weil die Seite dunkel ist. Die Karte bleibt hell und steht als helle Flaeche im dunklen Raum - genau so soll sie auch wirken. Kein reines Schwarz: auf einem Beamer bildet sich darauf sichtbares Streifenmuster, und der Kontrast zu weisser Schrift ist unangenehm hart. --------------------------------------------------------------------------- */ :root[data-thema="dunkel"], :root[data-darstellung="dunkel"] { --blau: #7aa9e0; --blau-hell: #9cc2ee; --blau-zart: #24384f; --rot: #ff7a8d; --tinte: #e9eff7; --grau: #a3b6cc; --grau-hell: #7488a1; --linie: #2c4059; --papier: #0f1b2d; --feld: #16243a; --gruen: #4cc79b; /* Auf dunklem Grund brauchen dieselben Toene mehr Helligkeit, sonst verschwinden sie im Hintergrund. */ --ring1: #6fa4de; --ring2: #4fc0cf; --ring3: #bb92e0; --ring4: #e0a352; --ring5: #ff7a8d; --ring6: #97aac2; } :root[data-thema="dunkel"] body.leinwand { background: var(--papier); } :root[data-thema="dunkel"] .buehne header { border-bottom-color: var(--blau); } :root[data-thema="dunkel"] .balken .b i { background: var(--blau); } :root[data-thema="dunkel"] .leiste { border-top-color: var(--linie); } /* Der Bildrahmen behaelt seinen hellen Grund - siehe oben. */ :root[data-thema="dunkel"] .bildrahmen { background: #ffffff; border-color: var(--linie); } :root[data-thema="dunkel"] .ecken span, :root[data-thema="dunkel"] .achsen { color: var(--grau); } :root[data-thema="dunkel"] .gesamt h3 { border-bottom-color: var(--linie); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--sans); color: var(--tinte); background: var(--papier); line-height: 1.45; -webkit-text-size-adjust: 100%; /* Tabellenziffern ueberall: eine 1 ist dann so breit wie eine 8, und der Teilnehmerzaehler wackelt beim Hochzaehlen nicht. */ font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.015em; } /* Je groesser die Schrift, desto enger darf sie stehen - sonst faellt eine Ueberschrift auf der Leinwand auseinander. */ .buehne h2 { letter-spacing: -.025em; } .einstieg .adresse, .einstieg .grosscode { letter-spacing: -.02em; } p { margin: 0 0 .8rem; } a { color: var(--blau); } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } :focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; } /* "Schriftgroesse: Gross" aus den Einstellungen der Decks. */ :root[data-schrift="gross"] { font-size: 112.5%; } /* * Das hidden-Attribut schlaegt jede eigene Regel. * * Der Browser setzt fuer [hidden] nur display:none mit der Staerke einer * Voreinstellung. Jede eigene Regel mit display:flex oder display:grid * gewinnt dagegen - und das Element steht sichtbar da, obwohl im Quelltext * hidden steht. Das ist hier schon zweimal passiert (der Teilnehmerzaehler * auf dem Wartebildschirm, der Countdown-Balken bei Fragen ohne Zeit). * Einmal zentral abgeraeumt statt jedes Mal einzeln. */ [hidden] { display: none !important; } /* --------------------------------------------------------------- Bausteine */ .knopf { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.1rem; background: var(--blau); color: #fff; border: 0; border-radius: 12px; font-weight: 700; text-decoration: none; min-height: 2.9rem; } .knopf:hover { background: var(--blau-hell); } .knopf:disabled { background: var(--linie); color: var(--grau); cursor: default; } .knopf.gross { width: 100%; padding: 1rem; font-size: 1.05rem; } .knopf.still { background: transparent; color: var(--blau); border: 1px solid var(--linie); } .knopf.still:hover { background: var(--blau-zart); } .knopf.gefahr { background: transparent; color: var(--rot); border: 1px solid var(--rot); } .knopf.gefahr:hover { background: #fdeef0; } .knopf.klein { padding: .5rem .8rem; font-size: .9rem; min-height: 2.2rem; } .feld { width: 100%; padding: .85rem .9rem; background: var(--feld); border: 1px solid var(--linie); border-radius: var(--r); } .feld:focus { border-color: var(--blau); outline: none; box-shadow: 0 0 0 3px rgba(29,66,115,.15); } label { display: block; font-weight: 600; font-size: .92rem; margin: 1rem 0 .35rem; } label .neben { font-weight: 400; color: var(--grau); } .hilfe { color: var(--grau); font-size: .92rem; margin: 0 0 1rem; } .fehler { color: var(--rot); font-size: .92rem; margin-top: .6rem; min-height: 1.2em; } .hinweis { background: #fff8e5; border: 1px solid #e6d29a; border-radius: var(--r); padding: .8rem 1rem; font-size: .92rem; margin: 1rem 0; } .gut { color: var(--gruen); } .code { font-family: var(--mono); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } /* ------------------------------------------------- Seitenrahmen (schmal) */ .wrap { max-width: 34rem; margin: 0 auto; padding: 1rem 1rem 3rem; min-height: 100dvh; display: flex; flex-direction: column; } .wrap.breit { max-width: 52rem; } .kopf { display: flex; align-items: center; gap: .3rem .8rem; flex-wrap: wrap; padding-bottom: .8rem; border-bottom: 1px solid var(--linie); } .kopf .marke { font-weight: 700; color: var(--blau); font-size: 1.05rem; } .kopf .sub { font-size: .85rem; color: var(--grau); } .kopf .rechts { margin-left: auto; font-size: .85rem; color: var(--grau); } /* Wortmarke nach Marios Klickmodell (lib/marke.php): der Bauch des P und der i-Punkt sind goldene Lichtpunkte. */ .wm { margin: 0; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: var(--blau); display: inline-block; white-space: nowrap; text-decoration: none; } .kopf .wm { font-size: 1.45rem; } .wm svg { display: inline-block; overflow: visible; } .wm .lp-p { fill: var(--gold); } .wm .ii { position: relative; display: inline-block; } .wm .ii-s { display: inline-block; } .wm .il { position: absolute; border-radius: 50%; background: var(--gold); } .decktitel { font-size: 1.5rem; margin: 1.1rem 0 .2rem; color: var(--tinte); } .fuss { margin-top: auto; padding-top: 1.5rem; font-size: .78rem; color: var(--grau); } .fuss a { color: var(--grau); } /* ------------------------------------------------------- Teilnehmeransicht */ .frage { margin: 1.3rem 0 .3rem; font-size: 1.5rem; line-height: 1.2; } .fortschritt { font-size: .82rem; color: var(--grau); letter-spacing: .04em; } .eingabe { display: flex; gap: .5rem; } .eingabe .feld { flex: 1; min-width: 0; } .chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; } .chip { padding: .55rem .85rem; background: var(--feld); border: 1px solid var(--linie); border-radius: 999px; font-size: .95rem; } .chip[aria-pressed="true"] { background: var(--blau); border-color: var(--blau); color: #fff; } .meine { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; } .meine span { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .5rem .45rem .8rem; background: var(--blau-zart); border-radius: 999px; font-size: .95rem; } .meine b { font-weight: 600; } .meine button { border: 0; background: none; color: var(--blau); font-size: 1.2rem; line-height: 1; padding: 0 .35rem; } .wahl { display: grid; gap: .5rem; margin-top: .4rem; } .wahl button { text-align: left; padding: .95rem 1rem; background: var(--feld); border: 1px solid var(--linie); border-radius: var(--r); min-height: 3rem; } .wahl button[aria-pressed="true"] { border-color: var(--blau); background: var(--blau-zart); font-weight: 600; } /* Skala: eine Reihe grosser Knoepfe, darunter die Randbeschriftung. */ .skala { display: flex; gap: .4rem; margin-top: .6rem; } .skala button { flex: 1; min-width: 0; padding: 1.1rem .2rem; background: var(--feld); border: 1px solid var(--linie); border-radius: var(--r); font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; } .skala button[aria-pressed="true"] { background: var(--blau); border-color: var(--blau); color: #fff; } .skala-rand { display: flex; justify-content: space-between; gap: 1rem; font-size: .82rem; color: var(--grau); margin-top: .4rem; } /* Punktbild: das Bild traegt die Punkte als absolut gesetzte Marken. Alle Koordinaten sind Bruchteile, daher ist die Anzeigegroesse egal. */ /* Der Rahmen umschliesst das Bild genau - die Punkte sitzen in Prozent darin, also darf zwischen Rahmen und Bild kein Rand entstehen. Deshalb schrumpft der Rahmen auf das Bild (inline-block) statt umgekehrt. */ .bildfeld { margin-top: .4rem; display: flex; justify-content: center; min-width: 0; } .achsen .mitte { display: flex; justify-content: center; } .bildrahmen { position: relative; display: inline-block; max-width: 100%; background: var(--feld); border: 1px solid var(--linie); border-radius: var(--r); overflow: hidden; touch-action: manipulation; cursor: crosshair; user-select: none; -webkit-user-select: none; } .bildrahmen img { display: block; width: auto; height: auto; max-width: 100%; pointer-events: none; } /* Auf dem Handy muss der Absendeknopf sichtbar bleiben, ohne zu scrollen - sonst tippt jemand seinen Punkt und findet den Knopf nicht. */ .wrap .bildrahmen img { max-height: 44dvh; } .wrap .karte .bildrahmen img { max-height: 32dvh; } .wrap .mini .bildrahmen img { max-height: 34dvh; } .punkt { position: absolute; width: 1.15rem; height: 1.15rem; margin: -.575rem 0 0 -.575rem; border-radius: 50%; background: var(--blau-hell); opacity: .55; border: 2px solid #fff; pointer-events: none; } .punkt.meiner { background: var(--rot); opacity: 1; width: 1.5rem; height: 1.5rem; margin: -.75rem 0 0 -.75rem; box-shadow: 0 1px 4px rgba(0,0,0,.3); z-index: 2; } .punkt.neu { animation: fallen .45s cubic-bezier(.3,1.4,.5,1); } .punkt.schwerpunkt { width: 1.9rem; height: 1.9rem; margin: -.95rem 0 0 -.95rem; background: none; border: 3px solid var(--rot); opacity: .95; z-index: 3; } @keyframes fallen { from { transform: translateY(-14px); opacity: 0; } to { transform: none; } } /* Vier freie Beschriftungen um das Bild herum. */ .achsen { display: grid; grid-template-columns: auto 1fr auto; gap: .4rem; align-items: center; font-size: .85rem; color: var(--grau); } .achsen .oben, .achsen .unten { grid-column: 2; text-align: center; } .achsen .links { grid-column: 1; grid-row: 2; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; } .achsen .rechts { grid-column: 3; grid-row: 2; writing-mode: vertical-rl; text-align: center; } .achsen .mitte { grid-column: 2; grid-row: 2; min-width: 0; } .ecken { position: absolute; inset: 0; pointer-events: none; } .ecken span { position: absolute; font-size: .82rem; color: var(--grau); max-width: 45%; line-height: 1.2; } .ecken .e1 { top: .6rem; left: .7rem; } .ecken .e2 { top: .6rem; right: .7rem; text-align: right; } .ecken .e3 { bottom: .6rem; right: .7rem; text-align: right; } .ecken .e4 { bottom: .6rem; left: .7rem; } .warten { margin: auto 0; text-align: center; color: var(--grau); } .warten .puls { width: .6rem; height: .6rem; border-radius: 50%; background: var(--rot); display: inline-block; animation: puls 1.8s infinite; } @keyframes puls { 0%,100% { opacity: .25; } 50% { opacity: 1; } } /* Kompaktergebnis auf dem eigenen Geraet. */ .mini { margin-top: 1.4rem; } .mini .zeile { display: grid; grid-template-columns: 1fr auto; gap: .4rem; font-size: .92rem; margin-bottom: .55rem; } .mini .balken { grid-column: 1 / -1; height: 6px; background: var(--blau-zart); border-radius: 3px; overflow: hidden; } .mini .balken i { display: block; height: 100%; background: var(--blau); transition: width .5s; } .mini .kennzahl { display: flex; gap: 1.4rem; font-size: .92rem; color: var(--grau); } .mini .kennzahl b { color: var(--tinte); font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------- Leinwand */ body.leinwand { background: #fff; overflow: hidden; } .buehne { height: 100dvh; display: flex; flex-direction: column; padding: 1.4rem 2rem 1rem; } .buehne header { display: flex; align-items: center; gap: 1.2rem; border-bottom: 3px solid var(--blau); padding-bottom: .7rem; } .buehne header h1 { font-size: 1.4rem; color: var(--blau); } .buehne header .zaehler { margin-left: auto; font-size: 1rem; color: var(--grau); display: flex; align-items: baseline; gap: .5rem; } /* display:flex schlaegt die Voreinstellung des Browsers fuer [hidden] - ohne diese Zeile bliebe der Zaehler auf dem Wartebildschirm stehen. */ .buehne header .zaehler[hidden] { display: none; } .buehne header .zaehler b { font-size: 2rem; color: var(--tinte); font-weight: 600; font-variant-numeric: tabular-nums; } .buehne main { flex: 1; display: flex; flex-direction: column; padding-top: 1rem; min-height: 0; } .buehne h2 { font-size: clamp(1.6rem, 3.6vw, 2.8rem); line-height: 1.1; margin-bottom: 1rem; } .buehne .frageshilfe { color: var(--grau); font-size: clamp(.95rem, 1.4vw, 1.2rem); margin: -.6rem 0 1rem; } /* Einstiegsbild: QR gross genug, um durch die Videokompression zu kommen. */ .einstieg { margin: auto; display: flex; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; flex-wrap: wrap; justify-content: center; } .einstieg .qr { background: #fff; padding: .9rem; border: 1px solid var(--linie); border-radius: 16px; line-height: 0; } /* Gross genug, um die Videokompression eines geteilten Bildschirms zu ueberstehen. Ein QR-Code, der beim Empfaenger auf 120 Pixel ankommt, laesst sich nicht mehr scannen - und genau das ist der Regelfall, wenn die Leinwand nur ein Drittel des Konferenzfensters einnimmt. */ .einstieg .qr svg { width: clamp(240px, 40vh, 520px); height: auto; } .einstieg .worte { max-width: 30rem; } .einstieg .adresse { font-size: clamp(1.3rem, 2.6vw, 2rem); font-weight: 600; color: var(--blau); word-break: break-all; } .einstieg .codezeile { margin-top: 1.2rem; font-size: 1rem; color: var(--grau); } .einstieg .grosscode { display: block; font-family: var(--mono); font-weight: 700; font-size: clamp(2.4rem, 6vw, 4.5rem); letter-spacing: .12em; color: var(--tinte); line-height: 1.1; } .einstieg p { color: var(--grau); font-size: 1.05rem; } /* Der Ergebnisbereich nimmt die verbleibende Hoehe ein und stellt die Balken hinein - sonst kleben sie oben und darunter bleibt die halbe Leinwand leer. */ .buehne main > #ergebnis { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .balken { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .7rem; justify-content: center; } .balken .b { display: grid; grid-template-columns: minmax(8rem, 18rem) 1fr auto; align-items: center; gap: 1rem; } .balken .b span { font-size: clamp(1rem, 1.6vw, 1.4rem); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .balken .b i { display: block; height: clamp(1.4rem, 2.6vh, 2.2rem); border-radius: 4px; background: var(--blau); transition: width .6s cubic-bezier(.2,.7,.3,1); min-width: 2px; } .balken .b em { font-style: normal; font-size: clamp(1rem, 1.6vw, 1.4rem); font-variant-numeric: tabular-nums; color: var(--grau); min-width: 2ch; } /* Fragetyp punkte: Text links, Bild rechts, sobald der Bildschirm breit genug ist. Ein quadratischer Hintergrund ist auf 16:9 in der Hoehe begrenzt - untereinander bliebe die halbe Breite ungenutzt, waehrend genau dieses Bild das ist, worauf alle schauen. Auf schmalen Fenstern, etwa einem quergestellten geteilten Bildschirm, faellt es zurueck auf untereinander. */ .buehne main.punkteansicht { flex-direction: column; } @media (min-width: 62rem) { .buehne main.punkteansicht { flex-direction: row; align-items: stretch; gap: 2.5rem; } .buehne main.punkteansicht .worte { flex: 0 1 26rem; min-width: 0; align-self: center; } .buehne main.punkteansicht .worte .kennzahlen { justify-content: flex-start; margin-top: 1.6rem; } .buehne main.punkteansicht .leinwandbild { flex: 1 1 auto; } } /* Das Bild soll die verbleibende Hoehe wirklich ausfuellen. Ein quadratischer Hintergrund waere sonst auf einem breiten Bildschirm winzig - und im geteilten Bildschirm einer Videokonferenz erst recht. */ .leinwandbild { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: center; } .leinwandbild .bildfeld { height: 100%; display: flex; justify-content: center; min-width: 0; } /* Die mittlere Reihe nimmt, was uebrig bleibt - die beiden Beschriftungsreihen bekommen ihre Hoehe zuerst. Ohne minmax(0,1fr) waechst die Mitte mit dem Bild und schiebt die untere Beschriftung aus dem Bild heraus. */ .leinwandbild .achsen { height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; } .leinwandbild .achsen .mitte { min-height: 0; align-items: center; } .leinwandbild .bildrahmen { cursor: default; max-width: 100%; } /* --bildhoehe setzt leinwand.js aus der gemessenen freien Hoehe. Eine Prozentangabe hilft hier nicht: der Rahmen hat keine feste Hoehe, und gegen eine automatische Hoehe rechnet der Browser kein Prozent aus. Der dvh-Wert ist nur der Stand, bis die Messung greift. */ .leinwandbild .bildrahmen img { width: auto; height: auto; max-width: 100%; max-height: var(--bildhoehe, 58dvh); } /* Aus zehn Metern muss ein Punkt ein Punkt sein, kein Staubkorn. */ .leinwandbild .punkt { width: 1.7rem; height: 1.7rem; margin: -.85rem 0 0 -.85rem; border-width: 3px; } .leinwandbild .punkt.schwerpunkt { width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; border-width: 5px; } .leinwandbild .ecken span { font-size: clamp(.95rem, 1.5vw, 1.5rem); color: var(--grau); max-width: 40%; } .leinwandbild .achsen { font-size: clamp(1rem, 1.6vw, 1.5rem); } .kennzahlen { display: flex; gap: 2.5rem; justify-content: center; margin-top: 1rem; font-size: clamp(1rem, 1.6vw, 1.3rem); color: var(--grau); } .kennzahlen b { color: var(--tinte); font-variant-numeric: tabular-nums; font-size: 1.4em; } /* Folie (Zweig canvas): was der Moderator an der Leinwand einstellt, siehe js/folie.js. Nur feste Stufen - nichts, was aus dem Bild laufen kann. */ .buehne main .dachzeile { font-size: clamp(.9rem, 1.3vw, 1.15rem); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blau); margin: 0 0 .55rem; } .buehne main .fussnote { font-size: clamp(.85rem, 1.2vw, 1.05rem); color: var(--grau); margin: .9rem 0 0; } .buehne main.folie-s h2 { font-size: clamp(1.3rem, 2.8vw, 2.1rem); } .buehne main.folie-l h2 { font-size: clamp(2rem, 5vw, 3.9rem); } .buehne main.folie-mitte > .dachzeile, .buehne main.folie-mitte > h2, .buehne main.folie-mitte > .frageshilfe, .buehne main.folie-mitte > .fussnote { text-align: center; } /* Die Farbe kommt als --balken aus js/folie.js. Die Kennung schlaegt auch die Regel der dunklen Fassung weiter oben; ohne Farbe bleibt es Blau. */ .buehne main #ergebnis .balken .b i { background: var(--balken, var(--blau)); } /* Gesamtauswertung: mehrere Fragen nebeneinander. */ .gesamt { flex: 1; min-height: 0; display: grid; gap: 1.6rem; overflow: auto; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); align-content: start; } .gesamt section { min-width: 0; display: flex; flex-direction: column; } .gesamt h3 { font-size: 1.15rem; color: var(--blau); margin-bottom: .7rem; padding-bottom: .35rem; border-bottom: 1px solid var(--linie); } .gesamt .balken { gap: .45rem; justify-content: flex-start; } .gesamt .balken .b { grid-template-columns: minmax(6rem, 12rem) 1fr auto; gap: .7rem; } .gesamt .balken .b span, .gesamt .balken .b em { font-size: .95rem; } .gesamt .balken .b i { height: 1.2rem; } .gesamt .bildrahmen img { max-height: 26rem; } /* Sicherheitsnetz: sollte doch einmal eine Kartenwand mit Gruppen in einer Spalte landen, stehen die Gruppen untereinander statt nebeneinander. Vier Spalten in einer Spalte waeren ein Streifenmuster aus Einzelbuchstaben. */ .gesamt .karten { display: block; } .gesamt .kspalte { margin-bottom: .6rem; } .leiste { display: flex; align-items: center; gap: 1rem; padding-top: .6rem; border-top: 1px solid var(--linie); font-size: .85rem; color: var(--grau-hell); } .leiste .code { color: var(--grau); } /* ------------------------------------------------------------- Moderation */ .pult { display: grid; gap: .5rem; margin: 1rem 0; } .pult .zeile { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center; padding: .7rem .8rem; background: var(--feld); border: 1px solid var(--linie); border-radius: var(--r); } .pult .zeile.jetzt { border-color: var(--blau); box-shadow: 0 0 0 2px var(--blau-zart); } .pult .nr { width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--papier); display: grid; place-items: center; font-size: .85rem; font-weight: 600; color: var(--grau); } .pult .zeile.jetzt .nr { background: var(--blau); color: #fff; } .pult .titel { min-width: 0; } .pult .titel b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pult .titel small { color: var(--grau); font-size: .8rem; } .pult .schalter { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; } /* Auf schmalen Bildschirmen steht die Knopfleiste unter der Frage - mit "Aufdecken" und "Loesung" sind es bis zu sieben Knoepfe. */ @media (max-width: 44rem) { .pult .zeile { grid-template-columns: auto 1fr; } .pult .schalter { grid-column: 1 / -1; justify-content: flex-start; } } .schaltknopf { padding: .4rem .6rem; font-size: .8rem; border-radius: 8px; font-weight: 600; background: var(--papier); border: 1px solid var(--linie); color: var(--grau); white-space: nowrap; } .schaltknopf[aria-pressed="true"] { background: var(--blau); border-color: var(--blau); color: #fff; } .schaltknopf.rot[aria-pressed="true"] { background: var(--rot); border-color: var(--rot); } /* Decks: "Aufdecken" (Ergebnis auf der Leinwand) und "Loesung" (Wissensfragen). */ .schaltknopf.gold[aria-pressed="true"] { background: #B37F1E; border-color: #B37F1E; color: #fff; } .schaltknopf.gruen[aria-pressed="true"] { background: var(--gruen); border-color: var(--gruen); color: #fff; } /* Anlegen und Bearbeiten: Grenze der Mehrfachauswahl, richtige Antwort. */ .zeilenwahl { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: center; margin-top: .8rem; } .richtigwahl { display: flex; flex-wrap: wrap; gap: .4rem .5rem; } label.richtigoption { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; margin: 0; padding: .35rem .75rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--feld); font-size: .92rem; cursor: pointer; } label.richtigoption:has(input:checked) { border-color: var(--gruen); background: #EEF6F1; color: var(--gruen); } /* Leinwand, solange das Ergebnis auf Knopfdruck wartet: nur die Zahl. */ .verdeckt { margin: auto; text-align: center; color: var(--grau); } .verdeckt b { display: block; font-size: clamp(3rem, 9vw, 7rem); line-height: 1; color: var(--blau); font-variant-numeric: tabular-nums; } .verdeckt span { font-size: clamp(1rem, 1.8vw, 1.5rem); } /* Wissensfragen: die richtige Antwort, sobald das Pult sie aufdeckt. */ .balken.mitloesung .b:not(.richtig) { opacity: .4; } .balken .b.richtig span::before, .ringlegende .richtig span::before { content: "✓ "; color: var(--gruen); font-weight: 700; } .buehne main #ergebnis .balken .b.richtig i { background: var(--gruen); } .loesungbox { background: #EEF6F1; border: 1px solid #CFE5D8; border-radius: var(--r); padding: .8rem 1rem; margin: 0 0 1rem; } .loesungbox .richtigzeile { font-weight: 700; color: var(--gruen); margin: .2rem 0; } .loesungbox .richtigzeile::before { content: "✓ "; } :root[data-thema="dunkel"] .loesungbox { background: #16302A; border-color: #245244; } .reihe { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem; } .status { margin-top: 1rem; font-size: .9rem; color: var(--grau); } /* Kopierzeile: der Weg in den Chat der Videokonferenz. */ .kopiezeile { display: flex; gap: .5rem; align-items: stretch; margin-top: .4rem; } .kopiezeile input { flex: 1; min-width: 0; font-family: var(--mono); font-size: .88rem; padding: .7rem .8rem; background: var(--feld); border: 1px solid var(--linie); border-radius: var(--r); } .kopiezeile button { white-space: nowrap; } .karte { background: var(--feld); border: 1px solid var(--linie); border-radius: var(--r); padding: 1rem 1.1rem; margin: 1rem 0; } .karte h3 { font-size: 1rem; color: var(--blau); margin-bottom: .5rem; } .karte .gross { font-family: var(--mono); font-weight: 700; font-size: 2rem; letter-spacing: .14em; } /* ------------------------------------------------------- Fragen anlegen */ .fragenliste { display: grid; gap: .8rem; } .fragenbau { background: var(--feld); border: 1px solid var(--linie); border-radius: var(--r); padding: .9rem 1rem 1.1rem; } .fragenbau .kopfzeile { display: flex; align-items: center; gap: .6rem; } .fragenbau .kopfzeile .nr { font-weight: 700; color: var(--grau); } .fragenbau .kopfzeile button { margin-left: auto; } .typwahl { display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0 .2rem; } .typwahl button { padding: .45rem .75rem; font-size: .88rem; border-radius: 999px; background: var(--papier); border: 1px solid var(--linie); } .typwahl button[aria-pressed="true"] { background: var(--blau); border-color: var(--blau); color: #fff; } .vorlagen { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .5rem; margin-top: .4rem; } .vorlagen button { padding: .5rem; background: var(--feld); border: 2px solid var(--linie); border-radius: var(--r); font-size: .82rem; text-align: center; } .vorlagen button[aria-pressed="true"] { border-color: var(--blau); background: var(--blau-zart); } .vorlagen img { display: block; width: 100%; height: 4.2rem; object-fit: contain; margin-bottom: .3rem; } .zweispalt { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; } /* ------------------------------------------------- Zusaetzliche Ausgaben */ /* Prozentzusatz im Modus "beides": klein und leise hinter der Anzahl. Der Abstand ist Pflicht, nicht Geschmack - ohne ihn liest sich "8" und "40 %" als "840 %". */ .balken .b em small, .ringlegende em small, .quadranten em small, .wolke .w small, .mini .zeile span small { font-size: .72em; color: var(--grau); font-weight: 400; margin-left: .5em; letter-spacing: 0; white-space: nowrap; } /* --- Wortwolke ----------------------------------------------------------- Keine gedrehten Woerter, keine Zufallsplatzierung: die Begriffe stehen in einer normalen, zentrierten Zeile und unterscheiden sich nur in Groesse und Ton. So bleibt sie aus zehn Metern lesbar - darum geht es. */ .wolke { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .35em .8em; line-height: 1.25; padding: .5rem 0; } .wolke .w { font-weight: 600; letter-spacing: -.015em; white-space: nowrap; } .wolke .w small { font-size: .38em; } .wolke .s0 { color: var(--grau-hell); font-weight: 500; } .wolke .s1 { color: var(--grau); } .wolke .s2 { color: var(--blau-hell); } .wolke .s3 { color: var(--blau); } .wolke .s4 { color: var(--blau); } /* Die Groessen der einzelnen Woerter stehen als em im Quelltext - sie beziehen sich also auf die Schriftgroesse der Wolke selbst. Ein einziger Wert je Zusammenhang skaliert deshalb die ganze Wolke. */ .buehne .wolke { font-size: clamp(1rem, 2.2vw, 1.8rem); } .wrap .wolke { font-size: .95rem; } /* In der Gesamtauswertung steht die Wolke in einer schmalen Spalte neben anderen Fragen, nicht allein auf der Leinwand. Ohne eigene Groesse liefe das haeufigste Wort aus seiner Spalte heraus und ueber die Nachbarin. */ .buehne .gesamt .wolke { font-size: clamp(.6rem, .8vw, .95rem); } .gesamt .wolke .w { white-space: normal; overflow-wrap: anywhere; max-width: 100%; } /* --- Ringdiagramm -------------------------------------------------------- Ein einziger Kreis, auf den mehrere Striche gelegt werden - deshalb kein Diagrammpaket und keine Pfadberechnung. */ .ring { display: flex; gap: clamp(1rem, 3vw, 2.5rem); align-items: center; flex-wrap: wrap; justify-content: center; } .ring svg { width: clamp(9rem, 22vh, 15rem); height: auto; flex: 0 0 auto; } /* Auf der Leinwand ist der Ring das, worauf alle schauen - er bekommt die Hoehe, die da ist. Im Handy-Rahmen bleibt er klein. */ .buehne .ring { gap: clamp(1.5rem, 4vw, 4rem); } .buehne .ring svg { width: clamp(16rem, 52vh, 34rem); } .ring circle { transition: stroke-dasharray .6s cubic-bezier(.2,.7,.3,1); } .ringlegende { display: grid; gap: .5rem; min-width: 0; } .ringlegende div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; } .ringlegende b { width: .9em; height: .9em; border-radius: 3px; display: inline-block; } .ringlegende span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ringlegende em { font-style: normal; font-weight: 600; } .buehne .ringlegende { font-size: clamp(1rem, 1.5vw, 1.35rem); } .r0 { stroke: var(--ring1); } .ringlegende .r0 { background: var(--ring1); } .r1 { stroke: var(--ring2); } .ringlegende .r1 { background: var(--ring2); } .r2 { stroke: var(--ring3); } .ringlegende .r2 { background: var(--ring3); } .r3 { stroke: var(--ring4); } .ringlegende .r3 { background: var(--ring4); } .r4 { stroke: var(--ring5); } .ringlegende .r4 { background: var(--ring5); } .r5 { stroke: var(--ring6); } .ringlegende .r5 { background: var(--ring6); } /* --- Quadranten beim Koordinatenkreuz ------------------------------------ */ .quadranten { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1rem; } .quadranten div { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; padding: .5rem .7rem; background: var(--feld); border: 1px solid var(--linie); border-radius: var(--r); } .quadranten span { color: var(--grau); min-width: 0; overflow: hidden; text-overflow: ellipsis; } .quadranten em { font-style: normal; font-weight: 700; white-space: nowrap; } .quadranten em small { font-weight: 400; color: var(--grau); margin-left: .35em; } .buehne .quadranten { font-size: clamp(.85rem, 1.1vw, 1.05rem); } .wrap .quadranten { font-size: .88rem; } /* ---------------------------------------------------------------- Drucken */ /* --------------------------------------------------------------------------- Kartenwand. Eine Spalte je Gruppe, gleich breit und nie ueber den Rand hinaus: auf einem geteilten Bildschirm kann niemand seitwaerts scrollen. Solange keine Gruppe angelegt ist, stehen alle Karten in einer fliessenden Flaeche - die wachsende Wand ist fuer sich schon ein Bild. --------------------------------------------------------------------------- */ .karten { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .9rem; align-items: start; margin-top: .6rem; } .karten.offen { display: block; } .kspalte { min-width: 0; border-radius: var(--r); padding: .5rem; background: var(--papier); } .kspalte h4 { margin: 0 0 .5rem; font-size: .85rem; font-weight: 700; color: var(--grau); display: flex; gap: .4rem; align-items: baseline; letter-spacing: .01em; } .kspalte h4 em { font-style: normal; color: var(--grau-hell); font-weight: 600; } .kspalte.zielspalte { outline: 2px solid var(--blau); outline-offset: 2px; } .kliste { display: flex; flex-direction: column; gap: .35rem; } .karten.offen .kliste { flex-direction: row; flex-wrap: wrap; gap: .45rem; } /* Kein hyphens:auto - bei kurzen Karten trennt es staendig mitten im Wort ("Ansprechpart-ner"), und das liest sich schlechter als ein Umbruch. overflow-wrap greift nur bei Woertern, die sonst herausstuenden. */ .karte { display: block; text-align: left; padding: .45rem .6rem; border-radius: 8px; background: var(--feld); border: 1px solid var(--linie); color: var(--tinte); font: inherit; font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere; } button.karte { cursor: pointer; width: 100%; } button.karte:hover { border-color: var(--blau); } .loeschmodus button.karte:hover { border-color: var(--rot); color: var(--rot); } /* Auf der Leinwand muss eine Karte aus zehn Metern lesbar sein. */ .leinwand .karte { font-size: clamp(.95rem, 1.5vh, 1.35rem); padding: .5rem .75rem; } .leinwand .kspalte h4 { font-size: clamp(.85rem, 1.3vh, 1.1rem); } /* Die eigenen Karten in der Bestaetigung auf dem Handy. */ .meinekarten { display: flex; flex-wrap: wrap; gap: .4rem; } /* Zielleiste der Sortieransicht: Gruppe waehlen, dann Karten antippen. */ .zielleiste { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .9rem; } .zielleiste .hilfe { margin: 0 .3rem 0 0; } .zielpaar { display: inline-flex; } .zielpaar .schaltknopf { border-top-right-radius: 0; border-bottom-right-radius: 0; } .gruppeweg { border: 1px solid var(--linie); border-left: 0; border-radius: 0 8px 8px 0; background: var(--papier); color: var(--grau-hell); cursor: pointer; padding: .4rem .5rem; font-size: .85rem; line-height: 1; } .gruppeweg:hover { color: var(--rot); } .schaltknopf.gefahrknopf[aria-pressed="true"] { background: var(--rot); border-color: var(--rot); color: #fff; } /* Damit ein Link in der Schalterleiste genauso sitzt wie ein Knopf. */ a.schaltknopf { display: inline-flex; align-items: center; text-decoration: none; } /* --------------------------------------------------------------------------- Countdown. Gerechnet wird auf dem Server, damit auf jedem Geraet dieselbe Zeit ablaeuft. Hier ist nur die Anzeige: ein schmaler Balken, der sinkt, und die Restzeit daneben. Ab zehn Sekunden wird beides rot - aber der Balken blinkt nicht: in einer Dienstversammlung ist Druck nicht das Ziel. --------------------------------------------------------------------------- */ .countdown { display: flex; align-items: center; gap: .8rem; margin: .7rem 0 1.1rem; } .countdown .bahn { flex: 1; height: .45rem; border-radius: 999px; background: var(--linie); overflow: hidden; } .countdown .bahn i { display: block; height: 100%; background: var(--blau); transition: width .3s linear; } .countdown b { font-variant-numeric: tabular-nums; font-size: .9rem; font-weight: 600; color: var(--grau); min-width: 7em; text-align: right; } .countdown.knapp .bahn i { background: var(--rot); } .countdown.knapp b { color: var(--rot); } .countdown.aus .bahn i { background: var(--grau-hell); } .leinwand .countdown b { font-size: clamp(.9rem, 1.4vh, 1.2rem); } /* --------------------------------------------------------------------------- Verbindungsanzeige. Bisher fror die Seite bei einem Netzausfall stumm ein. Jetzt sagt sie es - klein, unten, ohne Knopf. Der naechste Takt versucht es ohnehin wieder. --------------------------------------------------------------------------- */ .verbindung { position: fixed; left: 50%; bottom: .9rem; transform: translateX(-50%); z-index: 50; margin: 0; padding: .5rem 1rem; border-radius: 999px; background: var(--tinte); color: var(--feld); font-size: .85rem; box-shadow: 0 4px 18px rgba(0, 0, 0, .28); } /* Kleiner QR-Code in der Fussleiste der Leinwand - nur waehrend einer laufenden Frage, fuer die Nachzuegler. */ .leiste-rechts { margin-left: auto; display: flex; align-items: center; gap: 1rem; } .leiste .kleinqr { display: none; line-height: 0; } .leiste.mitqr .kleinqr { display: block; } .leiste .kleinqr svg { width: clamp(52px, 7vh, 84px); height: auto; border-radius: 4px; } /* Zugeklappte Zusatzeinstellungen im Anlegeformular. */ .mehr { margin-top: 1.3rem; border-top: 1px solid var(--linie); padding-top: .7rem; } .mehr > summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--blau); list-style: none; padding: .2rem 0; } .mehr > summary::-webkit-details-marker { display: none; } .mehr > summary::before { content: "\25b8\00a0"; } .mehr[open] > summary::before { content: "\25be\00a0"; } .hilfe.zart { font-size: .82rem; margin: .5rem 0 .2rem; } /* Dunkle Leinwand: die Karten bleiben Papier auf dunklem Grund, aber gedaempft - weisse Kaertchen leuchteten im abgedunkelten Raum. */ :root[data-thema="dunkel"] .kspalte { background: #16233a; } :root[data-thema="dunkel"] .karte { background: var(--feld); border-color: var(--linie); } /* ----------------------------------------------- Aus Text uebernehmen */ .einlesen { margin: 1.2rem 0 1.8rem; padding: 0 1rem; border: 1px solid var(--linie); border-radius: var(--r); background: var(--feld); } .einlesen[open] { padding-bottom: 1rem; } .einlesen > summary { cursor: pointer; padding: .85rem 0; font-weight: 600; color: var(--blau); } .einlesen .schritt { margin: 1.3rem 0 .2rem; font-size: .95rem; } .einlesen .prompttext { font-family: var(--mono); font-size: .76rem; line-height: 1.45; color: var(--grau); } .einlesen #importtext { font-family: var(--mono); font-size: .85rem; line-height: 1.5; } /* Ein label als Knopf: label bringt von sich aus Abstand und kleinere Schrift mit, .knopf setzt beides nicht - hier wieder auf die Masse eines Knopfes, sonst steht er in der Reihe versetzt neben dem echten Knopf. */ .einlesen .dateiknopf { cursor: pointer; margin: 0; font-size: inherit; } .einlesen .hinweisliste { margin: .4rem 0 0; padding-left: 1.2rem; color: var(--grau); font-size: .88rem; } .einlesen .hinweisliste li { margin: .15rem 0; } @media print { body { background: #fff; } .wrap, .wrap.breit { max-width: none; min-height: 0; padding: 0; } .kopf { border-bottom: 2px solid #000; } .nichtdrucken, .fuss, .reihe, .kopiezeile, .knopf { display: none !important; } .gesamt { display: block; } .gesamt section { break-inside: avoid; margin-bottom: 1.4rem; } .balken .b i { background: #556; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .punkt { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ring circle, .ringlegende b, .wolke .w { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ring { break-inside: avoid; } .quadranten { break-inside: avoid; } /* Auf Papier ist der Platz begrenzt und Farbe teuer: die Kartenwand bekommt einen feinen Rahmen statt einer Flaeche, und eine Spalte wird nicht mitten in der Zeile umgebrochen. */ .kspalte { background: none; border: 1px solid #bbb; break-inside: avoid; } .karte { border: 1px solid #bbb; font-size: .9rem; } .countdown, .verbindung, .zielleiste, .mehr { display: none !important; } a[href]::after { content: ""; } /* dvh ist auf Papier die Seitenhoehe - ohne feste Groesse fuellt ein Hintergrundbild sonst eine halbe Seite je Frage. */ .bildfeld { justify-content: flex-start; } .wrap .bildrahmen img { max-height: 11cm; } .achsen { justify-items: start; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }