/* ------------------------------------------------------------------ wiewars.ch - Erscheinungsbild Aufbau: alle Farben und Masse stehen als Variablen zuoberst, einmal für hell und einmal für dunkel. In den Bausteinen darunter stehen keine festen Farbwerte mehr. Wer etwas umfärben will, ändert oben. Der Dunkelmodus folgt der Systemeinstellung. Zum Prüfen lässt er sich mit data-thema="dunkel" bzw. "hell" am -Element erzwingen. ------------------------------------------------------------------ */ :root { --grund: #f5f5f7; --flaeche: #ffffff; --flaeche-still: #fbfbfd; --text: #1d1d1f; --gedaempft: #6e6e73; --linie: #d2d2d7; --linie-zart: #ebebf0; --akzent: #0071e3; --akzent-tief: #0058b0; --auf-akzent: #ffffff; --gut: #1d7f45; /* Zwei Gelbstufen: das dunkle fuer Schrift und Striche, damit es lesbar bleibt, das helle fuer Flaechen wie den Verteilungsbalken - dort zaehlt nicht Lesbarkeit, sondern der Abstand zum Rot daneben. */ --mittel: #8a6d00; --mittel-voll: #f5c518; --schlecht: #c9271c; --gut-flaeche: #eaf5ef; --mittel-flaeche: #fcf6e0; --schlecht-flaeche: #fcecea; --radius: 18px; --radius-klein: 12px; --schatten: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(0, 0, 0, 0.05); --schatten-knopf: 0 1px 2px rgba(0, 0, 0, 0.06); --geraet: #1d1d1f; /* Testweise: Farbe des Tippzeichens auf der Demo. */ --tipp: #e8a900; --auf-tipp: #1d1d1f; --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } @media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) { --grund: #000000; --flaeche: #1c1c1e; --flaeche-still: #161618; --text: #f5f5f7; --gedaempft: #98989d; --linie: #3a3a3c; --linie-zart: #2c2c2e; --akzent: #0a84ff; --akzent-tief: #409cff; --auf-akzent: #ffffff; --gut: #32d74b; --mittel: #ffc60a; --mittel-voll: #ffc60a; --schlecht: #ff453a; --gut-flaeche: rgba(50, 215, 75, 0.14); --mittel-flaeche: rgba(255, 198, 10, 0.14); --schlecht-flaeche: rgba(255, 69, 58, 0.14); --schatten: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.35); --schatten-knopf: 0 1px 2px rgba(0, 0, 0, 0.4); --geraet: #48484a; --tipp: #ffd60a; --auf-tipp: #1d1d1f; } } :root[data-thema="dunkel"] { --grund: #000000; --flaeche: #1c1c1e; --flaeche-still: #161618; --text: #f5f5f7; --gedaempft: #98989d; --linie: #3a3a3c; --linie-zart: #2c2c2e; --akzent: #0a84ff; --akzent-tief: #409cff; --auf-akzent: #ffffff; --gut: #32d74b; --mittel: #ffc60a; --mittel-voll: #ffc60a; --schlecht: #ff453a; --gut-flaeche: rgba(50, 215, 75, 0.14); --mittel-flaeche: rgba(255, 198, 10, 0.14); --schlecht-flaeche: rgba(255, 69, 58, 0.14); --schatten: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.35); --schatten-knopf: 0 1px 2px rgba(0, 0, 0, 0.4); --geraet: #48484a; --tipp: #ffd60a; --auf-tipp: #1d1d1f; } * { box-sizing: border-box; } html { color-scheme: light dark; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--grund); color: var(--text); font-family: var(--schrift); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Gerüst ─────────────────────────────────────────────── */ .huelle { max-width: 580px; margin: 0 auto; padding: 44px 22px 64px; } .huelle--breit { max-width: 1120px; } /* ── Schrift ────────────────────────────────────────────── */ .label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gedaempft); margin: 0 0 8px; } h1 { font-size: 34px; line-height: 1.12; letter-spacing: -0.022em; font-weight: 700; margin: 0 0 10px; } h2 { font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; font-weight: 650; margin: 40px 0 14px; } h3 { font-size: 17px; font-weight: 650; margin: 26px 0 8px; } p { margin: 0 0 14px; } .meta { color: var(--gedaempft); font-size: 15px; margin: 0 0 28px; } .frage { font-size: 19px; letter-spacing: -0.01em; margin: 0 0 18px; } a { color: var(--akzent); text-decoration: none; } a:hover { text-decoration: underline; } .logo { display: block; max-height: 68px; max-width: min(100%, 320px); width: auto; height: auto; margin: 0 0 18px; } /* ── Die drei Knöpfe ────────────────────────────────────── */ .knopfreihe { display: flex; flex-direction: column; gap: 12px; } .knopf { display: flex; align-items: center; gap: 18px; width: 100%; padding: 22px 24px; border: 1px solid var(--linie-zart); border-radius: var(--radius); background: var(--flaeche); box-shadow: var(--schatten-knopf); font-family: inherit; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .knopf .gesicht { flex: 0 0 auto; } .knopf--gut .gesicht { color: var(--gut); } .knopf--mittel .gesicht { color: var(--mittel); } .knopf--schlecht .gesicht { color: var(--schlecht); } .knopf:hover { transform: translateY(-1px); box-shadow: var(--schatten); } .knopf:active { transform: scale(0.985); box-shadow: var(--schatten-knopf); } .knopf--gut:hover { border-color: var(--gut); background: var(--gut-flaeche); } .knopf--mittel:hover { border-color: var(--mittel); background: var(--mittel-flaeche); } .knopf--schlecht:hover { border-color: var(--schlecht); background: var(--schlecht-flaeche); } .knopf:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; } .knopf[disabled] { opacity: 0.45; cursor: default; transform: none; } /* ── Karten und Meldungen ───────────────────────────────── */ .karte { background: var(--flaeche); border: 1px solid var(--linie-zart); border-radius: var(--radius); box-shadow: var(--schatten-knopf); padding: 24px; } .karte + .karte { margin-top: 14px; } /* Das gewaehlte Gesicht ueber dem Dankeschoen - dieselbe Farbe wie auf dem Knopf, damit sichtbar wird, was gezaehlt wurde. */ .danke-gesicht { margin: 0 0 10px; } .danke-gesicht .gesicht { display: block; } .danke-stufe--gut .gesicht { color: var(--gut); } .danke-stufe--mittel .gesicht { color: var(--mittel); } .danke-stufe--schlecht .gesicht { color: var(--schlecht); } .danke-titel { font-size: 24px; font-weight: 650; letter-spacing: -0.015em; margin: 0 0 6px; } .hinweis { padding: 16px 20px; border-radius: var(--radius-klein); background: var(--mittel-flaeche); border: 1px solid transparent; color: var(--text); font-size: 15px; } .demoband { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 13px 18px; margin-bottom: 22px; border-radius: var(--radius-klein); background: var(--mittel-flaeche); border: 1px solid var(--mittel); color: var(--text); font-size: 15px; } .demoband strong { text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; padding: 3px 8px; border-radius: 999px; background: var(--mittel-voll); color: #241d00; } .demoband a { white-space: nowrap; } .fehler { padding: 16px 20px; border-radius: var(--radius-klein); background: var(--schlecht-flaeche); color: var(--text); font-size: 15px; margin-bottom: 20px; } /* ── Formulare ──────────────────────────────────────────── */ input[type="text"], input[type="password"], input[type="datetime-local"], input[type="email"], select, textarea { width: 100%; padding: 13px 15px; border: 1px solid var(--linie); border-radius: var(--radius-klein); font-family: inherit; font-size: 16px; line-height: 1.4; background: var(--flaeche); color: var(--text); appearance: none; -webkit-appearance: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } select { background-image: linear-gradient(45deg, transparent 50%, var(--gedaempft) 50%), linear-gradient(135deg, var(--gedaempft) 50%, transparent 50%); background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 38px; } textarea { min-height: 130px; resize: vertical; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--akzent) 18%, transparent); } input[readonly] { background: var(--flaeche-still); color: var(--gedaempft); } input[type="file"] { font-family: inherit; font-size: 15px; color: var(--gedaempft); max-width: 100%; } .feld { display: block; margin-bottom: 16px; font-size: 15px; font-weight: 600; } .feld > span { display: block; margin-bottom: 6px; color: var(--gedaempft); font-weight: 400; font-size: 14px; } /* Erklaerung unter einem Feld, nicht darueber. */ .feld > span.hilfe { margin: 6px 0 0; font-size: 13px; line-height: 1.45; } /* Die drei Felder fuer eigene Beschriftungen der Stufen stehen nebeneinander, solange Platz ist - so sieht man die Skala als Ganzes statt als Liste. */ .stufen-felder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .stufen-felder .stufen-feld { margin-bottom: 0; } .stufen-feld > span { display: flex; align-items: center; gap: 6px; } .stufen-feld .gesicht { flex: 0 0 auto; } .stufen-feld--gut .gesicht { color: var(--gut); } .stufen-feld--mittel .gesicht { color: var(--mittel); } .stufen-feld--schlecht .gesicht { color: var(--schlecht); } /* Symbolauswahl: Kacheln statt Auswahlmenue. Die Radioknoepfe selbst sind unsichtbar, sichtbar ist der Kasten daneben - er traegt Rahmen und Zustand. Ohne :has() gebaut, damit auch aeltere Browser die Markierung zeigen. */ .iconwahl { font-weight: 400; } .iconwahl-titel { display: block; margin-bottom: 8px; color: var(--gedaempft); font-weight: 400; font-size: 14px; } /* Alle Kacheln gleich gross, unabhaengig davon, wie hoch das Symbolbild ist und wie lang der Name: ein Raster mit gleich breiten Spalten, die Kacheln ziehen sich auf die Hoehe der hoechsten. */ .iconwahl-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); align-items: stretch; gap: 10px; max-width: 560px; } .iconwahl-feld { position: relative; display: flex; } .iconwahl-feld > input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; } .iconwahl-kasten { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 10px; border: 2px solid var(--linie-zart); border-radius: var(--radius); background: var(--flaeche); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .iconwahl-kasten:hover { border-color: var(--gedaempft); } .iconwahl-feld > input:checked + .iconwahl-kasten { border-color: var(--akzent); background: var(--flaeche-still); } .iconwahl-feld > input:focus-visible + .iconwahl-kasten { outline: 3px solid var(--akzent); outline-offset: 2px; } /* Die drei Symbole stehen in der Kachel untereinander - so, wie die Knoepfe auf dem Telefon auch stehen. Das haelt die Kacheln zudem gleich breit, obwohl das Sterne-Bild breiter ist als die anderen beiden. */ /* Feste Hoehe fuer den Bildteil: So stehen die Namen aller Kacheln auf einer Linie, obwohl drei Sterne flacher sind als drei Gesichter. */ .iconwahl-bilder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 82px; } .iconwahl-bild { display: flex; align-items: center; justify-content: center; height: 24px; } /* Sterne sind breiter als hoch: hier begrenzt die Hoehe, nicht die Breite. */ .iconwahl-bild .gesicht--sterne { height: 17px; width: auto; } .stufen-feld .gesicht--sterne { height: 13px; width: auto; } .iconwahl-bild--gut { color: var(--gut); } .iconwahl-bild--mittel { color: var(--mittel); } .iconwahl-bild--schlecht { color: var(--schlecht); } .iconwahl-name { margin-top: auto; font-size: 13px; line-height: 1.3; color: var(--gedaempft); text-align: center; } .iconwahl-feld > input:checked + .iconwahl-kasten .iconwahl-name { color: var(--text); font-weight: 600; } .hilfe.stufen-hilfe { display: block; margin: 8px 0 16px; color: var(--gedaempft); font-size: 13px; font-weight: 400; line-height: 1.45; } @media (max-width: 560px) { .stufen-felder { grid-template-columns: 1fr; gap: 10px; } } /* Feld mit Knopf daneben, der den Inhalt in die Zwischenablage legt. */ .kopierzeile { display: flex; gap: 8px; align-items: stretch; } .kopierzeile input { flex: 1 1 auto; min-width: 0; } /* Der Knopf trägt seit dem 06.09.2026 nur noch ein Symbol und ist damit so schmal, dass die Zeile auch auf dem Telefon nicht mehr umbrechen muss. Er steht mittig zum Feld statt in dessen Höhe gestreckt: ein Kreis, der so hoch wäre wie das Eingabefeld, wäre kein Kreis mehr. */ .kopierknopf { align-self: center; } /* Rückmeldung nach dem Kopieren: der Haken tritt an die Stelle der beiden Blätter, der Rand wird grün. Beide Zeichnungen stecken im Knopf, das Skript schaltet nur die Klasse um - so ändert sich die Breite nicht. */ .kopierknopf .kopier-fertig { display: none; } /* Beide Klassen im Selektor, weil .symbolknopf weiter unten steht und mit gleicher Spezifitaet sonst die Farbe des Knopfes gewinnt. */ .symbolknopf.kopierknopf--fertig { border-color: var(--gut); color: var(--gut); } .kopierknopf--fertig .kopier-symbol { display: none; } .kopierknopf--fertig .kopier-fertig { display: block; } /* Der Weg zum Anschauen steht neben dem Kopierknopf, aus demselben Grund mittig statt gestreckt. */ .oeffnenknopf { align-self: center; } /* Kästchen mit Text daneben und Erklärung darunter (seit 16.09.2026, zuerst für die Mehrfachteilnahme). Das globale Eingabefeld-Aussehen gilt nur für Textfelder, das Kästchen bleibt das des Systems, in der Akzentfarbe. */ .ankreuzfeld { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: start; cursor: pointer; } .ankreuzfeld input[type="checkbox"] { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--akzent); cursor: pointer; } .feld > span.ankreuzfeld-text { margin: 0; color: var(--text); font-size: 15px; font-weight: 600; } .ankreuzfeld > span.hilfe { grid-column: 2; } /* Danke-Seite bei Mehrfachteilnahme: Knopf zur nächsten Rückmeldung und die Uhr, die von selbst dorthin zurückführt. */ .weiter { margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .weiter .senden { text-decoration: none; } .weiter-uhr { margin: 0; font-size: 13px; min-height: 1.4em; } /* Anweisung für einen KI-Dienst (seit 16.09.2026): mehrzeilig und nur zum Kopieren. Der Knopf steht oben neben dem Feld - mittig wäre er bei einem hohen Feld aus dem Blick. */ .promptfeld textarea { flex: 1 1 auto; min-width: 0; min-height: 0; height: 15em; font-size: 14px; line-height: 1.5; background: var(--flaeche-still); color: var(--text); } .promptfeld .kopierknopf { align-self: flex-start; } /* ── Knöpfe ─────────────────────────────────────────────── */ .senden { display: inline-block; margin-top: 8px; padding: 12px 24px; border: 1px solid transparent; border-radius: 980px; background: var(--akzent); color: var(--auf-akzent); font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.3; cursor: pointer; transition: background 0.15s ease, opacity 0.15s ease; } .senden:hover { background: var(--akzent-tief); text-decoration: none; } .senden:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; } .senden--leise { background: transparent; color: var(--akzent); border-color: var(--linie); } .senden--leise:hover { background: var(--flaeche-still); color: var(--akzent); } /* Kleinere Variante für Knopfreihen in Kopfzeilen. */ .senden--klein { margin-top: 0; padding: 9px 18px; font-size: 15px; } .senden--warnung { background: var(--schlecht); } .senden--warnung:hover { background: var(--schlecht); opacity: 0.85; } .senden[disabled] { opacity: 0.4; cursor: default; } .verweis-knopf { border: none; background: none; padding: 0; font-family: inherit; font-size: 14px; color: var(--schlecht); cursor: pointer; } .verweis-knopf:hover { text-decoration: underline; } /* ── Kopfzeile der Verwaltung ───────────────────────────── */ .kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 30px; } .kopf h1 { font-size: 28px; } /* Logo der Veranstaltung im Kopf der Verwaltung. Höhe begrenzt, damit ein hochformatiges Logo die Kopfzeile nicht aufbläht. */ .kopflogo { display: block; max-height: 44px; max-width: 240px; margin: 12px 0 2px; } .kopf nav { display: flex; flex-wrap: wrap; gap: 10px; } /* Unteransichten (QR, Auswertung, Import …) schliessen und zurück zur Sessionliste. Ersetzt den früheren Übersicht-Link im Menü. */ .unterseite-leiste { display: flex; justify-content: flex-end; margin: -16px 0 16px; } .schliessen { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--gedaempft); font-size: 14px; line-height: 1; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .schliessen:hover { background: var(--linie-zart); color: var(--text); border-color: var(--gedaempft); text-decoration: none; } /* Bleistift neben dem Namen der Veranstaltung: führt in deren Einstellungen. */ .stift { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: 8px; vertical-align: middle; border-radius: 50%; color: var(--gedaempft); transition: background 0.15s ease, color 0.15s ease; } /* Der Stift ist auf sofort.php ein Knopf (er klappt das Formular auf) und in der Verwaltung ein Verweis - beide sollen gleich aussehen. */ button.stift { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; } .stift:hover { background: var(--linie-zart); color: var(--akzent); text-decoration: none; } .stift--klein { width: 26px; height: 26px; margin-left: 2px; flex: 0 0 auto; } /* Titel und Bleistift gehören zusammen: der Stift darf nie allein auf eine neue Zeile rutschen, der Titel darf umbrechen. */ .titelzeile { display: flex; align-items: flex-start; gap: 2px; } /* Aktionsspalte: jeder Weg auf einer eigenen Zeile, nichts bricht um. */ /* Speichern, Abbrechen und Löschen in einer Zeile; das Löschen rechts, damit es nicht neben dem Speichern liegt und versehentlich getroffen wird. */ .knopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; } .knopfzeile .senden { margin-top: 0; text-decoration: none; } .knopfzeile form { margin: 0; } .knopfzeile .knopfzeile-rechts, .knopfzeile-rechts { margin-left: auto; } /* Die drei Wege aus einer Zeile heraus sind Knoepfe, keine Textlinks - am Bildschirm dieselbe Gestalt wie auf dem Telefon. */ .aktionen { vertical-align: middle; white-space: nowrap; } .aktionsreihe { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 6px; } .aktionen a { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--linie); border-radius: 980px; font-size: 13px; line-height: 1; } .aktionen a:hover { background: var(--flaeche-still); text-decoration: none; } /* Die vier Knöpfe brechen nicht mehr um. Sie dürfen es seit dem 06.09.2026 auch nicht mehr: als Symbolknöpfe sind sie zusammen rund 160 px breit, und untereinander gestapelt sähe die Spalte aus wie ein Versehen. Die Tabelle wird dafür unter 1000 px zur Kartenliste, siehe weiter unten. */ /* Die vier Wege aus einer Zeile heraus sind runde Symbolknöpfe gleicher Grösse: QR-Code, Auswertung, Drucken und der Verweis auf die Feedback-Seite, der statt eines gezeichneten Symbols die Sprechblase der Marke trägt - dasselbe Bild, das die Teilnehmenden dort sehen. Die Beschriftung steht im title und im aria-label. */ .symbolverweis, .feedbackverweis, .druckverweis { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; min-width: 34px; height: 34px; padding: 0; border: 1px solid var(--linie); border-radius: 50%; transition: background 0.15s ease; } .symbolverweis:hover, .feedbackverweis:hover, .druckverweis:hover { background: var(--linie-zart); } /* `.aktionen a` bringt seitliches Polster mit und ist spezifischer als die Regel oben. Bei den runden Symbolknöpfen muss es weg, sonst bleiben von den 34 Pixeln nur acht für das Symbol und der Drucker steht schmalgequetscht im Kreis. */ .aktionen .symbolverweis, .aktionen .feedbackverweis, .aktionen .druckverweis { padding: 0; } .aktionen .symbolverweis svg, .aktionen .druckverweis svg { flex: 0 0 auto; } /* Blau, damit die Symbole anklickbar aussehen. Der Drucker führt auf die QR-Ansicht und öffnet dort den Druckdialog. */ .symbolverweis, .druckverweis { color: var(--akzent); } .feedbackmarke { width: 19px; height: 19px; display: block; } /* ── Runde Symbolknöpfe für Seitenaktionen ──────────── */ /* Dieselbe Sprache wie die Knöpfe in der Sessionliste, aber für Aktionen, die für sich stehen: die Reihe unter dem Aushang auf den beiden QR-Seiten und der Kopierknopf neben einem Feld. Sie dürfen etwas grösser sein als die 34 px in der Tabellenzeile, weil sie nicht um Platz kämpfen. Was ein Knopf tut, steht in title und aria-label. */ .symbolknopf { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; min-width: 40px; height: 40px; padding: 0; margin: 0; border: 1px solid var(--linie); border-radius: 50%; background: transparent; color: var(--akzent); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .symbolknopf:hover { background: var(--linie-zart); text-decoration: none; } .symbolknopf:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; } .symbolknopf svg { flex: 0 0 auto; } .symbolknopf .feedbackmarke { width: 21px; height: 21px; } .symbolreihe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 24px; } .symbolreihe--mittig { justify-content: center; } /* Auf dem Telefon die übliche Mindestgrösse für Fingerziele. */ @media (max-width: 700px) { .symbolknopf { width: 44px; min-width: 44px; height: 44px; } } /* ── Auf- und zuklappbarer Bereich ──────────────────────── */ .klappe { margin: 26px 0 0; } .klappe > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; padding: 4px 0; } .klappe > summary::-webkit-details-marker { display: none; } .klappe > summary h2 { margin: 0; } .klappe > summary::before { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--gedaempft); border-bottom: 2px solid var(--gedaempft); transform: rotate(-45deg); transition: transform 0.15s ease; flex: 0 0 auto; } .klappe[open] > summary::before { transform: rotate(45deg); } .klappe > summary:hover::before { border-color: var(--akzent); } .klappe > summary:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; border-radius: 6px; } .klappe-inhalt { padding-top: 6px; } /* Feinere Fassung fuer einen Abschnitt innerhalb eines Formulars. */ .klappe--fein { margin: 4px 0 18px; } .klappe--fein > summary { font-size: 15px; font-weight: 600; } .klappe--fein .klappe-inhalt { padding-top: 14px; } .klappe--fein .feld:last-child { margin-bottom: 0; } /* ── Tabellen ───────────────────────────────────────────── */ .tabellenrahmen { overflow-x: auto; border: 1px solid var(--linie-zart); border-radius: var(--radius); background: var(--flaeche); box-shadow: var(--schatten-knopf); } table { width: 100%; border-collapse: collapse; font-size: 15px; } th, td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--linie-zart); vertical-align: top; } th { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gedaempft); font-weight: 600; background: var(--flaeche-still); } tr:last-child td { border-bottom: none; } /* Die Sessionliste trägt acht Spalten und muss darum sparsamer mit dem Platz umgehen als die übrigen Tabellen. */ .sessionliste th, .sessionliste td { padding: 12px 10px; } .sessionliste .balken { width: 96px; } /* Die Zahl der Kommentare steht unter den Stimmen. Sie darf nicht umbrechen, sonst steht «Kommentare» allein auf der zweiten Zeile; die Spalte wird dafür rund zehn Pixel breiter. */ .stimmenmeta { font-size: 12px; white-space: nowrap; } /* Sortierbare Kopfzelle: der ganze Titel ist der Verweis, damit die Fläche zum Klicken so gross ist wie die Beschriftung. Aussehen bleibt das der übrigen Kopfzellen - eine Kopfzeile voller blauer Links wäre unruhig. */ /* Bewusst inline und nicht inline-flex: so darf «Letzte Aktivität» umbrechen wie gewöhnlicher Text. Ein nicht umbrechender Kopf treibt die Mindestbreite der Tabelle um gut fünfzig Pixel hoch. */ .sortverweis { color: inherit; text-decoration: none; } .sortverweis:hover { color: var(--text); text-decoration: underline; } .sortverweis.ist-sortiert { color: var(--text); } /* Der Pfeil zeigt die Richtung und steht nur bei der sortierten Spalte. */ .sortpfeil { vertical-align: -1px; margin-left: 3px; } .sortpfeil--ab { transform: rotate(180deg); } /* Hält das letzte Wort und den Pfeil auf derselben Zeile. */ .sortende { white-space: nowrap; } /* Ersatz für die Kopfzeile auf schmalen Fenstern, wo aus der Tabelle Karten werden und die Spaltentitel verschwinden. Oberhalb der Grenze unsichtbar. */ .sortierwahl { display: none; } @media (max-width: 1000px) { .sortierwahl { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 14px; } .sortierwahl .feld { margin-bottom: 0; } .sortierwahl .feld--eng { flex: 1 1 150px; min-width: 0; } .sortierwahl select { width: 100%; } } /* Auf schmalen Fenstern wird aus der Sessionliste eine Kartenliste: sonst verschwinden Stimmen und Aktionen hinter dem seitlichen Scrollen. Die Grenze lag bei 820 px und ist auf 1000 px gestiegen: dazugekommen sind die achte Spalte («Letzte Aktivität») und die Festlegung, dass die vier Symbolknöpfe nicht umbrechen. Gemessene Mindestbreite der Tabelle 945 px, dazu der Rand der Hülle von rund 44 px. Wer eine Spalte ergänzt, misst nach: Rahmen künstlich auf 200 px verengen und die Tabellenbreite ablesen. */ @media (max-width: 1000px) { .sessionliste, .sessionliste tbody, .sessionliste tr, .sessionliste td { display: block; width: auto; } .sessionliste thead { display: none; } .sessionliste tr { padding: 16px 16px 14px; border-bottom: 1px solid var(--linie-zart); } .sessionliste tr:last-child { border-bottom: none; } .sessionliste td { border: none; padding: 3px 0; } .sessionliste td[data-titel]::before { content: attr(data-titel); display: inline-block; min-width: 92px; /* «Letzte Aktivität» ist breiter als die 92 px; ohne diesen Abstand klebt der Wert an der Beschriftung. */ padding-right: 8px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gedaempft); font-weight: 600; } /* In der Karte stünde die Zahl der Kommentare sonst auf einer zweiten Zeile unter der Beschriftung statt unter dem Wert. Auf dem Telefon steht sie darum hinter den Stimmen, getrennt durch einen Punkt. */ .sessionliste td[data-titel="Stimmen"] br { display: none; } .sessionliste td[data-titel="Stimmen"] .stimmenmeta::before { content: " · "; } .sessionliste td[data-titel="Verteilung"] .balken { display: inline-flex; vertical-align: middle; width: 96px; margin-right: 8px; } .sessionliste .aktionsreihe { justify-content: flex-start; gap: 8px; margin-top: 10px; } .sessionliste .aktionen a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--linie); border-radius: 980px; line-height: 1; } .sessionliste .aktionen .symbolverweis, .sessionliste .aktionen .druckverweis, .sessionliste .aktionen .feedbackverweis { width: 44px; min-width: 44px; height: 44px; padding: 0; border-radius: 50%; } /* Der Bleistift ist der häufigste Weg ins Bearbeiten und darf darum nicht das kleinste Ziel auf der Karte sein: 44 px wie die Knöpfe daneben. Die Zeichnung bleibt gleich gross, es wächst nur die Fläche darum. */ .sessionliste .stift--klein, h1 > .stift, .kopf .stift { width: 44px; height: 44px; } } /* Auch die Liste der einzelnen Rückmeldungen wird auf dem Telefon zu Karten, sonst sind Kommentar und Löschen nicht erreichbar. */ @media (max-width: 700px) { .stimmentabelle, .stimmentabelle tbody, .stimmentabelle tr, .stimmentabelle td { display: block; width: auto; } .stimmentabelle thead { display: none; } .stimmentabelle tr { padding: 12px 16px; border-bottom: 1px solid var(--linie-zart); } .stimmentabelle tr:last-child { border-bottom: none; } .stimmentabelle td { border: none; padding: 3px 0; text-align: left !important; } .stimmentabelle td[data-titel]::before { content: attr(data-titel); display: inline-block; min-width: 100px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gedaempft); font-weight: 600; } .stimmentabelle .verweis-knopf { min-height: 40px; } .knopfzeile .knopfzeile-rechts, .knopfzeile-rechts { margin-left: 0; } } /* ── Ergebnisdarstellung ────────────────────────────────── */ .balken { display: flex; height: 8px; width: 132px; border-radius: 999px; overflow: hidden; background: var(--linie-zart); } .balken i { display: block; height: 100%; } .balken .b-gut { background: var(--gut); } .balken .b-mittel { background: var(--mittel-voll); } .balken .b-schlecht { background: var(--schlecht); } .marke { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; } .marke--offen { background: var(--gut-flaeche); color: var(--gut); } .marke--zu { background: var(--linie-zart); color: var(--gedaempft); } .marke--demo { background: color-mix(in srgb, var(--akzent) 14%, transparent); color: var(--akzent); margin-left: 6px; vertical-align: 2px; } /* Betriebsseite: Loeschknopf in der Tabellenzeile und die Meldung danach. */ .symbolknopf--loeschen { width: 34px; min-width: 34px; height: 34px; color: var(--schlecht); } @media (max-width: 700px) { .symbolknopf--loeschen { width: 44px; min-width: 44px; height: 44px; } } .symbolknopf--loeschen:hover { background: var(--schlecht-flaeche); border-color: var(--schlecht); } .hinweis-geloescht { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius); background: var(--linie-zart); font-size: 15px; } .zahlreihe { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 30px; } /* Register auf der Betriebsseite: Veranstaltungen und Sofortfragen. Zwei Verweise, kein Skript - die gewählte Art steht in der Adresse. */ .register { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; } .register-zahl { display: inline-block; margin-left: 6px; opacity: 0.7; font-variant-numeric: tabular-nums; } /* ── Kumulierte Verläufe auf der Betriebsseite ───────────── */ /* Zwei Diagramme nebeneinander statt eines mit zwei Achsen: Rückmeldungen und Veranstaltungen liegen um Grössenordnungen auseinander, in einem Bild wäre die kleinere Reihe eine flache Linie am Boden. */ .diagramme { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 22px 0 12px; } @media (max-width: 700px) { .diagramme { grid-template-columns: 1fr; } } .kurve-wert { margin: 0 0 8px; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; } .kurve { display: block; width: 100%; height: auto; overflow: visible; } .kurve-flaeche { fill: color-mix(in srgb, var(--akzent) 14%, transparent); } .kurve-linie { fill: none; stroke: var(--akzent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .kurve-punkt { fill: var(--akzent); stroke: var(--flaeche); stroke-width: 2; } .kurve-achse { stroke: var(--linie-zart); stroke-width: 1; } .kurve-text { fill: var(--gedaempft); font-size: 10px; font-family: var(--schrift); } .kachel { flex: 1 1 140px; background: var(--flaeche); border: 1px solid var(--linie-zart); border-radius: var(--radius); box-shadow: var(--schatten-knopf); padding: 18px 20px; } .kachel .wert { font-size: 34px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.05; } .kachel .titel { font-size: 13px; color: var(--gedaempft); margin-top: 6px; } .kachel--gut .wert { color: var(--gut); } .kachel--mittel .wert { color: var(--mittel); } .kachel--schlecht .wert { color: var(--schlecht); } /* Kacheln einer Sofortfrage: oben Stimmen und Durchschnitt je halb, darunter die drei Stufen je ein Drittel. */ .zahlreihe--sofort { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); } .zahlreihe--sofort .kachel { grid-column: span 2; } .zahlreihe--sofort .kachel--breit { grid-column: span 3; } @media (max-width: 560px) { .zahlreihe--sofort { gap: 8px; } .zahlreihe--sofort .kachel { padding: 14px 12px; } .zahlreihe--sofort .kachel .wert { font-size: 28px; } } .kommentar { background: var(--flaeche); border: 1px solid var(--linie-zart); border-left: 3px solid var(--linie); border-radius: var(--radius-klein); padding: 16px 18px; margin-bottom: 10px; font-size: 16px; white-space: pre-wrap; } .kommentar--gut { border-left-color: var(--gut); } .kommentar--mittel { border-left-color: var(--mittel); } .kommentar--schlecht { border-left-color: var(--schlecht); } .kommentar .quelle { display: block; margin-top: 10px; font-size: 12px; color: var(--gedaempft); white-space: normal; } /* ── QR-Code ────────────────────────────────────────────── */ /* Bleibt in jedem Modus hell: dunkle Module auf hellem Grund sind die Voraussetzung dafür, dass ein Code zuverlässig gelesen wird. */ .qr-flaeche { background: #ffffff; color: #1d1d1f; border: 1px solid var(--linie); border-radius: var(--radius); padding: 26px; text-align: center; } .qr-flaeche svg { width: 100%; max-width: 320px; height: auto; } .qr-link { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; color: #6e6e73; word-break: break-all; margin: 16px 0 0; } /* ── Fusszeile ──────────────────────────────────────────── */ .fusszeile { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--linie-zart); font-size: 13px; color: var(--gedaempft); } .fusszeile a { color: var(--gedaempft); text-decoration: underline; } .fusszeile a:hover { color: var(--text); } .fusslinks { margin-top: 8px; } .fusslinks a { margin-right: 16px; } /* ── Rechtstexte ────────────────────────────────────────── */ .rechtstext { font-size: 16px; } .rechtstext h2 { margin-top: 34px; } .rechtstext ul { padding-left: 22px; margin: 0 0 14px; } .rechtstext li { margin-bottom: 8px; } .rechtstext .stand { color: var(--gedaempft); font-size: 14px; } /* Datum neben der Versionsnummer: gleiche Zeile, leiser. */ .rechtstext h2 .stand { font-weight: 400; margin-left: 10px; } /* ── Eingebettete Fassung (?s=CODE&rahmen=1) ────────────── */ /* Läuft im iframe einer fremden Seite: kein Aussenrand, keine Marke, nur Frage, Knöpfe und Kommentar. Der Grund bleibt gesetzt, damit die Knöpfe auf jeder Fremdseite lesbar sind. */ .rahmen .huelle { max-width: 100%; padding: 16px 14px 12px; } .rahmen .frage { margin-top: 0; } .fusszeile--rahmen { margin-top: 18px; padding-top: 12px; font-size: 12px; text-align: center; } /* Beispielzeilen auf «Was du damit machen kannst» */ .probe-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--linie-zart); } .probe-zeile:first-child { padding-top: 0; } .probe-zeile:last-child { padding-bottom: 0; border-bottom: none; } .probe-zahlen { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .probe-zahlen .meta { font-size: 13px; } @media (max-width: 560px) { .probe-zahlen { align-items: flex-start; } } /* ── Kleinkram ──────────────────────────────────────────── */ .versteckt { display: none !important; } @media (max-width: 600px) { .huelle { padding: 32px 18px 52px; } h1 { font-size: 28px; } .knopf { font-size: 19px; padding: 20px; } } @media print { body { background: #fff; } .nicht-drucken { display: none !important; } } /* ================================================================== Startseite Nur für die Eingangsseite. Die Feedback-Seiten und die Verwaltung verwenden nichts davon. ================================================================== */ .huelle--start { max-width: 760px; padding-top: 60px; } /* ── Kopf ───────────────────────────────────────────────── */ .held { text-align: center; margin-bottom: 52px; } .held h1 { font-size: clamp(38px, 7vw, 60px); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 18px; } .dreiklang span { display: block; } .dreiklang span + span { /* Die zweite und dritte Zeile etwas ruhiger als die erste, damit der Blick von oben nach unten läuft statt drei gleich laute Zeilen zu sehen. */ color: var(--gedaempft); } .held .vorspann { font-size: clamp(17px, 2.4vw, 21px); line-height: 1.45; color: var(--gedaempft); max-width: 30em; margin: 0 auto; } .arten { font-size: 14px; color: var(--gedaempft); margin: 14px auto 0; max-width: 34em; line-height: 1.7; } /* Schnellstart im Kopf der Eingangsseite (seit 16.09.2026): eine Frage direkt anlegen. Feld und Knopf als Pillen nebeneinander, auf dem Telefon untereinander. */ .schnellstart { max-width: 36em; margin: 32px auto 0; } .schnellstart input[type="text"] { border-radius: 980px; padding: 13px 22px; font-size: 17px; box-shadow: var(--schatten-knopf); } .schnellstart-fuss { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--gedaempft); } /* Feld und Knopf in einer Zeile - im Schnellstart und beim Nachtragen der E-Mail-Adresse auf sofort.php. */ .eingabezeile { display: flex; gap: 10px; align-items: stretch; } .eingabezeile input { flex: 1 1 auto; min-width: 0; } .eingabezeile .senden { margin: 0; flex: 0 0 auto; } @media (max-width: 560px) { .eingabezeile { flex-direction: column; } .eingabezeile .senden { width: 100%; } } /* Nur fuer Screenreader sichtbar. */ .unsichtbar { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .marke-oben { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--akzent); margin-bottom: 18px; } /* ── Antippbare Demo ────────────────────────────────────── */ .demo { margin-bottom: 14px; } /* Statt einer Beschriftung «Zum Ausprobieren» schwebt ein Tippzeichen über den Knöpfen, setzt in Abständen auf und wandert von Knopf zu Knopf. Es sagt ohne Worte, dass die Demo antippbar ist, und verschwindet beim ersten Tippen. Der Zeiger trägt die Lage, der Schweber die Bewegung - so schweben Sprechblase und Punkt gemeinsam. */ .tippzeiger { position: absolute; right: 20px; top: 0; transform: translateY(-50%); transition: top 0.55s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } .tipp-schweber { display: flex; align-items: center; gap: 9px; animation: tippschweben 2.8s ease-in-out infinite; } .tipp { position: relative; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--tipp); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); animation: tippdruck 2.8s ease-in-out infinite; } .tipp::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--tipp); animation: tippring 2.8s ease-out infinite; } .tipp-blase { padding: 4px 11px; border-radius: 999px; background: var(--tipp); color: var(--auf-tipp); font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); position: relative; } /* Spitze zum Punkt hin. */ .tipp-blase::after { content: ""; position: absolute; right: -5px; top: 50%; margin-top: -5px; border: 5px solid transparent; border-left-color: var(--tipp); border-right: 0; } @keyframes tippschweben { 0%, 42% { transform: translateY(-11px); } 52%, 60% { transform: translateY(0); } 72%, 100% { transform: translateY(-11px); } } @keyframes tippdruck { 0%, 42% { transform: scale(1); } 52%, 60% { transform: scale(0.82); } 72%, 100% { transform: scale(1); } } @keyframes tippring { 0%, 50% { transform: scale(0.5); opacity: 0; } 58% { transform: scale(0.7); opacity: 0.8; } 88%, 100% { transform: scale(1.35); opacity: 0; } } /* Wer Bewegung abbestellt hat, sieht das Zeichen ruhig auf dem ersten Knopf liegen; das Wandern schaltet das Skript dann gar nicht erst ein. */ @media (prefers-reduced-motion: reduce) { .tippzeiger { transition: none; } .tipp-schweber, .tipp, .tipp::before { animation: none; } .tipp::before { opacity: 0.4; } } /* ── Telefon als Rahmen der Demo ─────────────────────────── */ /* Masse eines iPhone: 393 x 852 Punkte Bildschirmfläche. Feste Grösse, nur auf schmaleren Fenstern schrumpft es proportional mit. */ .telefon { /* 393 Punkte Bildschirm plus 2 x 12 Punkte Rahmen */ width: 417px; max-width: 100%; margin: 0 auto; } .telefon-rahmen { /* Nur der obere Teil des Geräts ist zu sehen. Ecken, Rahmen und Insel sagen bereits, dass es ein Handy ist; die restlichen rund 350 Punkte wären leere Fläche. Der untere Rand läuft weich aus. */ height: 596px; overflow: hidden; border-radius: 56px; padding: 12px; background: var(--geraet); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.18); -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 99%); mask-image: linear-gradient(to bottom, #000 72%, transparent 99%); } .telefon-schirm { position: relative; aspect-ratio: 393 / 852; border-radius: 45px; background: var(--grund); padding: 76px 20px 24px; overflow: hidden; } /* Uhrzeit, Empfang, WLAN und Batterie stehen links und rechts neben der Insel. Sie sind Zier: kein echter Zustand, darum aria-hidden. */ .telefon-status { position: absolute; top: 20px; left: 26px; right: 26px; display: flex; align-items: center; justify-content: space-between; color: var(--text); font-size: 14px; font-weight: 600; line-height: 1; } .telefon-symbole { display: inline-flex; align-items: center; gap: 5px; } .telefon-symbole svg { display: block; } .telefon-insel { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 108px; height: 30px; border-radius: 999px; background: var(--geraet); } .demo-label { margin: 0 2px 6px; font-size: 11px; } .demo-titel { margin: 0 2px 18px; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; } .demo-frage { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; margin: 0 2px 14px; } /* Im Telefon ist alles eine Nummer kleiner. */ .telefon .knopfreihe { gap: 9px; position: relative; } .telefon .knopf { padding: 17px 18px; gap: 14px; font-size: 17px; border-radius: 16px; } .telefon .knopf:hover { transform: none; box-shadow: var(--schatten-knopf); } .telefon textarea { min-height: 62px; font-size: 14px; padding: 10px 12px; margin-bottom: 10px; } .telefon .senden { margin-top: 0; padding: 9px 18px; font-size: 15px; } .demo-kommentar { text-align: left; background: var(--flaeche); border: 1px solid var(--linie-zart); border-radius: 14px; padding: 14px; margin-top: 16px; } .demo-klein { font-size: 13px; color: var(--gedaempft); margin: 0 0 8px; } #demo-fertig { margin-top: 16px; } .demo-danke { text-align: center; padding: 10px 0 6px; } .demo-danke .haken { width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 50%; background: var(--gut-flaeche); color: var(--gut); display: flex; align-items: center; justify-content: center; } .demo-danke .gross { font-size: 18px; font-weight: 650; letter-spacing: -0.01em; margin-bottom: 6px; } .nochmal { border: none; background: none; padding: 0; margin-top: 12px; font-family: inherit; font-size: 15px; color: var(--akzent); cursor: pointer; } .nochmal:hover { text-decoration: underline; } .demo-fuss { text-align: center; font-size: 14px; color: var(--gedaempft); margin: 0 0 56px; } /* Warum drei Knöpfe genügen: reiner Text, keine Karte - eine Atempause zwischen der Demo und den Abschnitten mit Kästen. */ .warum { max-width: 34em; margin: 0 auto 56px; } .warum p { color: var(--gedaempft); font-size: 16px; margin: 0 0 14px; } /* ── Drei Schritte ──────────────────────────────────────── */ .schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 56px; } .schritt { background: var(--flaeche); border: 1px solid var(--linie-zart); border-radius: var(--radius); padding: 24px 22px; } .schritt .zahl { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--akzent); color: var(--auf-akzent); font-size: 15px; font-weight: 650; margin-bottom: 16px; } .schritt h3 { margin: 0 0 8px; font-size: 17px; } .schritt p { margin: 0; font-size: 15px; color: var(--gedaempft); } /* ── Beispielauswertung ─────────────────────────────────── */ .abschnitt { text-align: center; font-size: 24px; margin: 0 0 22px; } /* ── Einstieg: zwei Wege als Kacheln ─────────────────────── */ .starten { margin: -20px 0 56px; padding: 30px 26px 26px; border-radius: 28px; background: color-mix(in srgb, var(--akzent) 7%, var(--flaeche)); border: 1px solid color-mix(in srgb, var(--akzent) 22%, transparent); } .starten-titel { text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--akzent); margin: 0 0 18px; } .wahlreihe { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .wahl { display: block; padding: 22px 24px; border-radius: var(--radius); background: color-mix(in srgb, var(--akzent) 16%, var(--flaeche)); border: 1px solid color-mix(in srgb, var(--akzent) 34%, transparent); box-shadow: var(--schatten-knopf); color: var(--text); text-decoration: none; transition: transform 0.12s ease, box-shadow 0.2s ease; } .wahl .wahl-kopf { color: var(--akzent); } .wahl:hover { transform: translateY(-2px); box-shadow: var(--schatten); text-decoration: none; } .wahl:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; } .wahl-kopf { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 650; letter-spacing: -0.01em; margin-bottom: 8px; } .wahl-pfeil { flex: 0 0 auto; transition: transform 0.15s ease; } .wahl:hover .wahl-pfeil { transform: translateX(3px); } .wahl-text { display: block; font-size: 15px; line-height: 1.45; color: var(--gedaempft); } .wahl--haupt { background: var(--akzent); border-color: transparent; color: var(--auf-akzent); } .wahl--haupt .wahl-kopf { color: var(--auf-akzent); } .wahl--haupt .wahl-text { color: rgba(255, 255, 255, 0.85); } .starten-fuss { text-align: center; font-size: 14px; color: var(--gedaempft); margin: 18px 0 0; } .starten-mehr { text-align: center; margin: 16px 0 0; } /* Die Demos stehen unter der Karte, zu der sie gehoeren. Jede Spalte belegt zwei Zeilen des gemeinsamen Rasters (subgrid): So sind beide Karten gleich hoch und beide Demo-Reihen beginnen auf derselben Linie, auch wenn die eine Reihe mehr umbricht als die andere. */ .wahlreihe { row-gap: 0; } .wahlspalte { display: grid; grid-row: span 2; grid-template-rows: subgrid; } .wahl-demos { text-align: center; margin: 12px 0 0; } .wahl-demos-titel { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gedaempft); margin: 0 0 8px; } /* Die Demo-Knoepfe stehen untereinander und sind alle gleich breit, in beiden Spalten. Die Mindestbreite von 11.5em fasst den laengsten Text von heute («Eigene Antworttexte», «Generalversammlung»); ein laengerer Text macht nur seine eigene Spalte breiter - dann die 11.5em anheben. */ .wahl-demos-reihe { display: grid; grid-template-columns: minmax(min(11.5em, 100%), max-content); justify-content: center; gap: 8px; } .wahl-demos-reihe > .senden { text-align: center; } @media (max-width: 700px) { .wahlreihe { grid-template-columns: 1fr; } .wahlspalte + .wahlspalte { margin-top: 14px; } .starten { padding: 24px 18px 20px; border-radius: 22px; } } .losgehts { text-align: center; margin: -32px 0 56px; } .losgehts .senden { padding: 14px 30px; font-size: 17px; margin: 0 6px 10px; text-decoration: none; } .losgehts .meta { display: inline-block; margin: 8px auto 0; max-width: 30em; font-size: 14px; } /* Sprung zum Formular sanft statt hart - ausser jemand mag keine Bewegung. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } .beispiel { background: var(--flaeche-still); border: 1px solid var(--linie-zart); border-radius: 28px; padding: 28px 26px; margin-bottom: 56px; } .beispiel .zahlreihe { margin: 0 0 18px; } .beispiel .kachel { flex: 1 1 110px; } .beispiel .kachel .wert { font-size: 28px; } .beispiel-kommentar { background: var(--flaeche); border: 1px solid var(--linie-zart); border-left: 3px solid var(--gut); border-radius: var(--radius-klein); padding: 14px 16px; font-size: 15px; } /* ── Merkmale ───────────────────────────────────────────── */ /* Die Bitte um Sorgfalt mit der Natur ist kein Verkaufsargument und soll auch nicht wie eines aussehen: ein ruhiger eigener Block statt drei zentrierter Absätze zwischen den Abschnitten, mit einem kleinen Berg als Zeichen. Kein Akzentton, kein Schatten. */ .bedingung { max-width: 34em; margin: 0 auto 56px; padding: 24px 26px; text-align: left; background: var(--flaeche); border: 1px solid var(--linie-zart); border-radius: 28px; } .bedingung-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } /* Im Kopf des Blocks steht die Bildmarke: Der Abschnitt spricht über wiewars.ch, nicht über die Berge. Der gezeichnete Berg ist auf den Unterstützungsknopf gewandert, wo er hingehört. */ .bedingung-zeichen { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--grund); } .bedingung-zeichen img { display: block; } .bedingung p { color: var(--gedaempft); font-size: 15px; margin: 0 0 10px; } .bedingung p:last-child { margin-bottom: 0; } /* Titel neben dem Berg. Gleiche Grösse wie die Abschnittstitel daneben wäre zu laut - der Block bleibt ein ruhiges Nachwort. */ .bedingung-titel { margin: 0; font-size: 17px; font-weight: 600; } /* Autorenzeile auf unterstuetzen.php: Porträt im Kreis, daneben Name und eine Zeile dazu. Steht am Ende der Seite, nicht am Anfang - die Sache zuerst. */ .autor { display: flex; align-items: center; gap: 16px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--linie-zart); } .autor-bild { flex: 0 0 auto; width: 88px; height: 88px; border-radius: 50%; object-fit: cover; background: var(--grund); } .autor-wer { min-width: 0; } .autor-name { margin: 0 0 4px; font-weight: 600; } .autor-text { margin: 0; font-size: 15px; color: var(--gedaempft); } /* Knopf über der Fusszeile: leise Pille, mittig, mit dem Berg davor. */ .fussknopf { margin: 8px 0 0; text-align: center; } .knopf-mit-zeichen { display: inline-flex; align-items: center; gap: 9px; } .merkmale { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 30px; margin-bottom: 56px; } .merkmal h3 { margin: 0 0 6px; font-size: 16px; } .merkmal p { margin: 0; font-size: 15px; color: var(--gedaempft); } /* ── Anmeldeblock ───────────────────────────────────────── */ .anlegen { background: var(--flaeche); border: 1px solid var(--linie-zart); border-radius: 28px; box-shadow: var(--schatten); padding: 32px 28px; } .anlegen h2 { margin: 0 0 6px; font-size: 26px; } .anlegen .meta { margin-bottom: 24px; } .anlegen .senden { width: 100%; padding: 15px 24px; font-size: 17px; } /* ── Zurückhaltende Bewegung ────────────────────────────── */ .einblenden { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; } .einblenden.da { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .einblenden, .einblenden.da { opacity: 1; transform: none; transition: none; } .knopf { transition: none; } } @media (max-width: 700px) { .huelle--start { padding-top: 40px; } .schritte { grid-template-columns: 1fr; } .merkmale { grid-template-columns: 1fr; gap: 20px; } .demo, .beispiel, .anlegen { border-radius: 22px; padding-left: 20px; padding-right: 20px; } } /* ── Wortmarke ────────────────────────────────────────────── Zwei Bilddateien im Markup, je nach Farbschema ist eine sichtbar. Ohne JavaScript, deshalb auch beim ersten Aufbau der Seite richtig. */ .wortmarke { display: block; height: 30px; width: auto; } .wortmarke--held { height: 46px; margin: 0 auto 22px; } .wortmarke--klein { height: 22px; } .wortmarke--fuss { height: 20px; margin-bottom: 10px; opacity: 0.75; } .wortmarke--dunkel { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) .wortmarke--hell { display: none; } :root:not([data-thema="hell"]) .wortmarke--dunkel { display: block; } } :root[data-thema="dunkel"] .wortmarke--hell { display: none; } :root[data-thema="dunkel"] .wortmarke--dunkel { display: block; } .marke-verweis { display: inline-block; } .marke-verweis:hover { text-decoration: none; opacity: 0.75; } .held .wortmarke--held { margin-left: auto; margin-right: auto; } /* ================================================================== Aushang Was auf Papier landet: Logo, grosse Anweisung, QR-Code. Am Bildschirm ist es die Vorschau, beim Drucken füllt es das Blatt. ================================================================== */ .aushang-reihe { display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-start; } .aushang-spalte { flex: 0 0 380px; max-width: 100%; } @media (max-width: 700px) { .aushang-spalte { flex: 1 1 100%; } .aushang { padding: 24px 18px 20px; } .aushang-frage { font-size: 25px; } } .aushang { background: #ffffff; color: #1d1d1f; border: 1px solid var(--linie); border-radius: var(--radius); padding: 30px 26px 26px; text-align: center; } .aushang-kopf { min-height: 10px; margin-bottom: 18px; } .aushang-logo { max-height: 64px; max-width: 70%; width: auto; margin: 0 auto; } .aushang-veranstaltung { font-size: 14px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: #6e6e73; margin: 0 0 12px; } .aushang-redner { font-size: 15px; color: #6e6e73; margin: 0; } .aushang-frage { font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; margin: 0 0 6px; } .aushang-titel { font-size: 19px; font-weight: 600; color: #1d1d1f; margin: 0 0 4px; /* Eine Zeile: lange Titel werden abgekürzt statt umgebrochen. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aushang-qr { margin: 22px auto 18px; } .aushang-qr svg { width: 100%; max-width: 300px; height: auto; display: block; margin: 0 auto; } .aushang-anweisung { font-size: 20px; font-weight: 650; letter-spacing: -0.01em; margin: 0 0 6px; } .aushang-klein { font-size: 15px; color: #6e6e73; margin: 0 0 14px; } .aushang-adresse { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; color: #6e6e73; word-break: break-all; margin: 0; } /* Dezenter Hinweis auf das Werkzeug am Fuss des Aushangs - das Gegenstueck dazu, dass wiewars.ch nichts kostet. Bewusst zurueckhaltend: eine feine Linie, kleine Wortmarke, gedaempft. Sie steht in der hellen Fassung im Markup, ohne die Umschaltung fuer den Dunkelmodus, weil der Aushang immer weissen Grund hat. */ .aushang-marke { margin-top: 20px; padding-top: 14px; border-top: 1px solid #e8e8ed; } .aushang-marke img { display: block; height: 15px; width: auto; margin: 0 auto; opacity: 0.55; } /* ── Aushang im Vollbild ──────────────────────────────────── Fuer den Moment nach der Session: Der Aushang wird geklont und fuellt den Bildschirm, damit der Code aus dem Saal heraus lesbar ist - ohne dass es dafuer eine Praesentation braucht. Die Masse stehen in vmin, damit dasselbe Bild auf dem Beamer, dem Laptop und dem Fernseher passt. Der Grund bleibt weiss, auch im Dunkelmodus: helle Flaeche, dunkle Module, sonst liest kein Telefon den Code. */ .vollbild { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: #ffffff; padding: 4vmin; overflow: auto; } .vollbild[hidden] { display: none; } .vollbild .aushang { border: none; padding: 0; width: 100%; max-width: 150vmin; color: #1d1d1f; } .vollbild .aushang-kopf { margin-bottom: 2vmin; min-height: 0; } .vollbild .aushang-logo { max-height: 8vmin; } .vollbild .aushang-veranstaltung { font-size: 2.1vmin; margin-bottom: 1.6vmin; } .vollbild .aushang-frage { font-size: 5vmin; margin-bottom: 1vmin; } .vollbild .aushang-titel { font-size: 3vmin; margin-bottom: 0.6vmin; /* Im Vollbild ist Platz genug: lange Titel duerfen umbrechen, statt abgeschnitten zu werden. */ white-space: normal; overflow: visible; } .vollbild .aushang-redner { font-size: 2.4vmin; } .vollbild .aushang-qr { margin: 2.4vmin auto 2vmin; } .vollbild .aushang-qr svg { width: 37vmin; max-width: none; height: auto; } .vollbild .aushang-anweisung { font-size: 3.2vmin; margin-bottom: 0.8vmin; } .vollbild .aushang-klein { font-size: 2.2vmin; margin-bottom: 1vmin; } .vollbild .aushang-adresse { font-size: 2vmin; word-break: normal; } .vollbild .aushang-marke { margin-top: 1.8vmin; padding-top: 1.2vmin; } .vollbild .aushang-marke img { height: 2.2vmin; } .vollbild-schliessen { position: absolute; top: 2vmin; right: 2vmin; border: 1px solid var(--linie); border-radius: 980px; background: #ffffff; color: #6e6e73; font: inherit; font-size: 14px; padding: 8px 16px; cursor: pointer; } .vollbild-schliessen:hover { background: #f5f5f7; } /* Beim Drucken füllt der Aushang das Blatt, alles andere verschwindet. Die Farben stehen hier fest, sonst käme im Dunkelmodus weisse Schrift auf weissem Papier heraus. */ @media print { @page { size: A4 portrait; margin: 16mm; } html, body { height: 100%; background: #fff; } .kopf, .fusszeile, .nicht-drucken { display: none !important; } /* Der Aushang steht waagrecht mittig; senkrecht wird er nur so weit zentriert, wie es ohne Risiko geht. Die Mindesthöhe stand bis zum 08.09.2026 auf 258mm und damit auf der ganzen bedruckbaren Fläche - das ging so lange gut, wie der Browser mit denselben Rändern rechnete. Safari legt aber eigene Ränder und eine Kopf- und Fusszeile dazu: dann passt ein Block dieser Höhe nicht mehr aufs Blatt, oben blieb Luft und unten rutschten Adresse und Wortmarke auf eine zweite Seite. 200mm sind tiefer als jeder Aushang und darum unkritisch. */ .huelle, .huelle--breit { max-width: none; padding: 0; min-height: 200mm; display: flex; flex-direction: column; align-items: center; justify-content: center; } .huelle > div, .huelle > section { width: 100%; } .aushang { border: none; border-radius: 0; padding: 0; color: #000; page-break-inside: avoid; } /* Beim Drucken fällt die Spaltenaufteilung weg, sonst bliebe der Aushang in seiner 380 Pixel breiten Spalte am linken Rand stehen. */ .aushang-reihe { display: block; } .aushang-spalte { flex: none; width: 100%; } .aushang { width: 100%; max-width: 165mm; margin: 0 auto; } .aushang-kopf { margin-bottom: 8mm; } .aushang-logo { max-height: 20mm; } .aushang-veranstaltung { font-size: 11pt; margin-bottom: 4mm; } .aushang-frage { font-size: 28pt; line-height: 1.1; margin-bottom: 3mm; } .aushang-titel { font-size: 16pt; color: #1d1d1f; margin-bottom: 2mm; } .aushang-redner { font-size: 12pt; color: #444; } .aushang-qr { margin: 8mm auto 6mm; } .aushang-qr svg { max-width: 88mm; } .aushang-anweisung { font-size: 17pt; margin-bottom: 3mm; } .aushang-klein { font-size: 11pt; color: #444; margin-bottom: 3mm; } .aushang-adresse { font-size: 9pt; color: #666; } .aushang-marke { margin-top: 4mm; padding-top: 3mm; } .aushang-marke img { height: 5mm; opacity: 0.6; } } /* ── Live-Anzeige an der Wand (live.php) ────────────────── */ /* Gebaut fuer einen Beamer aus zehn Metern Entfernung: wenige, sehr grosse Elemente, alles auf einer Bildschirmhoehe, nichts zum Scrollen. Die Groessen haengen an vw/vh statt an px - so fuellt dieselbe Seite das Notebook und die Leinwand. */ .live-seite { margin: 0; } .live { display: flex; flex-direction: column; gap: clamp(14px, 2.2vh, 30px); box-sizing: border-box; min-height: 100vh; padding: clamp(18px, 3vh, 44px) clamp(18px, 3vw, 56px); background: var(--grund); } .live-kopf { text-align: center; } .live-veranstaltung { margin: 0 0 6px; font-size: clamp(13px, 1.5vw, 22px); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gedaempft); } .live-titel { margin: 0; font-size: clamp(24px, 3.4vw, 56px); line-height: 1.15; letter-spacing: -0.02em; } .live-frage { margin: 8px 0 0; font-size: clamp(15px, 1.8vw, 28px); color: var(--gedaempft); } .live-flaeche { display: flex; flex: 1 1 auto; align-items: center; gap: clamp(18px, 3vw, 52px); } .live-balken { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; gap: clamp(12px, 2.4vh, 30px); } .live-zeile { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 26px); } .live-gesicht { display: flex; flex: 0 0 auto; } .live-gesicht svg { width: clamp(34px, 4vw, 68px); height: auto; } /* Das Sterne-Set ist breiter als hoch; dort begrenzt die Hoehe, nicht die Breite. */ .live-gesicht svg.gesicht--sterne { width: auto; height: clamp(34px, 4vw, 68px); } .live-zeile--gut .live-gesicht { color: var(--gut); } .live-zeile--mittel .live-gesicht { color: var(--mittel); } .live-zeile--schlecht .live-gesicht { color: var(--schlecht); } .live-wort { flex: 0 0 auto; width: clamp(78px, 8vw, 150px); font-size: clamp(15px, 1.7vw, 27px); font-weight: 600; } /* Die Schiene bleibt sichtbar, auch wenn null Stimmen da sind: Sonst sieht die Wand nach Fehler aus statt nach «noch niemand hat getippt». */ .live-schiene { flex: 1 1 auto; height: clamp(18px, 3.4vh, 46px); border-radius: 980px; background: var(--flaeche-still); overflow: hidden; } .live-fuellung { display: block; height: 100%; width: 0; border-radius: 980px; transition: width 0.6s ease; } .live-fuellung[data-balken="gut"] { background: var(--gut); } .live-fuellung[data-balken="mittel"] { background: var(--mittel); } .live-fuellung[data-balken="schlecht"] { background: var(--schlecht); } .live-zahl { flex: 0 0 auto; width: clamp(52px, 5vw, 104px); text-align: right; font-size: clamp(26px, 3.6vw, 60px); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } /* Der QR-Code steht dauerhaft im Bild: Wer die Zahlen sieht, soll im selben Moment mitmachen koennen. Die Flaeche bleibt in jedem Modus hell, sonst liest ihn keine Kamera. */ .live-qr { flex: 0 0 auto; width: clamp(150px, 22vw, 320px); text-align: center; } .live-qrflaeche { padding: clamp(8px, 1vw, 16px); border-radius: 22px; background: #ffffff; } .live-qrflaeche svg { display: block; width: 100%; height: auto; } .live-anweisung { margin: 12px 0 0; font-size: clamp(12px, 1.15vw, 19px); font-weight: 600; } .live-adresse { margin: 4px 0 0; font-size: clamp(11px, 1vw, 16px); color: var(--gedaempft); word-break: break-all; } .live-fuss { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); padding-top: clamp(10px, 1.6vh, 22px); border-top: 1px solid var(--linie-zart); color: var(--gedaempft); font-size: clamp(13px, 1.3vw, 21px); } .live-summe strong { font-size: clamp(20px, 2.4vw, 40px); color: var(--text); font-variant-numeric: tabular-nums; margin-right: 6px; } /* Kommentare selbst bleiben in der Verwaltung - hier steht nur ihre Anzahl. */ .live-blase { display: inline-flex; align-items: center; gap: 8px; font-size: clamp(15px, 1.7vw, 27px); font-variant-numeric: tabular-nums; color: var(--text); } .live-blase svg { width: clamp(20px, 2vw, 32px); height: auto; } .live-blase--leer { color: var(--gedaempft); opacity: 0.55; } .live-status { margin-left: auto; } .live-status--zu { color: var(--schlecht); font-weight: 600; } .live-vollbild { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--linie); border-radius: 50%; background: transparent; color: var(--gedaempft); cursor: pointer; } .live-vollbild:hover { background: var(--flaeche-still); color: var(--text); } /* Die Wortmarke am rechten Rand der Fusszeile: sichtbar genug, um zu sagen womit die Anzeige gemacht ist, leise genug, um die Zahlen nicht zu stoeren. */ .live-marke { display: inline-flex; align-items: center; } .wortmarke--live { height: clamp(16px, 1.6vw, 28px); opacity: 0.5; } /* Fein in der Ecke: Die Anzeige ist neu und noch nicht in Ruhe erprobt. */ .live-beta { font-size: clamp(10px, 0.9vw, 14px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gedaempft); opacity: 0.55; } /* Kurzes Aufleuchten, wenn neue Stimmen angekommen sind. */ .live--neu .live-fuellung { transition: width 0.6s ease; } .live--neu .live-zahl { animation: livepuls 0.7s ease; } @keyframes livepuls { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .live-fuellung { transition: none; } .live--neu .live-zahl { animation: none; } } /* Hochkant, etwa auf einem Telefon als Mitleser: QR unter die Balken. */ @media (max-width: 700px) { .live-flaeche { flex-direction: column; align-items: stretch; } .live-qr { width: 100%; max-width: 260px; margin: 0 auto; } .live-wort { width: 74px; } }