/* Feedback-Maschine — öffentliches Formular. Ableger der Panel-Gestaltung. Instanzfarben hängen an einer Klasse auf : .ci-edito heute, .ci-mz später — gleicher Code, anderes Kleid. Soho Pro fehlt bewusst — als Webfont wäre das eine andere Lizenz. */ :root { --bg: #e2ebea; --akzent: #d8232a; --akzent-dunkel: #a01a20; --akzent-hell: #fbe7e8; --ink: #2a2e35; --dim: #5a6470; --panel: #ffffff; --border: #cbd5d3; --rc: 'Roboto Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --serif: Georgia, 'Times New Roman', serif; } /* ── mz-Instanz ───────────────────────────────────────────────────────────── Schwarz, Weiss, Grau — und das Gold des «M» aus dem Favicon als Schmuckfarbe. Aufgabenteilung: Schwarz ist, was das System tut (Knöpfe), Gold ist, was der Gast tut (gewählte Stufe, Fortschritt). Ausführlich in dev_feedback/CI-MZ.md. */ .ci-mz { --akzent: #000000; /* Knöpfe, Rahmen — die strenge Seite */ --akzent-dunkel: #2a2724; --akzent-hell: #f6efdb; --bg: #f4f3f1; /* Papier, bewusst kein Reinweiss */ --ink: #000000; --dim: #6b6864; --border: #d8d6d2; --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; /* Gold aus dem Favicon. Zwei Werte, weil einer nicht reicht: #cc9900 hat auf Weiss nur 2,6:1 Kontrast — schön als Fläche, unlesbar als Text. Für Text deshalb die dunklere Fassung mit 5,3:1. */ --gold: #cc9900; --gold-text: #8a6600; } /* Was der Gast tut, ist gold — und trägt schwarze Schrift (8:1 auf Gold; weiss wäre auf diesem Ton nicht lesbar). */ .ci-mz .stufe input:checked + .kreis { background: var(--gold); border-color: var(--gold); color: #000; } .ci-mz .stufe:hover .kreis { border-color: var(--gold-text); color: var(--gold-text); } .ci-mz .fortschritt-balken { background: var(--gold); } .ci-mz .nr, .ci-mz .stern { color: var(--gold-text); } .ci-mz .ausblick a { color: var(--gold-text); } .ci-mz textarea:focus, .ci-mz input:focus { border-color: var(--gold-text); } /* Rechte Winkel statt runder Ecken — der sichtbarste Unterschied zu Edito. */ .ci-mz .kasten, .ci-mz .frage, .ci-mz .webinar, .ci-mz .kreis, .ci-mz textarea, .ci-mz input[type="text"], .ci-mz input[type="email"], .ci-mz input[type="url"], .ci-mz .senden, .ci-mz .knopf-nebenbei, .ci-mz .sprachen a { border-radius: 0; } /* Der Schriftzug ist ein SVG mit currentColor: weiss auf schwarzem Kopf. */ .ci-mz .kopf { background: #000; border-bottom: 0; padding: 4px 0; } .ci-mz .logo { display: block; width: min(330px, 78vw); color: #fff; } .ci-mz .logo svg { width: 100%; height: auto; display: block; } .ci-mz .kopf-innen { padding: 20px; align-items: center; } .ci-mz .sprachen a { border-color: #4a4744; background: #000; color: #b9b6b2; } .ci-mz .sprachen a.an { background: #fff; color: #000; border-color: #fff; } /* Die Veranstaltungskarte invertiert: schwarzes Feld, weisse Schrift — sie nimmt den Kopf auf und hebt die Veranstaltung von den Formularkarten ab. Das Porträt hat selbst einen schwarzen Grund und verschwände sonst im Feld; der feine weisse Ring gibt ihm eine Kante. Als box-shadow, nicht als border: so verschiebt er nichts und bleibt exakt 1 px. */ .ci-mz .webinar { background: #000; border-color: #000; color: #fff; } .ci-mz .webinar .titel-inhalt { color: #fff; } .ci-mz .webinar .byline { color: #e8e6e3; } .ci-mz .webinar .meta { color: #b9b6b2; } .ci-mz .webinar .portraet { box-shadow: 0 0 0 1px #fff; } /* RAHMEN und INHALT: Der Titel der Veranstaltung ist publizistischer Text und steht deshalb in der Serif — alles Funktionale bleibt Roboto Condensed. Bei Edito ist ohnehin alles Serif, was h1/h2 ist; dort ändert das nichts. */ .ci-mz h1, .ci-mz h2 { font-family: var(--rc); font-weight: 700; letter-spacing: .005em; } .ci-mz h2 { font-size: 19px; } .ci-mz .titel-inhalt { font-family: var(--serif); font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -.01em; } @media (max-width: 560px) { .ci-mz .titel-inhalt { font-size: 26px; } } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--ink); font-family: var(--rc); font-size: 17px; line-height: 1.55; padding-bottom: 60px; } /* ── Fortschritt ── */ .fortschritt { position: sticky; top: 0; z-index: 10; height: 4px; background: #cfd9d8; } .fortschritt-balken { height: 100%; width: 0; background: var(--akzent); transition: width .25s ease; } /* ── Kopf ── */ .kopf { background: var(--panel); border-bottom: 2px solid var(--ink); } .kopf-innen { max-width: 680px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: baseline; gap: 16px; } .logo { display: flex; align-items: baseline; gap: 8px; max-width: 100%; } .logo-haupt { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--akzent); } .logo-neben { font-size: 14px; font-weight: 700; color: var(--akzent); text-transform: uppercase; letter-spacing: .07em; } .sprachen { margin-left: auto; display: flex; gap: 4px; } .sprachen a { font-size: 13px; padding: 3px 10px; border-radius: 3px; text-decoration: none; color: var(--dim); border: 1px solid var(--border); background: #fff; } .sprachen a.an { background: var(--akzent); color: #fff; border-color: var(--akzent); font-weight: 700; } /* ── Bogen ── */ .bogen { max-width: 680px; margin: 0 auto; padding: 26px 20px 0; } h1 { font-family: var(--serif); font-size: 30px; line-height: 1.15; margin-bottom: 14px; } h2 { font-family: var(--serif); font-size: 22px; line-height: 1.2; margin-bottom: 10px; } .intro { margin-bottom: 12px; } /* ── Webinar-Kopf: Köpfchen, Titel, Untertitel ── */ .webinar { display: flex; gap: 18px; align-items: center; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 18px 20px; margin-bottom: 16px; } .portraet { width: 84px; height: 84px; border-radius: 50%; flex: none; object-fit: cover; } .webinar h1 { margin-bottom: 4px; font-size: 26px; } .byline { color: var(--ink); } .meta { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); margin-top: 4px; } /* ── Kästen ── */ .kasten { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 18px 20px; margin-top: 14px; } .kasten p + p, .kasten p + form { margin-top: 10px; } /* ── Frage ── */ .frage { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 18px 20px; margin-top: 14px; } .frage.leer { border-color: var(--akzent); background: var(--akzent-hell); } /* Browser setzen auf den Fieldset-Rahmen statt in den Kasten — float holt sie in den Fluss zurück, ohne die Verbindung für Screenreader zu kappen. */ .frage legend { font-weight: 700; font-size: 18px; line-height: 1.3; float: left; width: 100%; padding: 0; margin-bottom: 4px; } .frage > :not(legend) { clear: both; } .frage::after { content: ''; display: table; clear: both; } .nr { display: inline-block; min-width: 1.6em; color: var(--akzent); font-weight: 700; } .stern { color: var(--akzent); } .hilfe { font-size: 14px; color: var(--dim); margin-bottom: 8px; } .fehler { color: var(--akzent); font-size: 15px; font-weight: 700; margin: 8px 0; } /* ── Skala 1–6 ── */ .skala { display: flex; gap: 6px; margin: 14px 0 6px; } .stufe { flex: 1; cursor: pointer; } .stufe input { position: absolute; opacity: 0; pointer-events: none; } .kreis { display: flex; align-items: center; justify-content: center; height: 52px; border: 1px solid var(--border); border-radius: 6px; background: #fff; font-size: 19px; font-weight: 700; color: var(--dim); transition: background .12s, color .12s, border-color .12s; } .stufe:hover .kreis { border-color: var(--akzent); color: var(--akzent); } .stufe input:checked + .kreis { background: var(--akzent); border-color: var(--akzent); color: #fff; } .stufe input:focus-visible + .kreis { outline: 2px solid var(--ink); outline-offset: 2px; } .anker { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--dim); } /* ── Auswahl ── */ .auswahl { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; } .option { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: 5px; cursor: pointer; } .option:hover { background: #f2f6f5; } .option input[type="checkbox"] { margin-top: .35em; width: 18px; height: 18px; accent-color: var(--akzent); flex: none; } .option-sonstiges { align-items: center; gap: 10px; cursor: text; } .sonst-beschriftung { flex: none; } .option-sonstiges input[type="text"] { margin-top: 0; } /* ── Textfelder ── */ textarea, input[type="text"], input[type="email"], input[type="url"] { width: 100%; font-family: var(--rc); font-size: 16.5px; line-height: 1.5; padding: 10px 12px; border: 1px solid var(--border); border-radius: 5px; background: #fff; color: var(--ink); margin-top: 8px; } textarea { resize: vertical; min-height: 110px; } textarea:focus, input:focus { border-color: var(--akzent); outline: none; } input[type="file"] { margin-top: 8px; font-family: var(--rc); font-size: 15px; } /* ── Formularfelder mit Beschriftung ── */ .feld, .paare label { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); margin-top: 12px; } .paare { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; } .paare input { margin-top: 4px; } .feld textarea, .feld input { margin-top: 4px; } /* Muss die Versalien der Feldbeschriftungen überstimmen — eine Einwilligung liest sich als Satz, dem man zustimmt, nicht als Formularfeld. */ .haken { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 15.5px; text-transform: none; letter-spacing: 0; color: var(--ink); line-height: 1.4; cursor: pointer; } .haken input { width: 18px; height: 18px; margin-top: .2em; accent-color: var(--akzent); flex: none; } /* ── Knöpfe ── */ .senden { width: 100%; margin-top: 22px; padding: 15px; background: var(--akzent); color: #fff; border: 0; border-radius: 6px; font-family: var(--rc); font-size: 17px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; } .senden:hover { background: var(--akzent-dunkel); } .knopf-nebenbei { display: inline-block; margin-top: 6px; padding: 11px 18px; background: #fff; color: var(--akzent); border: 2px solid var(--akzent); border-radius: 6px; font-weight: 700; text-decoration: none; letter-spacing: .04em; text-transform: uppercase; font-size: 15px; } .knopf-nebenbei:hover { background: var(--akzent-hell); } /* ── Codewort-Abfrage ── */ .codeform { margin-top: 10px; } .codeform input[type="text"] { font-size: 22px; letter-spacing: .04em; text-align: center; } .ausblick { margin-top: 18px; } .ausblick a { color: var(--akzent); font-weight: 700; } .datenschutz { font-size: 13px; color: var(--dim); line-height: 1.5; margin-top: 18px; } .datenschutz a { color: var(--dim); } /* Für Menschen unsichtbar, für Maschinen ein Feld wie jedes andere. Nicht display:none — manche Bots füllen nur sichtbare Felder. */ .honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } @media (max-width: 560px) { body { font-size: 16.5px; } h1 { font-size: 25px; } .bogen { padding: 20px 14px 0; } .webinar { padding: 15px 14px; gap: 14px; } .webinar h1 { font-size: 21px; } .portraet { width: 64px; height: 64px; } .frage, .kasten { padding: 15px 14px; border-radius: 6px; } .frage legend { font-size: 17px; } .paare { grid-template-columns: 1fr; } .skala { gap: 4px; } .kreis { height: 46px; font-size: 17px; } .anker { font-size: 12px; } }