/* ══ DER FRAGEBOGEN ══════════════════════════════════════════════════════ Gemeinsame Datei fuer /lp/website-erstellen-lassen/ (hell) und /ki-sichtbarkeit/ (dunkel). Am 06.09.2026 aus lp.css herausgeloest, als der zweite Standort dazukam. ALLE Farben laufen ueber --fb-*. Die Voreinstellung unten ist hell; eine dunkle Seite ueberschreibt nur diese Variablen und erbt Groessen, Abstaende und Verhalten unveraendert. Das ist der Grund fuer den Umbau: beim ersten Versuch auf der dunklen Seite standen die .check-Stile von den hellen Seiten drin und ergaben 1,16:1 Kontrast. So kann das nicht mehr passieren — wer die Datei einbindet, MUSS die Farben setzen oder bekommt die hellen. Reihenfolge im : styles.css, DANN fragebogen.css, DANN die Seiten-CSS. Nur so gewinnen die Seitenfarben. */ :root{ --fb-text:var(--tinte); --fb-leise:var(--leise); --fb-grund:var(--papier); --fb-rahmen:rgba(36,28,21,.24); --fb-rahmen-stark:rgba(36,28,21,.55); --fb-marke:rgba(36,28,21,.34); --fb-marke-stark:rgba(36,28,21,.6); --fb-flaeche:rgba(36,28,21,.035); --fb-flaeche-leicht:rgba(36,28,21,.02); --fb-gewaehlt:rgba(232,0,90,.06); --fb-linie:rgba(17,17,17,.16); --fb-akzent:var(--knall); --fb-akzent-text:var(--knall-text,var(--knall)); } /* ══ DER FRAGEBOGEN ══════════════════════════════════════════════════════ Ersetzt am 06.09.2026 das Formular auf dieser Seite. Grund: ein Formular VERLANGT, bevor es gibt — der erste Eindruck war "Name und E-Mail her". Der Fragebogen dreht das um. Jede Antwort bekommt eine Zeile zurueck, und die Kontaktdaten kommen erst im vierten Schritt, wenn schon drei Antworten investiert sind. Ohne JavaScript greift nichts davon: dann fehlt .quiz--an, alle vier Schritte stehen untereinander und das Formular geht als normaler POST. Deshalb haengt JEDE Regel, die etwas versteckt, an .quiz--an. Die Antwortzeilen selbst benutzen die vorhandenen .anliegen-Stile aus styles.css — die sind gemessen und kontrastgeprueft, es waere Unsinn, sie hier zu doppeln. */ .quiz__schritt{ border:0; padding:0; margin:0; min-width:0; /* fieldset bricht sonst aus dem Grid aus */ } .quiz__zaehler{ font-family:Mono,MonoErsatz,monospace; font-size:var(--t-mono); letter-spacing:.22em; text-transform:uppercase; color:var(--fb-leise); margin:0 0 1.6rem; } .quiz__zaehler b{color:var(--fb-text);font-weight:inherit} .quiz__hilfe{ font-family:Mono,MonoErsatz,monospace; font-size:var(--t-mono); color:var(--fb-leise); margin:-.4rem 0 1rem; } /* Die Spiegel-Zeile. Sie soll wie eine Antwort wirken, nicht wie eine Fussnote — deshalb der Strich in --knall und die Groesse des Fliesstexts. role="status" sorgt dafuer, dass Screenreader sie mitbekommen. */ .quiz__spiegel{ margin:1.4rem 0 0; padding:.1rem 0 .1rem 1rem; border-left:2px solid var(--fb-akzent); max-width:44ch; /* Dieselbe Groesse wie die Antwortkarten: es ist eine Erwiderung auf gleicher Augenhoehe, keine Ueberschrift. Mit var(--t-zwei) wuchs sie am Schirm ins Riesenhafte und erschlug die Auswahl darueber. */ font-size:clamp(1rem,3.4vw,1.12rem); line-height:1.5; color:var(--fb-text); text-wrap:pretty; } .quiz__weiter, .quiz__zurueck{ background:none; border:0; padding:0; font:inherit; cursor:pointer; border-radius:0; } .quiz__weiter{ display:block; /* Knoepfe zentrieren ihren Text von sich aus. In der zweispaltigen Ansicht sass "Weiter" dadurch mittig unter der Auswahl, als waere es eine Ueberschrift. Es gehoert nach links, wo der Lesefluss endet. */ text-align:left; width:fit-content; justify-self:start; margin:1.8rem 0 0; font-family:Archivo,ArchivoErsatz,system-ui,sans-serif; font-weight:700; /* NICHT var(--t-zwei). Das ist eine DISPLAY-Groesse: am 06.09.2026 im echten Fenster gemessen 48 px — so gross wie die Hauptueberschrift. "Weiter" ist ein Knopf, kein Titel. */ font-size:clamp(1.05rem,3.6vw,1.28rem); color:var(--fb-text); border-bottom:2px solid var(--fb-akzent); padding-bottom:.2rem; min-height:44px; } .quiz__weiter:focus-visible{outline:2px solid var(--fb-akzent);outline-offset:.3em} .quiz__zurueck{ display:block; margin:1.1rem 0 0; font-family:Mono,MonoErsatz,monospace; font-size:var(--t-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--fb-leise); min-height:44px; text-align:left; } .quiz__zurueck:hover{color:var(--fb-text)} .quiz__zurueck:focus-visible{outline:2px solid var(--fb-akzent);outline-offset:.3em} /* "freiwillig" neben der Beschriftung. Kleiner, aber lesbar — es nimmt dem Feld die Pflicht-Anmutung, und genau das ist der Zweck. */ .quiz__frei{ font-style:normal; text-transform:none; letter-spacing:0; color:var(--fb-leise); } .quiz__feld--gross{ resize:vertical; min-height:5.4rem; line-height:1.5; font-family:inherit; } .quiz__notiz{align-items:flex-start} /* Das Versprechen. Steht direkt ueber dem Knopf, weil es das Letzte ist, was gelesen wird. Kein Kasten, kein Haken — nur ein Strich und drei Saetze, die alle nachpruefbar sind. */ .quiz__zusage{ margin:2.6rem 0 1.8rem; padding-top:1.4rem; border-top:1px solid var(--fb-linie); max-width:46ch; } .quiz__zusage-dach{ font-family:Mono,MonoErsatz,monospace; font-size:var(--t-mono); letter-spacing:.22em; text-transform:uppercase; color:var(--fb-akzent-text); margin:0 0 .9rem; } .quiz__zusage-liste{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.6rem; } .quiz__zusage-liste li{ position:relative; padding-left:1.1rem; /* Auch hier war var(--t-zwei) falsch: drei Zusagen in 48 px erschlugen die ganze Seite. Fliesstextgroesse, wie die Antwortkarten. */ font-size:clamp(1rem,3.4vw,1.12rem); line-height:1.5; color:var(--fb-text); text-wrap:pretty; } .quiz__zusage-liste li::before{ content:""; position:absolute; left:0; top:.62em; width:.45rem; height:2px; background:var(--fb-akzent); } /* Nur mit Skript: Knopf, Versprechen und Kleingedrucktes erscheinen erst im vierten Schritt. Vorher waeren sie eine Aufforderung, die noch nicht dran ist. */ .quiz--an[data-aktiv]:not([data-aktiv="4"]) .quiz__zusage, .quiz--an[data-aktiv]:not([data-aktiv="4"]) .check__senden, .quiz--an[data-aktiv]:not([data-aktiv="4"]) .check__hinweis, .quiz--an[data-aktiv]:not([data-aktiv="4"]) .check__recht{ display:none; } /* hidden MUSS gewinnen. Das Attribut ist nur ein display:none aus dem Standardstylesheet des Browsers — jede eigene display-Regel schlaegt es. Die Schritte tragen .anliegen (setzt display), .quiz__weiter setzt display:block, das Adressfeld erbt von .check__zeile. Ohne diese Regel standen am 06.09.2026 alle vier Schritte gleichzeitig da, obwohl die hidden-EIGENSCHAFT im DOM korrekt true war. Der Fehler war nur im Screenshot zu sehen, nicht in der DOM-Pruefung. Zwei Selektoren statt !important: [hidden] hebt die Spezifitaet auf 0-2-0 und schlaegt damit alle Klassenregeln oben. */ .quiz__schritt[hidden], .quiz__weiter[hidden], .quiz__domain[hidden], .quiz__spiegel[hidden]{display:none} /* Die Schritte erben von .anliegen einen Flex-Container mit Umbruch. Alles, was ich hineinsetze, wird dadurch zum Flex-Kind und stellt sich neben die erste Antwortzeile — am 06.09.2026 stand "Mehreres moeglich." neben "Mehr Kunden". Diese Elemente brauchen eine eigene Zeile. */ .quiz__hilfe, .quiz__spiegel, .quiz__weiter, .quiz__zurueck, .quiz__domain{flex-basis:100%} /* ══ DIE ANTWORTEN SOLLEN AUSSEHEN WIE ETWAS ZUM ANTIPPEN ═══════════════ Sadan am 06.09.2026: "totes design, es soll so aussehen, dass man drauf klicken kann." Zu Recht. Geerbt kam aus styles.css der .anliegen-Stil: ein umbrechender Flex-Container, die Antworten als blosser Text nebeneinander, beim Waehlen ein Strich darunter. Fuer VIER kurze Woerter am Rand eines Formulars ist das genau richtig. Hier sind es SECHS laengere Antworten, und sie sind die Hauptbedienung der Seite — dann liest sich dasselbe als Absatz, nicht als Auswahl. Zwei Antworten standen sogar in einer Zeile nebeneinander ("Komplettes Redesign Ablaeufe abnehmen"). Deshalb hier, und NUR hier: gestapelte Flaechen mit Rahmen, Marke links, volle Breite. Der Rest der Website behaelt den leisen Stil — alle Regeln haengen an .quiz__schritt. */ .quiz__schritt{ flex-direction:column; align-items:stretch; gap:.55rem; } .quiz__schritt .anliegen__zeile{ display:block; width:100%; } .quiz__schritt.anliegen .anliegen__zeile label{ display:flex; align-items:center; gap:.85rem; width:100%; min-height:56px; /* Tippziel, deutlich ueber den 44 */ padding:.85rem 1rem; border:1px solid var(--fb-rahmen); border-bottom:1px solid var(--fb-rahmen); /* den Unterstrich-Stil aufheben */ background:transparent; font-weight:500; line-height:1.35; color:var(--fb-text); /* nicht --leise: das graue Wirken war der halbe Grund fuer "tot" */ /* KEIN text-wrap:pretty hier. Das balanciert Zeilen aus und brach "Mehr und bessere Auftraege" nach "und" um, obwohl Platz war. In einem Fliesstext ist das schoen, in einer schmalen Karte sieht es nach Zufall aus. Normales Umbrechen fuellt die Zeile. */ font-size:clamp(1rem,3.4vw,1.12rem); transition:border-color .18s var(--schwung),background-color .18s var(--schwung); } /* Die Marke links. Quadrat bei Mehrfachauswahl, Kreis bei Einfachauswahl — die Form sagt, ob man eins oder mehrere waehlen darf, bevor man es liest. */ .quiz__schritt.anliegen .anliegen__zeile label::before{ content:""; flex:0 0 auto; width:1.15rem; height:1.15rem; border:2px solid var(--fb-marke); background:transparent; transition:border-color .18s var(--schwung),background-color .18s var(--schwung); } .quiz__schritt .anliegen__zeile input[type="radio"] + label::before{border-radius:50%} .quiz__schritt.anliegen .anliegen__zeile label:hover{ border-color:var(--fb-rahmen-stark); background:var(--fb-flaeche); } .quiz__schritt.anliegen .anliegen__zeile label:hover::before{border-color:var(--fb-marke-stark)} .quiz__schritt.anliegen input:checked + label{ border-color:var(--fb-akzent); background:var(--fb-gewaehlt); color:var(--fb-text); font-weight:700; } .quiz__schritt.anliegen input:checked + label::before{ border-color:var(--fb-akzent); background:var(--fb-akzent); box-shadow:inset 0 0 0 3px var(--fb-grund); /* Ring statt Vollflaeche: gefuellt, aber nicht plump */ } .quiz__schritt.anliegen input:focus-visible + label{ outline:2px solid var(--fb-akzent); outline-offset:2px; } /* KEINE Zweispaltigkeit fuer Schritt 1. Zwei Gruende, beide am 06.09.2026 im echten Browser gesehen: 1. Sie richtete sich nach der FENSTERbreite, der Fragebogen sitzt aber in der schmalen rechten Spalte des Kopfbereichs (~350 px). Bei 1516 px Fenster quetschten sich also sechs Karten in 350 px. 2. Schlimmer: die Regel setzte display:grid auf .quiz__schritt[data-schritt="1"] — gleiche Spezifitaet wie .quiz__schritt[hidden]{display:none}, aber spaeter in der Datei. Damit liess sich Schritt 1 ab 700 px NICHT MEHR AUSBLENDEN. Der Zaehler sagte "Schritt 2 von 4", waehrend Schritt 1 weiter dastand. Exakt derselbe Fehler wie beim ersten Mal: eine display-Regel schlaegt hidden. Deshalb steht sie hier nicht wieder. */ } /* ══ DAS ADRESSFELD ══════════════════════════════════════════════════════ Am 06.09.2026 im Browser gesehen: es sah aus wie eine VIERTE Antwortmoeglichkeit — Kaestchen davor, "DIE ADRESSE" in Grossbuchstaben, und das Eingabefeld selbst unsichtbar. Grund: die Kartenregel hiess `.quiz__schritt.anliegen label` und traf damit JEDES label im Schritt, auch die Beschriftung dieses Textfelds. Die Regel ist jetzt auf .anliegen__zeile begrenzt; hier bekommt das Feld sein eigenes Aussehen — erkennbar als Eingabe, nicht als Auswahl. */ .quiz__schritt .quiz__domain{ display:block; margin:.35rem 0 0; padding:.9rem 1rem 1rem; border:1px dashed var(--fb-rahmen); /* gestrichelt: sagt "hier fehlt noch etwas", ohne wie eine waehlbare Karte auszusehen */ background:var(--fb-flaeche-leicht); } .quiz__schritt .quiz__domain .check__label{ display:block; position:static; width:auto;height:auto; clip:auto;clip-path:none; margin:0 0 .3rem; font-family:Mono,MonoErsatz,monospace; font-size:var(--t-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--fb-leise); } .quiz__schritt .quiz__domain .check__feld{ /* MUSS die Versteck-Regel aufheben. In styles.css steht .anliegen input{position:absolute;width:1px;height:1px;opacity:0} — damit werden die Auswahlpunkte unsichtbar, bleiben aber bedienbar. Dieses Textfeld liegt im SELBEN Fieldset und erbte die Regel: 1x1 px, durchsichtig, aus dem Fluss genommen. Man sah nur die Beschriftung. Und weil das Skript es beim Erscheinen fokussierte, sprang der Browser zu diesem unsichtbaren Punkt — daher der seitliche Ueberlauf von 1284 px, gemessen am 06.09.2026 im echten Fenster. */ position:static; opacity:1; height:auto; display:block; width:100%; max-width:none; margin:0; padding:.3rem 0; min-height:44px; border:0; border-bottom:2px solid var(--fb-marke); background:none; border-radius:0; font-family:Schibsted,SchibstedErsatz,sans-serif; font-size:clamp(1rem,3.4vw,1.12rem); color:var(--fb-text); } .quiz__schritt .quiz__domain .check__feld::placeholder{color:var(--fb-marke)} .quiz__schritt .quiz__domain .check__feld:focus{ outline:none; border-bottom-color:var(--fb-akzent); }