/* ============================================================ PROPERUS Assistent — Stylesheet ============================================================ ERZEUGT, NICHT VON HAND GESCHRIEBEN. Quelle: ACTANOL/assistent-vollversion/widget/chatbot.css Erzeugt: tools/widget-css-portieren.mjs Aenderungen gehoeren in das Skript oder in die Vorlage, nie hierher — der naechste Lauf ueberschreibt diese Datei. Nico hat entschieden: Aufbau, Verhalten und Animationen folgen dem ACTANOL-Assistenten (Vollversion) 1:1, die Farben sind Properus, und die KONTRASTVERHAELTNISSE der Vorlage werden unveraendert uebernommen. DAS HEISST: Die Vorlage erreicht WCAG 2.2 AA an 65 gemessenen Stellen nicht. Diese Fassung uebernimmt dieselben Verhaeltnisse in anderen Farbtoenen. Sie ist damit an entsprechenden Stellen NICHT konform. Die Stellen werden einzeln gemessen und in einer datierten Ausnahmeliste gefuehrt — nicht relativiert, nicht umformuliert. Die Kommentare der Vorlage sind absichtlich mitgekommen. Sie halten drei gescheiterte iOS-Anlaeufe und zwei Kontrast-Ruecknahmen fest. Wer sie wegwirft, baut die Fehler nach. ============================================================ */ @keyframes paDot{0%,60%,100%{transform:translateY(0);opacity:.3}30%{transform:translateY(-4px);opacity:.9}} @keyframes paRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes paRing{0%{transform:scale(1);opacity:.5}80%{transform:scale(2.1);opacity:0}100%{opacity:0}} @keyframes paPop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}} /* `@keyframes paWin` ist entfallen. Eine Keyframe-Animation laeuft beim Einblenden unabhaengig vom Zustand ab und schreibt dabei `transform` — auf dem Handy fiel der Autofokus mitten in diese 0,42 s. Das Oeffnen laeuft jetzt als `transition` ueber `.pa-win--offen` (siehe .pa-win). */ @keyframes paAurora{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-5%,8%,0) scale(1.18)}100%{transform:translate3d(4%,-6%,0) scale(1.06)}} @keyframes paBlink{0%,49%{opacity:1}50%,100%{opacity:0}} @keyframes paFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} /* Bildlaufleiste: bis 09.08.2026 #A39C94 (3,47:1). Kein Erfolgskriterium beruehrt — eine Bildlaufleiste ist kein Bedienelement im Sinne von SC 1.4.11 —, aber gleiche Herkunft wie die uebrigen Rueckstellungen. */ .pasc{scrollbar-width:thin;scrollbar-color:#CFC9C2 transparent;} .pasc::-webkit-scrollbar{width:7px;height:7px} .pasc::-webkit-scrollbar-thumb{background:#CFC9C2;border-radius:20px} .pasc::-webkit-scrollbar-track{background:transparent} /* ---------- Root ---------- */ .pa-root{position:fixed;z-index:2147483000;font-family:"PROPERUS Sans",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;} .pa-root *{box-sizing:border-box;margin:0;padding:0;} .pa-root button{font-family:inherit;} .pa-root textarea,.pa-root input{font-family:inherit;} /* ---------- Teaser ---------- */ /* Breite folgt dem laengsten der beiden Saetze (25.08.2026, vorher fest 224px). Damit steht jeder Satz auf einer Zeile, in beiden Sprachen und unabhaengig davon, welche Schrift die Wirtsseite bereitstellt. `width:auto` waere hier FALSCH: `.pa-root` hat keine eigene Breite und enthaelt nur absolut positionierte Kinder, ist also 0 px breit — `auto` liefe auf Shrink-to-fit gegen 0 hinaus und braeche jedes Wort um. `max-content` fragt den umgebenden Kasten nicht. Der Deckel haelt den Kasten auf schmalen Geraeten im Bild: er sitzt 82 px vom rechten Rand des Wurzelelements, das selbst 16 px Abstand haelt. 106 px lassen 8 px Luft nach links; darunter bricht der Text um wie frueher — Rueckfall, nicht Normalfall. */ .pa-teaser{position:absolute;bottom:6px;right:82px;width:max-content;max-width:min(300px,calc(100vw - 106px));background:#fff;border:1px solid #E7E4E0;box-shadow:0 14px 34px -14px rgba(20,16,12,.4);border-radius:16px 16px 4px 16px;padding:14px 16px;animation:paPop .4s cubic-bezier(.2,.9,.3,1) both;} /* Groesse bleibt 24x24 (SC 2.5.8), die Demo hat 22x22 an -8px. Zurueckgesetzt ist nur die Farbe: bis 09.08.2026 #6E6A66, Hover-Rand #A39C94. */ .pa-teaser-close{position:absolute;top:-9px;left:-9px;width:24px;height:24px;border-radius:50%;border:1px solid #DCD8D3;background:#fff;color:#8A8580;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 2px 6px -2px rgba(20,16,12,.25);} .pa-teaser-close:hover{color:#2A2724;border-color:#CFC9C2;} .pa-teaser-top{display:flex;align-items:center;gap:7px;margin-bottom:5px;} .pa-teaser-dot{width:7px;height:7px;border-radius:50%;background:#B87E5F;box-shadow:0 0 0 3px rgba(184,126,95,.22);flex:0 0 auto;} /* bis 09.08.2026: #8A5C42 (4,73:1). */ .pa-teaser-label{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#B87E5F;} .pa-teaser-text{font-size:13.5px;line-height:1.4;color:#2A2724;} /* ---------- Launcher ---------- */ .pa-launcher{position:absolute;bottom:0;right:0;border:none;border-radius:20px;cursor:pointer;background:#1E1E1E;padding:0;overflow:visible;display:flex;align-items:center;justify-content:flex-end;transition:width .35s cubic-bezier(.3,.9,.3,1);box-shadow:0 20px 44px -14px rgba(20,16,12,.55),0 4px 12px -4px rgba(0,0,0,.25);} .pa-launcher-label{flex:1 1 auto;white-space:nowrap;overflow:hidden;color:#fff;font-size:14px;font-weight:700;letter-spacing:.02em;padding-left:20px;text-align:left;animation:paRise .28s ease both;} .pa-launcher-iconwrap{position:relative;flex:0 0 auto;} .pa-launcher-ring{position:absolute;inset:0;border-radius:20px;border:2px solid rgba(184,126,95,.85);animation:paRing 2.8s ease-out infinite;} .pa-launcher-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:20px;} .pa-badge{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:12px;background:#B03A32;border:2px solid #fff;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;} /* ---------- Fenster ---------- Geoeffnet wird ueber die Klasse `.pa-win--offen`, nicht ueber eine Keyframe-Animation. Grund steht oben bei den Keyframes. */ .pa-win{position:fixed;transform-origin:bottom right;display:flex;flex-direction:column;background:#F7F6F4;overflow:hidden;box-shadow:0 44px 96px -22px rgba(18,14,10,.55),0 14px 32px -14px rgba(18,14,10,.32),0 2px 8px rgba(0,0,0,.12);border:1px solid rgba(255,255,255,.6);color:#2A2724;opacity:0;transform:translateY(20px) scale(.96);transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1);} .pa-win--offen{opacity:1;transform:none;} /* ---------- Header ---------- */ .pa-header{position:relative;flex:0 0 auto;padding:16px 16px 15px;background:#ffffff;color:#2A2724;border-bottom:1px solid #E7E4E0;overflow:hidden;} .pa-aurora{position:absolute;inset:-40%;background:radial-gradient(60% 70% at 80% 20%,rgba(184,126,95,.14),transparent 60%),radial-gradient(45% 60% at 15% 90%,rgba(184,126,95,.07),transparent 55%);animation:paAurora 9s ease-in-out infinite alternate;} .pa-header-row{position:relative;display:flex;align-items:center;gap:12px;} /* Seit die Unterzeile zweizeilig ist, ist der Textblock hoeher als der Avatar und bestimmt die Zeilenhoehe. Mit `align-items:center` waeren Avatar und Kopfknoepfe dadurch um 5 bzw. 7 px nach unten gerutscht. `align-self:flex-start` haelt sie an ihrer angestammten Hoehe. In allen Ansichten ohne Chat ist die Zeile genauso hoch wie vorher — dort aendert die Regel nichts. */ .pa-avatar,.pa-hbtns{align-self:flex-start;} /* Die zwei Pixel, die die alte Zentrierung des 34-px-Textblocks in der 38-px-Zeile ergab. Nur in der Chat-Ansicht am Schreibtisch gesetzt — nur dort ist die Zeile ueberhaupt zweizeilig. So stehen Titel, Punkt und Hinweistext auf denselben Pixeln wie vorher. */ .pa-header-row--zweizeilig .pa-htext, .pa-header-row--zweizeilig .pa-hbtns{margin-top:2px;} .pa-hbtn{flex:0 0 auto;width:34px;height:34px;border:none;border-radius:10px;background:#F1EFEC;color:#4C4844;cursor:pointer;display:flex;align-items:center;justify-content:center;} .pa-hbtn:hover{background:#F5EBE4;color:#A06A4C;} .pa-avatar{flex:0 0 auto;width:38px;height:38px;border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(42,39,36,.08),0 4px 12px -6px rgba(20,16,12,.25);animation:paFloat 4s ease-in-out infinite;} .pa-avatar img{width:100%;height:100%;object-fit:cover;display:block;} .pa-htext{flex:1 1 auto;min-width:0;} .pa-htitle{font-size:15px;font-weight:700;letter-spacing:.01em;line-height:1.1;} /* bis 09.08.2026: #6E6A66. Gilt fuer alle mit „bis 09.08." markierten Unterzeilen. */ /* Grundzustand unveraendert: eine Zeile, Punkt mittig dazu. `position:relative` legt die Zeile ueber die Aurora, wenn sie auf dem Handy direkt im Kopf haengt. */ .pa-hsub-row{position:relative;display:flex;align-items:center;gap:7px;margin-top:3px;font-size:12px;color:#8A8580;} .pa-online{position:relative;width:7px;height:7px;flex:0 0 auto;} .pa-online i{position:absolute;inset:0;border-radius:50%;background:#B87E5F;} .pa-online b{position:absolute;inset:0;border-radius:50%;border:1px solid #B87E5F;animation:paRing 2.2s ease-out infinite;} /* Grundzustand wie bisher: eine Zeile, bei Platzmangel mit „…" gekuerzt. Das gilt fuer die kurzen Untertitel der Nebenansichten und fuer das verkleinerte Fenster — dort bleibt die Kopfzeile dadurch exakt so hoch wie vor dem 26.08.2026. */ .pa-hsub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* ---- Zustand „zweizeilige KI-Kennzeichnung" ---- Greift an genau zwei Stellen: im grossen Fenster am Schreibtisch (Klasse vom Skript) und auf dem Handy, wo die Zeile als eigener Streifen direkt im Kopf haengt. Alles hier sind Zusaetze zum Grundzustand darueber — die Reihenfolge ist tragend. */ .pa-header-row--zweizeilig .pa-hsub-row, .pa-header > .pa-hsub-row{align-items:flex-start;line-height:1.35;} /* haelt den gruenen Punkt an der ersten Zeile, statt ihn mittig zwischen beide zu setzen */ .pa-header-row--zweizeilig .pa-online, .pa-header > .pa-hsub-row .pa-online{margin-top:3px;} /* `pre-line` laesst das `\n` aus `STR.*.status` wirken */ .pa-header-row--zweizeilig .pa-hsub, .pa-header > .pa-hsub-row .pa-hsub{overflow:visible;text-overflow:clip;white-space:pre-line;} .pa-hbtns{flex:0 0 auto;display:flex;align-items:center;gap:6px;} /* ---------- Views (gemeinsam) ---------- `min-height:0`, weil das Fenster auf dem Handy `height:auto` hat: Ohne die Zeile schrumpft ein Flex-Kind nicht unter seinen Inhalt und schiebt die Eingabezeile unten aus dem Fenster. `overscroll-behavior:contain` haelt die Wirtsseite ruhig, wenn man am Ende der Liste weiterwischt. */ .pa-view{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;} .pa-view--picker{padding:22px 20px 16px;} .pa-view--settings{padding:20px 18px;} .pa-view--contact{padding:22px 20px;} .pa-view--privacy{padding:22px 20px;} .pa-view-title{margin:0 0 6px;font-size:21px;font-weight:700;letter-spacing:-.01em;color:#2A2724;} .pa-view-sub{margin:0 0 18px;font-size:13.5px;line-height:1.45;color:#78736E;} /* ---------- Picker ---------- */ .pa-picker-list{display:flex;flex-direction:column;gap:8px;} .pa-pcard{display:flex;align-items:center;gap:14px;text-align:left;width:100%;background:#fff;border:1px solid #E7E4E0;border-radius:14px;padding:12px 13px;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;} .pa-pcard:hover{border-color:#B87E5F;transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(20,16,12,.28);} .pa-pcard:active{transform:scale(.985);} .pa-pcard-icon{flex:0 0 auto;width:40px;height:40px;border-radius:11px;background:#F5EBE4;display:flex;align-items:center;justify-content:center;} .pa-pcard-body{flex:1 1 auto;min-width:0;} .pa-pcard-label{display:block;font-size:14.5px;font-weight:700;color:#2A2724;line-height:1.2;} .pa-pcard-tag{display:block;margin-top:3px;font-size:12px;color:#8A8580;line-height:1.35;} /* bis 09.08.: #6E6A66 */ .pa-skip{margin-top:16px;width:100%;background:transparent;border:none;color:#78736E;font-size:13px;font-weight:600;cursor:pointer;padding:8px;text-decoration:underline;text-underline-offset:3px;} /* ---------- Chat: Banner + Kontextzeile ---------- */ .pa-offline-banner{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px 16px;background:#F1EFEC;border-bottom:1px solid #E7E4E0;} .pa-offline-banner span{font-size:11.5px;color:#4C4844;line-height:1.35;} .pa-ctxbar{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:9px 16px;background:#F5EBE4;border-bottom:1px solid #E7E4E0;} .pa-ctx-text{flex:1 1 auto;font-size:12px;color:#4C4844;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .pa-ctx-text .pa-ctx-pre{color:#8A8580;} /* bis 09.08.: #6E6A66 */ .pa-ctx-text b{color:#2A2724;font-weight:700;} /* bis 09.08.2026: #7A4F38 (4,98:1 auf dem #F5EBE4 dieser Zeile). Der Knopf sitzt nicht auf dem helleren Fenstergrund, deshalb war er dort noch einmal eigens abgedunkelt worden. */ .pa-ctx-change{flex:0 0 auto;background:transparent;border:none;color:#B87E5F;font-size:12px;font-weight:700;cursor:pointer;padding:2px 4px;} /* ---------- Chat: die Spalte ---------- Stand bis zum 12.09.2026 als `style.cssText` in chatbot.js und war damit fuer jede Regel hier unerreichbar. Ein Inline-Stil schlaegt jedes Stylesheet — das ist der Grund, warum die Spalte bei knapper Hoehe nichts hergab und Inhalt einfach abgeschnitten wurde. `overflow-y:auto` statt `overflow:hidden`: Wird das Fenster niedrig, gibt `.pa-inputwrap` seine Hoehe NICHT her (`flex:0 0 auto`) — die untersten Zeilen, also zweite Fusszeile und KI-Fussnote, wurden schlicht abgeschnitten. Zwei Faelle treffen das: * Geraet im Querformat. Ein iPhone quer meldet ~844 px Breite und liegt damit ueber der 768-px-Schwelle: Es gilt der Schreibtisch-Zweig, `computeLayout` schreibt 540 px Hoehe, und `.pa-win{max-height:calc(100dvh - 40px)}` deckelt auf rund 350 px. Eine fuer 540 px gebaute Spalte bekommt 350. * Zoom 400 % (320x256 px, die Rechnung von SC 1.4.10). Senkrechtes Scrollen ist nach SC 1.4.10 ausdruecklich erlaubt, zweidimensionales nicht — deshalb `overflow-x:hidden` daneben. `overscroll-behavior:contain` steht hier zusaetzlich zum JOAL-Vorbild: Der neue Scroller darf die Wischgeste nicht an die Wirtsseite durchketten. Dasselbe tragen `.pa-view` und `.pa-log` bereits. In den ueblichen Groessen entsteht KEINE zweite Bildlaufleiste: `.pa-log` traegt `flex:1 1 auto` und nimmt den Rest der Spalte genau auf. Die Leiste erscheint nur in dem Fall, in dem heute Inhalt verschwindet. */ .pa-viewchat{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;} /* ---------- Chat: Log + Nachrichten ---------- */ /* `min-height` ist der zweite Teil davon und ohne den ersten wirkungslos: Ohne ihn schrumpft der Gespraechsbereich im Querformat und bei 400 % Zoom gegen 0. Die Spalte scrollte dann zwar, die Nachrichten laegen aber in einem 0 px hohen Kasten mit eigenem `overflow-y` und waeren weiterhin unerreichbar — der Fehler waere halb behoben und saehe ganz behoben aus. 7rem lassen mindestens eine Blase stehen. Es bleibt bei `overflow-y:auto` HIER, damit `logEl.scrollTop = logEl.scrollHeight` (chatbot.js) weiter den neuesten Beitrag anfaehrt. Gaebe der Log sein Scrollen an die Spalte ab, waere das ein stiller Funktionsverlust an genau der Stelle, die der Nutzer am haeufigsten braucht. */ .pa-log{flex:1 1 auto;min-height:7rem;overflow-y:auto;overscroll-behavior:contain;padding:18px 16px 8px;display:flex;flex-direction:column;gap:14px;} .pa-brow{display:flex;align-items:flex-end;gap:9px;max-width:88%;align-self:flex-start;animation:paPop .32s cubic-bezier(.2,.9,.3,1) both;} .pa-bavatar{flex:0 0 auto;width:28px;height:28px;border-radius:8px;overflow:hidden;margin-bottom:2px;} .pa-bavatar img{width:100%;height:100%;object-fit:cover;display:block;} .pa-bcol{min-width:0;} .pa-bubble-bot{background:#fff;border:1px solid #E7E4E0;border-radius:16px 16px 16px 5px;padding:11px 14px;font-size:14px;line-height:1.5;color:#2A2724;white-space:pre-line;box-shadow:0 2px 6px -3px rgba(20,16,12,.14);} .pa-bubble-bot b{font-weight:700;} .pa-caret{display:inline-block;width:2px;height:14px;background:#B87E5F;margin-left:3px;vertical-align:-2px;animation:paBlink 1s steps(1) infinite;} .pa-urow{align-self:flex-end;max-width:86%;animation:paPop .32s cubic-bezier(.2,.9,.3,1) both;} /* Weisse Schrift auf Markengruen: bis 09.08.2026 #1E1E1E (6,16:1). Gleiche Ruecknahme bei .pa-btn-green und den Zeilen der Anruf-Kachel. */ .pa-bubble-user{background:#B87E5F;color:#fff;border-radius:16px 16px 5px 16px;padding:11px 14px;font-size:14px;line-height:1.5;box-shadow:0 6px 16px -6px rgba(160,106,76,.55);white-space:pre-line;} .pa-utime{font-size:10.5px;color:#ABA49C;margin:5px 4px 0 0;text-align:right;} /* bis 09.08.: #75706B */ /* Meta-Zeile (Zeit + Feedback) */ .pa-meta{display:flex;align-items:center;gap:8px;margin:5px 0 0 4px;} .pa-meta-time{font-size:10.5px;color:#ABA49C;} /* bis 09.08.: #75706B */ .pa-fb-wrap{display:inline-flex;align-items:center;gap:4px;animation:paRise .3s ease both;} .pa-fb-ask{font-size:10.5px;color:#ABA49C;} /* bis 09.08.: #75706B */ /* Groesse bleibt 24x24 (SC 2.5.8), die Demo hat 22x22. Farbe bis 09.08.: #6E6A66. */ .pa-fb-btn{width:24px;height:24px;border:none;border-radius:7px;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:#9A958F;padding:0;} .pa-fb-btn--up:hover{background:#F5EBE4;color:#A06A4C;} .pa-fb-btn--down:hover{background:#F7ECEA;color:#B03A32;} .pa-fb-done{font-size:10.5px;color:#B87E5F;font-weight:700;animation:paRise .3s ease both;} /* bis 09.08.: #8A5C42 */ /* Retry-Buttons (Fehler / Offline) */ .pa-retry{margin-top:8px;display:flex;align-items:center;gap:8px;background:#fff;border-radius:10px;padding:9px 13px;font-size:12.5px;font-weight:700;cursor:pointer;animation:paRise .3s ease both;} .pa-retry--err{border:1px solid #E8C4BF;color:#96352E;} .pa-retry--err:hover{background:#FDF4F3;} .pa-retry--off{border:1px solid #DCD8D3;color:#4C4844;} .pa-retry--off:hover{background:#F1EFEC;} /* CTA-Karte (dunkel) */ .pa-cta{margin-top:8px;display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#1E1E1E;border:none;border-radius:14px;padding:12px 13px;cursor:pointer;box-shadow:0 12px 26px -12px rgba(20,16,12,.5);animation:paRise .35s ease both;} .pa-cta:hover{transform:translateY(-1px);} .pa-cta-icon{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:#B87E5F;display:flex;align-items:center;justify-content:center;} .pa-cta-body{flex:1 1 auto;min-width:0;} .pa-cta-title{display:block;font-size:13.5px;font-weight:700;color:#fff;line-height:1.2;} .pa-cta-sub{display:block;font-size:11.5px;color:rgba(255,255,255,.65);margin-top:2px;} /* ROI-Karte */ .pa-card{margin-top:8px;background:#fff;border:1px solid #E7E4E0;border-radius:14px;padding:14px;box-shadow:0 8px 20px -12px rgba(20,16,12,.25);animation:paRise .35s ease both;} .pa-card-head{display:flex;align-items:center;gap:8px;margin-bottom:9px;} .pa-card-headicon{flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:#F5EBE4;display:flex;align-items:center;justify-content:center;} .pa-card-title{font-size:13.5px;font-weight:700;color:#2A2724;} .pa-btn-dark{width:100%;min-height:44px;border:none;border-radius:10px;background:#1E1E1E;color:#fff;font-size:13.5px;font-weight:700;padding:12px;cursor:pointer;box-shadow:0 4px 12px -5px rgba(20,16,12,.4);} .pa-btn-dark:hover{background:#2A2A2A;} /* Lead-Formular */ .pa-lead-head{display:flex;align-items:center;gap:8px;margin-bottom:12px;} .pa-lead-backwrap{flex:0 0 auto;width:26px;height:26px;display:flex;align-items:center;justify-content:center;} .pa-lead-back{width:26px;height:26px;border:none;border-radius:8px;background:#F1EFEC;color:#4C4844;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;} .pa-lead-back:hover{background:#F5EBE4;color:#A06A4C;} .pa-lead-dots{flex:1 1 auto;display:flex;justify-content:center;gap:5px;} .pa-lead-dot{height:6px;border-radius:3px;transition:all .2s ease;} .pa-lead-spacer{flex:0 0 auto;width:26px;height:26px;} .pa-nudge{display:flex;align-items:center;gap:8px;background:#FBF3EA;border:1px solid #E8D3B4;border-radius:10px;padding:8px 11px;margin-bottom:10px;animation:paRise .3s ease both;} .pa-nudge span{font-size:11.5px;color:#7A6326;line-height:1.4;} .pa-lead-title{font-size:13.5px;font-weight:700;color:#2A2724;} .pa-lead-sub{font-size:12px;color:#8A8580;margin:3px 0 12px;line-height:1.4;} /* bis 09.08.: #6E6A66 */ .pa-lead-flabel{font-size:13.5px;font-weight:700;color:#2A2724;margin-bottom:10px;} /* Formularfelder. Bis 09.08.2026 stand der Rahmen auf #8C857E (3,65:1 auf Weiss) — bei einem Textfeld ist der Rahmen das Merkmal, an dem man es ueberhaupt als Eingabefeld erkennt (SC 1.4.11). Zurueck auf den Demo-Wert #DCD8D3. Die 16 px sind KEINE Demo-Kosmetik, sondern Pflicht: Unter 16 px zoomt iOS beim Fokus hinein und nie wieder heraus. Sie standen bis 10.08.2026 nur im Mobilblock, weil die Grundregeln 13,5 px hatten; jetzt stehen sie hier und duerfen nicht darunter fallen. tools/mobil-check.mjs prueft das, tools/mobil-gegenprobe.mjs (G5) prueft die Pruefung. */ .pa-input{width:100%;box-sizing:border-box;min-height:44px;padding:13px 12px;border:1px solid #DCD8D3;border-radius:10px;font-size:16px;color:#2A2724;outline:none;margin-bottom:6px;background:#fff;} .pa-textarea-sm{width:100%;box-sizing:border-box;padding:12px;border:1px solid #DCD8D3;border-radius:10px;font-size:16px;line-height:1.4;color:#2A2724;outline:none;margin-bottom:6px;background:#fff;resize:none;} .pa-seg{display:flex;background:#EEEBE7;border-radius:12px;padding:4px;margin-bottom:6px;} .pa-seg--settings{margin-bottom:24px;} .pa-seg-btn{flex:1;border:none;cursor:pointer;border-radius:9px;padding:10px 6px;font-size:12.5px;font-weight:700;transition:all .2s;background:transparent;color:#8A8580;box-shadow:none;} /* bis 09.08.: #6E6A66 */ .pa-seg-btn--lg{padding:10px;font-size:13.5px;} .pa-seg-btn.is-active{background:#ffffff;color:#2A2724;box-shadow:0 2px 6px -2px rgba(20,16,12,.2);} .pa-sumrow{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#F7F6F4;border:1px solid #EDEAE6;border-radius:9px;padding:8px 11px;cursor:pointer;text-align:left;width:100%;} .pa-sumrow:hover{border-color:#B87E5F;background:#FAF4EF;} .pa-sumrow-k{font-size:11.5px;color:#8A8580;flex:0 0 auto;} /* bis 09.08.: #6E6A66 */ .pa-sumrow-v{flex:1 1 auto;min-width:0;font-size:12.5px;font-weight:600;color:#2A2724;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;} .pa-sumrow--block{display:block;} .pa-sumrow--block .pa-sumrow-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:3px;} .pa-sumrow--block .pa-sumrow-msg{display:block;font-size:12.5px;font-weight:600;color:#2A2724;line-height:1.4;white-space:pre-line;text-align:left;} .pa-sumlist{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;} .pa-consent{display:flex;align-items:flex-start;gap:8px;margin-bottom:12px;cursor:pointer;} .pa-consent input{margin-top:2px;width:16px;height:16px;accent-color:#B87E5F;flex:0 0 auto;cursor:pointer;} .pa-consent span{font-size:11.5px;line-height:1.4;color:#66615C;} .pa-linklike{background:transparent;border:none;padding:0;color:#A06A4C;text-decoration:underline;text-underline-offset:2px;font-size:11.5px;cursor:pointer;} /* bis 09.08.2026: color #1E1E1E (6,16:1), Hover #D4976F. Der Hover war mit aufgehellt worden, damit die dunkle Schrift darauf ihren Abstand behaelt — mit weisser Schrift gilt die Demo-Logik wieder andersherum, deshalb zurueck auf das dunklere #A06A4C. */ .pa-btn-green{width:100%;min-height:44px;border:none;border-radius:10px;background:#B87E5F;color:#fff;font-size:13.5px;font-weight:700;padding:13px;cursor:pointer;box-shadow:0 4px 12px -5px rgba(160,106,76,.55);} .pa-btn-green:hover{background:#A06A4C;} .pa-btn-green:disabled{background:#DFC6B5;color:#333333;cursor:default;box-shadow:none;} .pa-btn-green:active{transform:scale(.985);} .pa-lead-alt{width:100%;background:transparent;border:none;color:#8A8580;font-size:12px;font-weight:600;cursor:pointer;padding:8px 0 0;text-decoration:underline;text-underline-offset:2px;} /* bis 09.08.: #6E6A66 */ /* bis 09.08.2026: #8A5C42. Der Demo-Hover #A06A4C liegt bei 3,22:1 und verfehlt die 4,5:1 fuer 12px/600 — gefunden hatte das erst die Mauszustands-Pruefung in a11y-check.mjs. */ .pa-lead-alt:hover{color:#A06A4C;} .pa-leaddone{margin-top:8px;display:flex;align-items:flex-start;gap:10px;background:#F5EBE4;border:1px solid rgba(184,126,95,.4);border-radius:14px;padding:12px 14px;animation:paRise .35s ease both;} .pa-leaddone-check{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:#B87E5F;display:flex;align-items:center;justify-content:center;margin-top:1px;} .pa-leaddone-body{min-width:0;} .pa-leaddone-title{display:block;font-size:12.5px;line-height:1.4;color:#2A2724;font-weight:600;} .pa-leaddone-sub{display:block;font-size:11px;line-height:1.4;color:#4C4844;margin-top:2px;} /* Hinweis bei einer erkannten Wiederholung. Gleiche Groesse wie die Angaben darueber, aber nicht als Fehler eingefaerbt — es ist eine Auskunft, kein Problem. Kontrast #4C4844 auf dem Bubble-Hintergrund #F5EBE4 gerechnet: 7,34:1 (AA verlangt 4,5:1). */ .pa-leaddone-note{display:block;font-size:11px;line-height:1.4;color:#4C4844;margin-top:6px;font-style:italic;} /* Typing-Indikator */ .pa-typing{display:flex;align-items:flex-end;gap:9px;align-self:flex-start;animation:paPop .25s ease both;} .pa-typing-bubble{background:#fff;border:1px solid #E7E4E0;border-radius:16px 16px 16px 5px;padding:13px 15px;display:flex;gap:5px;} .pa-typing-bubble i{width:6px;height:6px;border-radius:50%;background:#9A958F;animation:paDot 1.3s infinite;} /* bis 09.08.: #847D76 */ .pa-typing-bubble i:nth-child(2){animation-delay:.18s;} .pa-typing-bubble i:nth-child(3){animation-delay:.36s;} /* ---------- Hinweis „Neue Nachricht" ---------- Kehrseite des Autoscroll-Schutzes (chatbot.js, zumEndeScrollen): Wer hochgescrollt eine aeltere Antwort liest, bekaeme sonst nicht mit, dass unten weitergeschrieben wird. Erscheint nur in genau diesem Fall. */ .pa-neu{flex:0 0 auto;align-self:center;margin:0 0 8px;padding:9px 14px;min-height:36px;display:inline-flex;align-items:center;gap:7px;background:#1E1E1E;color:#fff;border:none;border-radius:999px;font-size:12.5px;font-weight:700;cursor:pointer;box-shadow:0 10px 24px -10px rgba(20,16,12,.55);animation:paRise .22s ease both;} .pa-neu:hover{background:#2A2724;} .pa-neu:active{transform:scale(.97);} /* ---------- Chips / Aktionen ---------- */ .pa-actions{flex:0 0 auto;padding:6px 14px 4px;overflow-x:auto;animation:paRise .3s ease both;} .pa-sugg-label{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:#9A958F;margin:0 2px 7px;text-transform:uppercase;} /* bis 09.08.: #6E6A66 */ /* nowrap statt wrap: eine Chip-Zeile bleibt fuer jede Branche in fester Hoehe, laengere FAQ-Texte (z. B. Branche "kommune") liessen die Zeile sonst 2-3-zeilig werden und drueckten .pa-log nach oben, bis die erste Nachricht verdeckt war. .pa-actions hat bereits overflow-x:auto — das faengt jetzt die ueberschuessige Breite ab. */ .pa-chip-row{display:flex;flex-wrap:nowrap;gap:7px;} /* Chip-Rahmen bis 09.08.2026: #8C857E (3,47:1). Der Rahmen macht den Chip als Bedienelement erkennbar und faellt damit unter SC 1.4.11; der Demo-Wert #CFC9C2 erreicht die 3:1 nicht. */ .pa-chip{background:#fff;border:1px solid #CFC9C2;color:#4C4844;border-radius:999px;padding:8px 13px;font-size:12.5px;font-weight:500;line-height:1.15;cursor:pointer;text-align:left;white-space:nowrap;flex-shrink:0;transition:transform .15s ease,border-color .15s ease;} /* bis 09.08.2026: #7A4F38 fuer Rand und Schrift. Der Hover legt #F5EBE4 unter die Schrift, nicht den helleren Fenstergrund — der Demo-Wert #A06A4C kommt dort auf 2,84:1. Gefunden im Codex-Review vom 09.08.2026, nachdem a11y-check.mjs Mauszustaende herstellt. */ .pa-chip:hover{border-color:#B87E5F;background:#F5EBE4;color:#A06A4C;transform:translateY(-1px);} .pa-chip:active{transform:scale(.96);} /* ---------- Eingabebereich ---------- */ .pa-inputwrap{flex:0 0 auto;padding:14px 16px 12px;background:rgba(255,255,255,.82);backdrop-filter:blur(10px);border-top:1px solid #E7E4E0;} /* DER KASTEN UM DIE EINGABE — die Stelle, um die es ACTANOL ausdruecklich geht. #DCD8D3 auf dem Grund des Eingabebereichs ist mit rund 1,4:1 praktisch unsichtbar; genau so soll es sein. Bis 09.08.2026 stand hier #8C857E (3,62:1). Was dabei aufgegeben wird, offen benannt: Das Textfeld hat keinen eigenen Rahmen, und die Fuellung der Leiste (#F1EFEC) unterscheidet sich vom Fenstergrund (#F7F6F4) um 1,03:1. Dieser Rahmen ist also das Einzige, was die Eingabe als Eingabe erkennbar macht — er faellt unter SC 1.4.11 und braeuchte 3:1. Siehe docs/a11y-befunde.md, Befund A3. */ .pa-inputbar{display:flex;align-items:flex-end;gap:8px;background:#F1EFEC;border:1px solid #DCD8D3;border-radius:22px;padding:8px 8px 8px 18px;transition:border-color .2s ease,box-shadow .2s ease;} /* Fokusring der Eingabeleiste. Stand HIER frueher NICHT — chatbot.js setzte ihn als Inline-Stil aus dem Zustandsfeld `inputFocus`. Jedes `focus` und `blur` lief dadurch durch einen vollen synchronen Rerender, an dessen Ende die Nachrichtenliste ans Ende sprang — auf iOS genau in dem Moment, in dem Safari das fokussierte Feld ins Bild holt. DASS er aus dem CSS kommt, bleibt (mobil-check.mjs prueft es). Nur die FARBEN sind die der Demo: bis 09.08.2026 #8A5C42 mit rgba(138,92,66,.20), also 4,82:1. */ .pa-inputbar:focus-within{border-color:#B87E5F;box-shadow:0 0 0 3px rgba(184,126,95,.18);} .pa-textarea{flex:1 1 auto;border:none;background:transparent;resize:none;outline:none;font-size:16px;line-height:1.5;color:#2A2724;max-height:96px;padding:8px 0;} .pa-send{flex:0 0 auto;width:40px;height:40px;border:none;border-radius:14px;cursor:pointer;background:#B87E5F;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px -4px rgba(160,106,76,.55);transition:transform .15s ease;} .pa-send:hover{transform:scale(1.06);} .pa-send:active{transform:scale(.92);} /* Gesperrt, solange eine Antwort laeuft (S8). Ohne diese Regel waere die Sperre nur technisch vorhanden und fuer sehende Nutzer nicht erkennbar. */ .pa-send:disabled{background:#DFC6B5;cursor:default;box-shadow:none;transform:none;} .pa-send:disabled:hover{transform:none;} /* ACHTUNG: Diese Farbe ist wirkungslos, solange der Zaehler sichtbar ist. renderCounter() in chatbot.js setzt sie bei jedem Render inline (#9A958F, bei vollem Feld #B03A32) — in der Demo genauso. Der Wert hier greift nur, falls die Inline-Zuweisung entfaellt. In beiden Fassungen steht der sichtbare Zaehler damit bei 2,51:1. */ .pa-counter{text-align:right;font-size:10.5px;color:#9A958F;margin:4px 6px 0 0;} /* bis 09.08.: #6E6A66 */ .pa-footer{margin:8px 4px 0;text-align:center;} .pa-foot{font-size:10px;color:#9A958F;line-height:1.4;} /* bis 09.08.: #6E6A66 */ .pa-foot + .pa-foot{margin-top:2px;} .pa-foot b{font-weight:700;color:#4C4844;} .pa-foot .pa-foot-sep{font-weight:400;color:#9A958F;margin:0 6px;} /* bis 09.08.: #6E6A66 */ .pa-foot-btn{background:transparent;border:none;color:#A06A4C;font-size:10px;cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:0;} .pa-foot a{color:#A06A4C;text-decoration:underline;text-underline-offset:2px;} /* Die KI-Kennzeichnung. Bis 09.08.2026 #75706B (4,73:1). Sie bleibt Pflichtangabe und steht unveraendert da — nur eben blasser. */ .pa-footnote{font-size:10px;color:#ABA49C;line-height:1.4;font-style:italic;margin-top:8px;} /* ---------- Settings ---------- */ .pa-sec-label{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#9A958F;margin-bottom:11px;} /* bis 09.08.: #6E6A66 */ .pa-aud-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid #E7E4E0;border-radius:14px;padding:14px 15px;cursor:pointer;margin-bottom:24px;text-align:left;} .pa-aud-btn:hover{border-color:#B87E5F;} .pa-aud-body{min-width:0;} .pa-aud-label{display:block;font-size:14px;font-weight:700;color:#2A2724;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .pa-aud-sub{display:block;font-size:12px;color:#8A8580;margin-top:2px;} /* bis 09.08.: #6E6A66 */ /* DER WEG IN DEN KONTRASTMODUS MUSS SELBST LESBAR SEIN (25.08.2026, Entscheidung Nico nach einem Codex-Review). Die uebrigen Abschnittslabels und Segmentknoepfe bleiben auf dem Demo-Stand — sie sind Teil der Abnahme. Diese eine Zeile ist es NICHT: Es gab sie bei der Abnahme nicht, also wird hier auch nichts Vereinbartes veraendert. Ohne diese Haertung muesste jemand mit eingeschraenktem Sehvermoegen einen Schalter mit 2,51:1 bzw. 2,79:1 finden, um die lesbare Darstellung einzuschalten — und der Auslieferungszustand waere durch die Zeile an drei Stellen SCHLECHTER geworden (90 statt 87 Fehlstellen). #6E6A66 erreicht 5,59:1 auf dem Ansichtsgrund und 5,3:1 auf #EEEBE7. Preis, offen benannt: Die Zeile ist sichtbar dunkler als „SPRACHE" darueber. */ .pa-sec-label--a11y{color:#6E6A66;} .pa-seg-btn--a11y{color:#6E6A66;} .pa-set-list{border-top:1px solid #E7E4E0;padding-top:16px;display:flex;flex-direction:column;gap:4px;} .pa-set-item{display:flex;align-items:center;gap:11px;background:transparent;border:none;cursor:pointer;padding:11px 4px;font-size:14px;font-weight:600;color:#2A2724;text-align:left;} .pa-set-item:hover{color:#B87E5F;} /* bis 09.08.: #8A5C42 */ .pa-set-item--danger{color:#B03A32;} .pa-set-item--danger:hover{color:#7A2B26;} .pa-set-footer{margin-top:18px;text-align:center;} /* ---------- Kontakt ---------- */ .pa-contact-icon{width:52px;height:52px;border-radius:14px;background:#B87E5F;display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:0 10px 22px -10px rgba(160,106,76,.6);} .pa-view-sub--contact{margin:0 0 22px;line-height:1.5;} .pa-tile{display:flex;align-items:center;gap:14px;text-decoration:none;border-radius:16px;padding:16px 16px;margin-bottom:12px;} .pa-tile--call{background:#B87E5F;box-shadow:0 10px 24px -12px rgba(160,106,76,.6);} .pa-tile--call:hover{transform:translateY(-1px);} .pa-tile--mail{background:#fff;border:1px solid #E7E4E0;margin-bottom:20px;} .pa-tile--mail:hover{border-color:#B87E5F;} .pa-tile-icon{flex:0 0 auto;width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;} .pa-tile-icon--call{background:rgba(255,255,255,.18);} .pa-tile-icon--mail{background:#F5EBE4;} .pa-tile-body{flex:1 1 auto;min-width:0;} .pa-tile-title{display:block;font-size:15px;font-weight:700;line-height:1.15;} /* Anruf-Kachel: weisse Schrift auf Markengruen, mit den abgestuften Deckkraeften der Demo. Bis 09.08.2026: #141414 / #141414 / #242424, alle ohne opacity. Die opacity macht es schlechter als die reine Farbe vermuten laesst — 2,36:1 bzw. 2,10:1 statt der 2,51:1 von vollem Weiss. a11y-check.mjs rechnet opacity NICHT mit ein und meldet deshalb den guenstigeren Wert; nachgetragen in docs/a11y-befunde.md. */ .pa-tile-title--call{color:#fff;} .pa-tile-title--mail{color:#2A2724;} .pa-tile-value{display:block;font-size:14px;font-weight:600;margin-top:2px;} .pa-tile-value--call{color:#fff;opacity:.92;} .pa-tile-value--mail{color:#4C4844;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .pa-tile-desc{display:block;font-size:12px;margin-top:2px;} .pa-tile-desc--call{color:#fff;opacity:.78;} .pa-tile-desc--mail{color:#8A8580;} /* bis 09.08.: #6E6A66 */ /* KEIN .pa-hours-Block. Die Demo hat hier eine Kachel „Erreichbarkeit — Mo–Fr, 8–17 Uhr". Die Angabe ist unbestaetigt und in der Vollversion bewusst nicht vorhanden; Begruendung in chatbot.js bei renderContact(). */ .pa-contact-note{margin:0;font-size:11.5px;line-height:1.5;color:#ABA49C;} /* bis 09.08.: #75706B */ /* ---------- Datenschutz ---------- */ .pa-priv-title{margin:0 0 16px;font-size:19px;font-weight:700;color:#2A2724;} .pa-priv-p{margin:0 0 13px;font-size:13.5px;line-height:1.55;color:#3A3A3A;} .pa-priv-link{display:inline-flex;align-items:center;gap:7px;margin-top:6px;color:#B87E5F;font-size:13px;font-weight:700;text-decoration:none;} /* bis 09.08.: #8A5C42 */ /* ============================================================ Mobilfassung ============================================================ HIER STEHT ABSICHTLICH KEINE TASTATURNACHFUEHRUNG. In der Demo wurde das dreimal versucht und dreimal am iPhone verworfen: 1. `--pa-kb` — Tastaturhoehe samt `visualViewport.offsetTop` in ein unten verankertes `bottom`. Das Fenster sprang beim Antippen des Eingabefelds. 2. `body{position:fixed}` mit gemerkter Scrollposition. Das Fenster verschob sich beim Tippen nach oben und BLIEB verschoben. 3. `--pa-vvtop`/`--pa-vvh` — `offsetTop` in `top`, `visualViewport.height` in `height`. Das Fenster erschien beim Oeffnen gar nicht mehr. DER GRUND, in einem Satz: Auf iOS verankert WebKit `position:fixed`-Elemente am SICHTBAREN Viewport und verschiebt die Fixed-Ebene bereits selbst. Wer denselben Versatz noch einmal ins CSS rechnet, verschiebt zweimal — bei rund 300 px Tastatur rutscht das Fenster 600 px nach unten und ist weg. Anlauf 1 und 3 sind derselbe Fehler in anderer Verkleidung. Chrome verankert am LAYOUT-Viewport und rechnet deshalb nichts doppelt. Genau daher kommt der Unterschied zwischen den Browsern — und genau deshalb belegt ein gruener Chrome-Lauf hier nichts ausser dem Ausschluss der Ursache. Was hier steht, ist der Rueckbau vom 06.08.2026: reine CSS-Geometrie ueber `env(safe-area-inset-*)`, kein Wert aus JavaScript. Wortgleich mit `.chatbot-panel` auf properus.de und `.chatfab__panel` auf junges-ostallgaeu.de — beide laufen auf demselben iPhone. PREIS, offen benannt: Bei offener Tastatur kann die Eingabezeile kurz teilverdeckt sein, bis iOS das fokussierte Feld selbst ins Bild holt. Die beiden anderen Chatbots verhalten sich genauso. ============================================================ */ /* Ab 768 px setzt chatbot.js eine feste Fensterhoehe. `max-height` deckelt sie, damit das Fenster in einem niedrigen Browserfenster oben nicht aus dem Bild waechst. */ @media (min-width:768px){ .pa-win{max-height:calc(100dvh - 40px);} } @media (max-width:767px){ .pa-win{ top:calc(env(safe-area-inset-top,0px) + 8px); left:max(8px,env(safe-area-inset-left,0px)); right:max(8px,env(safe-area-inset-right,0px)); bottom:max(8px,env(safe-area-inset-bottom,0px)); width:auto;height:auto; border-radius:18px; /* iOS Safari clippt `overflow:hidden` neben `backdrop-filter` nicht zuverlaessig — die Kopfzeile stoesst sonst als harte Ecke durch. */ clip-path:inset(0 round 18px); transform-origin:center; transform:translateY(14px) scale(.985); } .pa-win--offen{transform:none;} /* Wirtsseite ruhig halten, solange das Fenster den Bildschirm fuellt. HIER STAND IN DER DEMO ZEITWEISE `position:fixed` samt gemerkter Scrollposition (Anlauf 2). Das setzte den Scroll-Spielraum auf 0 — und damit fehlte Safari der Weg, den Versatz zurueckzunehmen, den es beim Fokus eines Eingabefelds selbst erzeugt. Das Fenster blieb nach dem Absenden verschoben stehen. Begruendung ausfuehrlich in chatbot.js (setzeVollbildSperre). */ body.pa-vollbild{overflow:hidden;} /* HIER STAND `.pa-textarea,.pa-input,.pa-textarea-sm{font-size:16px;}` — die Regel gegen den iOS-Zoom beim Fokus. Sie stand nur hier, weil die Grundregeln 14,5 / 13,5 px hatten. Seit dem 10.08.2026 setzen die Grundregeln selbst 16 px (Demo-Stand), damit waere die Wiederholung wirkungslos. Die Anforderung bleibt: unter 16 px zoomt iOS hinein und nie wieder heraus. Geprueft in tools/mobil-check.mjs, die Pruefung selbst in tools/mobil-gegenprobe.mjs (G5). */ /* Bedienelemente auf Fingergroesse. Die Kopfzeile hatte drei 34-px-Knoepfe mit 6 px Abstand — auf Touch zu eng beieinander. */ .pa-hbtn{width:44px;height:44px;} .pa-hbtns{gap:10px;} /* Hier bestimmen die 44-px-Knoepfe die Zeilenhoehe, nicht der Textblock — die Unterzeile haengt in der Chat-Ansicht ohnehin darunter. Die Ausrichtung bleibt deshalb mittig. */ .pa-avatar,.pa-hbtns{align-self:center;} /* Streifenoptik fuer die KI-Kennzeichnung. Der Selektor greift nur, wenn die Unterzeile direkt im Kopf haengt — und dorthin haengt sie das Skript ausschliesslich auf dem Handy und nur in der Chat-Ansicht. Ueberall sonst steht sie unveraendert unter dem Titel. Die negativen Aussenabstaende ziehen den Streifen bis an die Kopfkanten (seitlich 16 px, unten die 11 px aus der Regel darunter), damit die Trennlinie durchlaeuft. Der Hintergrund bleibt WEISS: Ein grauer Streifen saehe besser abgesetzt aus, wuerde aber den Kontrast von #8A8580 genau dort verschlechtern, wo tools/a11y-check.mjs mit seinem 1280-px-Viewport nicht hinsieht — die Verschlechterung bliebe unbemerkt. */ .pa-header > .pa-hsub-row{ margin:8px -16px -11px; padding:7px 16px 8px; border-top:1px solid #E7E4E0; line-height:1.3; } /* Wo der Streifen steht, traegt der Kopf drei statt einer Zeile. Nur dort wird die Polsterung knapper gesetzt, damit dem Chatverlauf bei offener Tastatur nicht noch mehr Hoehe verloren geht — die uebrigen Ansichten behalten ihre bisherige Kopfhoehe. */ .pa-header--streifen{padding:12px 16px 11px;} /* 12.09.2026: 12 -> 10,5 px. HIER STAND BIS HEUTE DAS GEGENTEIL ("Die Schrift bleibt bei 12 px: Die KI-Kennzeichnung ist Pflichttext, sie wird nicht kleiner gerechnet, um Zeilen zu sparen."). Der Satz stimmt in der Sache — der Text bleibt vollstaendig und ungekuerzt, es wird keine Zeile gespart —, nur war die Groesse selbst nie gemessen, sondern gesetzt. Uebernommen ist jetzt der gemessene Stand des JOAL-Assistenten (css/assistent.css, 10.09.2026): Bei 10,5 px braucht der zweite Satz 303 statt 317 px und passt damit auch auf 375 px Geraetebreite (iPhone SE, 13 mini) zweizeilig; erst unter rund 360 px bricht er weiterhin um. Dieselbe Groesse traegt der Fussbereich unten — oben und unten gleich gross ist Nicos Vorgabe vom 12.09.2026. */ .pa-header > .pa-hsub-row{font-size:10.5px;} .pa-send{width:44px;height:44px;} .pa-chip{padding:15px;font-size:13.5px;} /* Textknoepfe: Mindestmass 24 px nach WCAG 2.2 AA (SC 2.5.8). Die Polsterung vergroessert nur die Trefferflaeche, die Schrift bleibt wie sie ist. Die oft zitierten 44 px sind Level AAA (2.5.5) — das behaupten wir hier nicht. 12.09.2026: 7 -> 6 px, aber NUR fuer den Fussbereich. Die 6 px sind Teil des Dreiklangs unten (Rechnung bei .pa-inputwrap) und keine freie Wahl: Bei 5 px faellt die Trefferflaeche auf 23,65 px und damit unter das Mindestmass. Das ist die Untergrenze, nicht eine Frage des Geschmacks. `.pa-linklike` bleibt bei 7 px und bekommt eine eigene Zeile. Sie haengt am Einwilligungslink der Lead-Karte (chatbot.js, `leadConsentLink`), traegt mit 11,5 px eine eigene Schriftgroesse, gehoert nicht zum Rhythmus der Fusszeile — und die Lead-Karte ist abgenommene Optik, die hier nicht mitwandern soll. `display:inline-block` MUSS bei ihr stehen bleiben: ohne das greift die Polsterung nicht in die Hoehe und die Trefferflaeche faellt auf rund 14 px. Kein Werkzeug sieht das — tools/mobil-check.mjs misst im Chat ohne offene Lead-Karte. */ .pa-foot-btn,.pa-foot a{display:inline-block;padding:6px 4px;} .pa-linklike{display:inline-block;padding:7px 4px;} /* Bei offener Tastatur bleiben vom Fenster nur rund 470 px. Eingabezeile und Fussbereich nahmen davon fast die Haelfte. Enger gesetzt — aber VOLLSTAENDIG: KI-Kennzeichnung, Verarbeiter und Datenschutzweg bleiben sichtbar, sie sind Pflicht und keine Zierde. 12.09.2026 auf die gemessenen Werte des JOAL-Assistenten gebracht (Nico: gleiche Position, gleiche Schriftgroesse, gleiche Abstaende wie dort). DER RHYTHMUS HAENGT AN DREI ZAHLEN, und sie muessen zusammen gerechnet werden: Zeilenhoehe 10,5 px x 1,3 = 13,65 px + Polsterung der Links 2 x 6 px = 25,65 px Kastenhoehe der oberen zwei Zeilen Aussenabstand der Fussnote 6 px, damit 12,825 + 6 + 6,825 = 25,65 Wer eine davon anfasst, muss die anderen nachziehen, sonst stehen die drei Zeilen wieder ungleich. Die Schriftgroesse steht bewusst hier und nicht in der Grundregel: am Schreibtisch bleiben es 10 px. `.pa-foot-btn` MUSS in der Schriftregel stehen: "Datenschutz" ist hier kein Link, sondern ein Knopf mit eigener Groesse (10 px in der Grundregel). Ohne diese Zeile stuende er 0,5 px kleiner als der Satz, in dem er sitzt — in der Messung sichtbar, mit dem Auge kaum. */ .pa-inputwrap{padding:10px 14px 6px;} .pa-footer{margin:2px 4px 0;} .pa-foot,.pa-foot-btn{font-size:10.5px;} .pa-foot{line-height:1.3;} .pa-foot + .pa-foot{margin-top:0;} .pa-footnote{font-size:10.5px;margin-top:6px;line-height:1.3;} .pa-counter{margin-top:2px;} .pa-ctx-change{padding:7px 8px;} .pa-priv-link{padding:6px 0;} /* Unsichtbare 44-px-Trefferflaeche fuer die kleinen runden Knoepfe. Die sichtbare Groesse bleibt, nur der Bereich waechst. `.pa-teaser-close` NICHT auf `position:relative` setzen — es ist absolut positioniert (top:-9px;left:-9px) und saesse sonst nicht mehr in seiner Ecke. Fuer das ::after reicht `absolute` als Bezugsrahmen genauso. */ .pa-fb-btn,.pa-lead-back{position:relative;} .pa-teaser-close::after,.pa-fb-btn::after,.pa-lead-back::after{ content:'';position:absolute;top:50%;left:50%; width:44px;height:44px;transform:translate(-50%,-50%); } } /* ============================================================ Barrierefreiheit (WCAG 2.2 AA) ============================================================ */ /* ---------- Sichtbarer Fokus ---------- Vorher stand an mehreren Stellen outline:none ohne Ersatz — Tastaturbedienung war damit blind. Zwei Ringe: aussen hell, innen gruen, damit die Marke sowohl auf hellem als auch auf dunklem Grund sichtbar bleibt. */ .pa-root :focus-visible{outline:2px solid #2A2724;outline-offset:2px;border-radius:6px;} .pa-root .pa-input:focus-visible, .pa-root .pa-textarea-sm:focus-visible{outline:2px solid #7A4F38;outline-offset:1px;border-color:#7A4F38;} .pa-root .pa-textarea:focus-visible{outline:2px solid #7A4F38;outline-offset:2px;} /* Der Fokusrahmen der Textfelder erscheint nur noch bei Tastaturbedienung. Anlass: Kundenwunsch vom 14.08.2026 — beim Klick in ein Feld wirkte das Rechteck wie eine aufgesetzte Kachel innerhalb der abgerundeten Leiste. Was hier NICHT passiert: die Regel abschalten. Bei Tab-Bedienung steht sie unveraendert; chatbot.js schaltet ueber `data-eingabeart` am Wurzelelement. Faellt das Attribut aus (etwa eine alte, gecachte chatbot.js), greifen diese Zeilen nicht und der Rahmen ist da — der Ausfall geht also in die sichere Richtung. Die Leiste selbst (`.pa-inputbar:focus-within`) bleibt in beiden Faellen gruen. `border-color` wird bewusst NICHT zurueckgesetzt: Der Wechsel #DCD8D3 -> #7A4F38 ist ein Farbwechsel und kein Kasten, und ein Reset hier waere spezifischer als `.pa-input.is-invalid` und wuerde den roten Fehlerrand ueberschreiben. `border-radius` dagegen schon: Die Auffangregel oben setzt 6px und ist spezifischer als `.pa-input` (10px) — die Feldecken wurden beim Reinklicken sichtbar kantiger. */ .pa-root[data-eingabeart="maus"] .pa-textarea:focus-visible{outline:none;} .pa-root[data-eingabeart="maus"] .pa-input:focus-visible, .pa-root[data-eingabeart="maus"] .pa-textarea-sm:focus-visible{outline:none;border-radius:10px;} .pa-root .pa-btn-green:focus-visible, .pa-root .pa-btn-dark:focus-visible, .pa-root .pa-send:focus-visible{outline:2px solid #1E1E1E;outline-offset:3px;} .pa-root .pa-launcher:focus-visible{outline:3px solid #2A2724;outline-offset:3px;border-radius:999px;} .pa-root .pa-hbtn:focus-visible, .pa-root .pa-teaser-close:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px rgba(30,30,30,.55);} /* Fokus im Header: dunkler Ring auf hellem Grund. Vorher stand hier ein WEISSER Ring mit dem Kommentar „liegt auf dunklem Grund" — der Kommentar stammt aus einer Zeit, in der die Kopfleiste dunkel war. Sie ist heute #ffffff (siehe .pa-header): Der weisse Ring hatte damit 1:1 und war schlicht nicht da. Sichtbar blieb der Fokus nur ueber den Schlagschatten aus der Regel darueber — also ueber eine Schicht, die niemand als tragend gekennzeichnet hatte. Gemessen mit tools/a11y-check.mjs. */ .pa-header .pa-hbtn:focus-visible{outline:2px solid #2A2724;outline-offset:2px;} /* ---------- Nur fuer Screenreader ---------- */ .pa-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;} /* ---------- Formularfelder, Pflicht/Optional, Fehler ---------- */ .pa-field{margin-bottom:2px;} .pa-req{font-weight:600;color:#66615C;} .pa-opt{font-weight:400;color:#75706B;} .pa-input.is-invalid,.pa-textarea-sm.is-invalid{border-color:#8F332E;border-width:2px;} /* Der rote Rand muss auch im Fokus stehen bleiben. `.pa-root .pa-input:focus-visible` (0,3,0) ist spezifischer als `.pa-input.is-invalid` (0,2,0) und faerbte den Rand sonst gruen — ausgerechnet an dem Feld, auf das `focusFirstInvalid()` nach fehlerhaftem Absenden springt. Vorbestehend, nicht aus der Aenderung vom 14.08.2026. Gemessen auf weissem Grund: #7A4F38 6,15:1, #8F332E 6,54:1 — beide ueber 3:1, die Ausnahmeliste bleibt bei 61 Eintraegen. `.pa-textarea-sm` braucht dieselbe Zeile NICHT: Das einzige mehrzeilige Feld (`leadMessage`, Schritt 8) wird ohne `err`/`errKey` gebaut und kann `is-invalid` nie bekommen. Waechst das Formular, gehoert der Selektor hier mit erweitert. */ .pa-root .pa-input.is-invalid:focus-visible{border-color:#8F332E;} /* Fehler steht zusaetzlich als Text — nie nur ueber die Farbe (WCAG 1.4.1). */ .pa-fielderr{font-size:12px;line-height:1.4;color:#8F332E;font-weight:600;margin:2px 0 8px;} .pa-senderr{font-size:12.5px;line-height:1.45;color:#8F332E;font-weight:600;background:#FCEFED;border:1px solid #E9C6C1;border-radius:10px;padding:10px 12px;margin-bottom:10px;} /* Rufnummer bei erschoepftem Tageskontingent. Gleiche Farbe (5,75:1 auf #FCEFED) plus Unterstreichung — die Information darf nicht nur ueber die Farbe laufen. */ .pa-senderr-tel{color:#8F332E;font-weight:700;text-decoration:underline;text-underline-offset:2px;white-space:nowrap;} /* ---------- Zweite, freiwillige Einwilligung ---------- */ .pa-consent--optional{padding-top:10px;border-top:1px solid #EDEAE6;} .pa-consent-hint{display:block;margin-top:3px;font-size:11px;line-height:1.4;color:#75706B;} /* ---------- Hinweis am Eingabefeld ---------- `.pa-inputhint` („Bitte keine sensiblen Daten eingeben.") ist am 10.08.2026 entfallen — die Demo-Fassung hat ihn nicht. Der Hinweis ist damit nicht verschwunden: Er steht weiterhin als dritter Absatz in der Datenschutzansicht (PRIVACY in chatbot.js). `.pa-inputbusy` BLEIBT — das ist der sichtbare Grund fuer die gesperrte Eingabe und damit Funktion, keine Zierde. Das Textfeld verweist per aria-describedby darauf. */ .pa-inputbusy{font-size:10.5px;line-height:1.4;color:#6E6A66;margin:3px 6px 0 2px;font-weight:600;} /* ---------- Bewegungsreduktion ---------- Dauerlaeufer (Aurora, Ring, Float) werden abgeschaltet, Ein-/Ausblendungen auf eine sehr kurze Blende reduziert. Das Wort-fuer-Wort-Streaming schaltet chatbot.js zusaetzlich selbst ab (prefersReducedMotion). */ @media (prefers-reduced-motion: reduce){ .pa-root *,.pa-root *::before,.pa-root *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .pa-aurora,.pa-launcher-ring{display:none !important;} /* Das Fenster erscheint ohne Versatz. Die Regel darueber kuerzt die Dauer bereits auf .01ms; ohne diese Zeile liefe die Verschiebung trotzdem, nur sehr schnell. */ .pa-win{transform:none;} } /* ---------- Honeypot ---------- Koederfeld gegen automatische Ausfueller. Bewusst NICHT display:none — manche Bots ueberspringen ausgeblendete Felder. Stattdessen aus dem sichtbaren Bereich geschoben, per aria-hidden und tabindex=-1 fuer Screenreader und Tastatur unerreichbar. */ .pa-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;} /* ============================================================ BARRIEREFREIHEITSMODUS — zuschaltbar, Standard bleibt unberuehrt ============================================================ WOZU DIESER BLOCK DA IST ACTANOL hat die Optik der Demo-Fassung ausdruecklich verlangt; die Kontrast-Haertung vom 09.08.2026 wurde dafuer am 10.08.2026 zurueckgenommen. Der Assistent verfehlt seither WCAG 2.2 Level AA an 65 gemessenen Stellen (61 im Widget, 4 am Launcher). Dieser Block holt die gehaerteten Werte zurueck — aber nur fuer den, der sie einschaltet. Geschaltet wird ueber `data-kontrast="hoch"` am Wurzelelement (chatbot.js). Die Werte sind NICHT neu erfunden. Es sind die Werte vom 09.08.2026, die im Stylesheet darueber als „bis 09.08."-Kommentar stehen und damals mit 50/50 gruen gemessen waren. Herleitung je Stelle in docs/a11y-befunde.md (Befunde A2, A3, A4, A6). WARUM EIN EIGENER BLOCK UND KEINE CSS-VARIABLEN Variablen waeren sauberer, wuerden aber jede vorhandene Regel anfassen. Genau das hat der Kunde ausgeschlossen. So gilt: Fehlt das Attribut, greift hier keine einzige Zeile — der abgenommene Zustand ist damit nachweisbar unberuehrt, nicht nur vermutlich. WAS DIESER MODUS NICHT IST Er macht den Assistenten NICHT WCAG 2.2 AA konform. Konformitaet wird am ausgelieferten Standardzustand gemessen, und der bleibt an 65 Stellen darunter. Der Modus ist ausserdem erst erreichbar, NACHDEM das Fenster offen ist — der Launcher bleibt beim ersten Besuch unveraendert. Nicht anders formulieren. DIE FALLE, DIE DIESEN BLOCK EINMAL FALSCH GEMACHT HAT Eine Grundregel hier ist mit (0,3,0) spezifischer als die Zustandsregeln oben, die meist (0,2,0) haben. `.pa-root[data-kontrast="hoch"] .pa-chip` ueberschreibt damit auch `.pa-chip:hover`, `.pa-seg-btn.is-active`, `.pa-input:focus-visible` und `.pa-set-item--danger:hover` — Hover, Fokus und Fehlerfarbe fielen still auf die Grundfarbe zurueck. Deshalb steht hinter JEDER Grundregel ihr Zustandssatz, und die Reihenfolge innerhalb einer Gruppe ist tragend: Grundrahmen, dann Fokus, dann Fehler. Wer hier etwas ergaenzt, prueft beide Punkte. ZWEITE FALLE: Inline-Stile aus chatbot.js schlagen jeden Selektor hier. renderCounter() ist deshalb dort umgestellt. Wer eine weitere Farbe inline setzt, muss sie dort mitziehen. Nachweis: `npm run a11y-kontrast` — erwartet 0 Ausnahmen. Jeder Fund ist rot. ============================================================ */ /* ---- Teaser und Bildlaufleiste. VON KEINEM LAUF GEDECKT: a11y-check.mjs misst das GEOEFFNETE Widget, der Teaser gehoert zum geschlossenen Zustand. Diese drei Werte stehen deshalb in keiner Ausnahmeliste — nicht weil sie in Ordnung waeren, sondern weil sie nie gemessen wurden. Sie tragen denselben „bis 09.08."-Rueckfallwert wie alles andere hier und gehoeren mitgezogen; gefunden beim Abgleich aller 33 Marker am 25.08.2026. Wie beim Launcher gilt: greift erst ab dem zweiten Besuch. ---- */ .pa-root[data-kontrast="hoch"] .pa-teaser-close{color:#6E6A66;} .pa-root[data-kontrast="hoch"] .pa-teaser-close:hover{color:#2A2724;border-color:#A39C94;} .pa-root[data-kontrast="hoch"] .pa-teaser-label{color:#8A5C42;} /* Eine Bildlaufleiste ist kein Bedienelement im Sinne von SC 1.4.11 — hier steht sie nur der Vollstaendigkeit halber, gleiche Herkunft wie die uebrigen Rueckstellungen. */ .pa-root[data-kontrast="hoch"] .pasc{scrollbar-color:#A39C94 transparent;} .pa-root[data-kontrast="hoch"] .pasc::-webkit-scrollbar-thumb{background:#A39C94;} /* ---- Kopfleiste, Zielgruppenwahl ---- */ .pa-root[data-kontrast="hoch"] .pa-hsub-row{color:#6E6A66;} .pa-root[data-kontrast="hoch"] .pa-pcard-tag{color:#6E6A66;} /* ---- Kontextzeile. #7A4F38 statt #8A5C42: die Zeile sitzt auf #F5EBE4, dort reicht das hellere Gruen nicht (Befund A2). ---- */ .pa-root[data-kontrast="hoch"] .pa-ctx-text .pa-ctx-pre{color:#6E6A66;} .pa-root[data-kontrast="hoch"] .pa-ctx-change{color:#7A4F38;} /* ---- Nachrichten. Dunkle Schrift auf Markengruen statt weisser: 6,16:1 statt 2,51:1. Die FLAECHE #B87E5F bleibt unveraendert, nur die Schrift darauf wechselt. ---- */ .pa-root[data-kontrast="hoch"] .pa-bubble-user{color:#1E1E1E;} .pa-root[data-kontrast="hoch"] .pa-utime{color:#75706B;} .pa-root[data-kontrast="hoch"] .pa-meta-time{color:#75706B;} .pa-root[data-kontrast="hoch"] .pa-fb-ask{color:#75706B;} .pa-root[data-kontrast="hoch"] .pa-fb-done{color:#8A5C42;} /* Grundregel, dann BEIDE Hover-Zustaende — sonst faerbt die Grundregel den Daumen-runter von Rot auf Grau. */ .pa-root[data-kontrast="hoch"] .pa-fb-btn{color:#6E6A66;} .pa-root[data-kontrast="hoch"] .pa-fb-btn--up:hover{color:#7A4F38;} .pa-root[data-kontrast="hoch"] .pa-fb-btn--down:hover{color:#B03A32;} /* ---- Kontaktformular ---- */ .pa-root[data-kontrast="hoch"] .pa-lead-sub{color:#6E6A66;} .pa-root[data-kontrast="hoch"] .pa-sumrow-k{color:#6E6A66;} /* Rahmen der Formularfelder: Bei einem Textfeld ist der Rahmen das Merkmal, an dem man es ueberhaupt als Eingabefeld erkennt (SC 1.4.11). Demo-Wert #DCD8D3 = 1,43:1. REIHENFOLGE IST TRAGEND — Grundrahmen, dann Fokus, dann Fehler: */ .pa-root[data-kontrast="hoch"] .pa-input, .pa-root[data-kontrast="hoch"] .pa-textarea-sm{border-color:#8C857E;} /* 2. Der Fokus behaelt sein Gruen. Ohne diese Zeile ueberschriebe die Grundregel darueber `.pa-root .pa-input:focus-visible` (gleiche Spezifitaet, aber weiter oben). */ .pa-root[data-kontrast="hoch"] .pa-input:focus-visible, .pa-root[data-kontrast="hoch"] .pa-textarea-sm:focus-visible{border-color:#7A4F38;} /* 3. Der Fehler schlaegt beide. Ohne diese Zeile verloere das fehlerhafte Feld seinen roten Rand — ausgerechnet das, auf das focusFirstInvalid() springt. */ .pa-root[data-kontrast="hoch"] .pa-input.is-invalid, .pa-root[data-kontrast="hoch"] .pa-textarea-sm.is-invalid{border-color:#8F332E;} .pa-root[data-kontrast="hoch"] .pa-input.is-invalid:focus-visible{border-color:#8F332E;} /* Hover war #A06A4C (3,22:1). #D4976F hellt die Flaeche auf, damit die dunkle Schrift ihren Abstand behaelt — genau die Logik vom 09.08.2026. Der gesperrte Knopf behaelt seine eigene Schriftfarbe: Sein Signal ist die hellere Flaeche, die bleibt. */ .pa-root[data-kontrast="hoch"] .pa-btn-green{color:#1E1E1E;} .pa-root[data-kontrast="hoch"] .pa-btn-green:hover{background:#D4976F;color:#1E1E1E;} /* Der GESPERRTE Knopf braucht seine Flaeche zurueck, nicht nur die Schriftfarbe. Die :hover-Zeile darueber ist (0,4,0) und schlaegt `.pa-btn-green:disabled` (0,2,0) — ein waehrend des Sendens oder nach dem Tageslimit gesperrter Knopf sah beim Ueberfahren aus wie ein bedienbarer. Deshalb hier BEIDE Zustaende mit Flaeche, und `:disabled:hover` mit (0,5,0) ueber dem Hover. Aus dem Codex-Review vom 25.08.2026. */ .pa-root[data-kontrast="hoch"] .pa-btn-green:disabled{background:#DFC6B5;color:#333333;} .pa-root[data-kontrast="hoch"] .pa-btn-green:disabled:hover{background:#DFC6B5;color:#333333;} .pa-root[data-kontrast="hoch"] .pa-lead-alt{color:#6E6A66;} .pa-root[data-kontrast="hoch"] .pa-lead-alt:hover{color:#8A5C42;} /* ---- Segmentleisten (Sprache, Darstellung, Kontaktzeit). Der aktive Knopf MUSS hinter der Grundregel stehen, sonst wird er heller statt dunkler und die Auswahl ist nicht mehr abzulesen. ---- */ .pa-root[data-kontrast="hoch"] .pa-seg-btn{color:#6E6A66;} .pa-root[data-kontrast="hoch"] .pa-seg-btn.is-active{color:#2A2724;} /* ---- Vorschlags-Chips ---- */ .pa-root[data-kontrast="hoch"] .pa-sugg-label{color:#6E6A66;} .pa-root[data-kontrast="hoch"] .pa-chip{border-color:#8C857E;} .pa-root[data-kontrast="hoch"] .pa-chip:hover{border-color:#7A4F38;color:#7A4F38;} /* ---- Eingabebereich. Der Rahmen der Leiste ist das Einzige, was die Eingabe als Eingabe erkennbar macht (Befund A3) — Demo-Wert 1,42:1 ruhend, 2,49:1 im Fokus. ---- */ .pa-root[data-kontrast="hoch"] .pa-inputbar{border-color:#8C857E;} .pa-root[data-kontrast="hoch"] .pa-inputbar:focus-within{border-color:#8A5C42;box-shadow:0 0 0 3px rgba(138,92,66,.20);} /* Das Symbol im Sendeknopf: `stroke="#fff"` steht als PRAESENTATIONSATTRIBUT im SVG-Markup in chatbot.js. Eine CSS-Regel schlaegt ein Praesentationsattribut — anders als einen Inline-Stil. Deshalb greift diese Zeile, waehrend renderCounter() in JS umgestellt werden musste. */ .pa-root[data-kontrast="hoch"] .pa-send svg{stroke:#1E1E1E;} .pa-root[data-kontrast="hoch"] .pa-counter{color:#6E6A66;} /* ---- Fusszeile und KI-Kennzeichnung. Pflichtangabe, deshalb besonders unangenehm blass: 2,01:1 im Chat, 1,92:1 in den Einstellungen. ---- */ .pa-root[data-kontrast="hoch"] .pa-foot{color:#6E6A66;} .pa-root[data-kontrast="hoch"] .pa-foot .pa-foot-sep{color:#6E6A66;} .pa-root[data-kontrast="hoch"] .pa-footnote{color:#75706B;} /* ---- Einstellungen. Der Zuruecksetzen-Eintrag ist rot und MUSS hinter der Hover-Regel stehen, sonst wird die gefaehrliche Aktion beim Ueberfahren gruen. ---- */ .pa-root[data-kontrast="hoch"] .pa-sec-label{color:#6E6A66;} .pa-root[data-kontrast="hoch"] .pa-aud-sub{color:#6E6A66;} .pa-root[data-kontrast="hoch"] .pa-set-item:hover{color:#8A5C42;} .pa-root[data-kontrast="hoch"] .pa-set-item--danger:hover{color:#7A2B26;} /* ---- Kontakt. Die Anruf-Kachel traegt zusaetzlich opacity (.92/.78). Die muss WEG, sonst bleibt sie trotz dunkler Schrift unter dem Grenzwert — das Pruefwerkzeug rechnet Deckkraft nicht mit ein und meldete sonst einen zu guenstigen Wert. ---- */ .pa-root[data-kontrast="hoch"] .pa-tile-title--call{color:#141414;} .pa-root[data-kontrast="hoch"] .pa-tile-value--call{color:#141414;opacity:1;} .pa-root[data-kontrast="hoch"] .pa-tile-desc--call{color:#242424;opacity:1;} .pa-root[data-kontrast="hoch"] .pa-tile-icon--call svg{stroke:#141414;} .pa-root[data-kontrast="hoch"] .pa-tile-desc--mail{color:#6E6A66;} .pa-root[data-kontrast="hoch"] .pa-contact-note{color:#75706B;} /* ---- Datenschutz ---- */ .pa-root[data-kontrast="hoch"] .pa-priv-link{color:#8A5C42;} /* ---- Launcher. GREIFT ERST AB DEM ZWEITEN BESUCH, weil der Modus vorher nicht gesetzt sein kann — der Launcher ist zu sehen, bevor der Schalter erreichbar ist. Das ist die Grenze der Entscheidung „nur Schalter" und keine Nachlaessigkeit. Die sichtbare Randfarbe kommt aus dem Icon-BILD (.pa-launcher-img deckt den Knopf vollstaendig ab), nicht aus background-color; eine Farbueberschreibung ginge deshalb ins Leere. Stattdessen eine eigene Fassung aussen herum. Siehe Nachtrag vom 15.08.2026 in docs/a11y-befunde.md. ---- */ /* DIE FASSUNG LIEGT IM box-shadow, NICHT IM outline — und das ist der Punkt. Der erste Entwurf setzte hier `outline:2px solid #2A2724`. Diese Regel ist mit (0,3,0) genauso spezifisch wie `.pa-root .pa-launcher:focus-visible` (Zeile 501) und steht spaeter — sie gewann damit AUCH IM FOKUS. Ein Tastaturnutzer im Kontrastmodus sah beim Antabben genau denselben Rahmen wie ohne Fokus: eine Fokusanzeige, die ausgerechnet im Barrierefreiheitsmodus verschwindet. Gefunden im Codex-Review vom 25.08.2026. `outline` ist der Kanal der Fokusanzeige und bleibt ihr deshalb allein vorbehalten; die dauerhafte Fassung kommt als zusaetzlicher Ring im box-shadow. Die beiden Schlagschatten dahinter sind die aus `.pa-launcher` und muessen mitgefuehrt werden — box-shadow ersetzt, es ergaenzt nicht. */ .pa-root[data-kontrast="hoch"] .pa-launcher{box-shadow:0 0 0 2px #2A2724,0 20px 44px -14px rgba(20,16,12,.55),0 4px 12px -4px rgba(0,0,0,.25);} /* ---- Quellenkarten (Spezifikation Quellenangabe, Abschnitt 3) ------------ Nicht aus der Vollversion portiert — die hat keine. Quelle ist die Demo-Fassung und die Spezifikation. PROPERUS hat genau einen Quelltyp: die eigene Website. Deshalb ein Chip statt dreier Typfarben. */ .pa-src-label{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9A958F;margin:2px 0 0 2px;} .pa-srcs{margin-top:8px;display:flex;flex-direction:column;gap:6px;} .pa-src{display:flex;align-items:center;gap:10px;text-decoration:none;background:#fff;border:1px solid #E7E4E0;border-left:3px solid #B87E5F;border-radius:4px;padding:8px 11px;transition:border-color .15s ease,background .15s ease;} a.pa-src:hover{background:#F7F6F4;border-color:#CFC9C2;} a.pa-src:focus-visible{outline:2px solid #B87E5F;outline-offset:2px;} .pa-src--plain{cursor:default;} .pa-src-body{flex:1 1 auto;min-width:0;} .pa-src-type{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border-radius:3px;padding:2px 6px;margin-bottom:3px;color:#8A5C42;background:#F5EBE4;} .pa-src-title{display:block;font-size:11.5px;font-weight:500;color:#2A2724;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* Die Aktion ist auf Zeigergeraeten erst beim Ueberfahren sichtbar, bleibt aber fuer Tastatur und Screenreader immer im Baum. Auf Touch gibt es kein Hover — dort ist sie deshalb dauerhaft sichtbar. */ .pa-src-open{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:#8A5C42;opacity:0;transition:opacity .15s ease;} a.pa-src:hover .pa-src-open,a.pa-src:focus-visible .pa-src-open{opacity:1;} @media (hover:none){.pa-src-open{opacity:1;}} @media (prefers-reduced-motion:reduce){.pa-src,.pa-src-open{transition:none;}} /* ---- Kontaktformular-Kachel ---------------------------------------------- Die Vollversion hat in der Kontaktansicht zwei Kacheln, Telefon und E-Mail, beide . Die dritte fuehrt nirgendwohin, sondern oeffnet das Kontaktformular im Fenster — sie ist deshalb ein