{"id":60,"date":"2026-05-02T07:17:01","date_gmt":"2026-05-02T07:17:01","guid":{"rendered":"http:\/\/localhost:8080\/butler\/"},"modified":"2026-05-02T07:17:01","modified_gmt":"2026-05-02T07:17:01","slug":"butler","status":"publish","type":"page","link":"https:\/\/www.tb-software.ch\/ai\/butler\/","title":{"rendered":"Butler, meine Spielwiese"},"content":{"rendered":"    <section class=\"tb-bsh-hero\">\n      <div class=\"tb-container tb-bsh-hero__inner\">\n        <div class=\"tb-bsh-hero__butler\">\n                  <div class=\"tb-butler tb-butler--lg\"\n             id=\"tb-butler-showcase-hero\"\n             data-tb-butler\n             data-mood=\"friendly\"\n             role=\"button\"\n             tabindex=\"0\"\n             aria-label=\"Butler AI, Klick zum Chat\">\n          <svg class=\"tb-butler__svg\" viewBox=\"0 0 200 220\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n            <line x1=\"78\" y1=\"8\" x2=\"78\" y2=\"24\" stroke=\"#7E8AAA\" stroke-width=\"1.75\" stroke-linecap=\"round\" \/>\n            <circle class=\"tb-butler__antenna\" cx=\"78\" cy=\"8\" r=\"3.5\" fill=\"#18C6E6\" \/>\n\n            <rect x=\"84\" y=\"192\" width=\"32\" height=\"11\" rx=\"2\" fill=\"#A6B3CC\" \/>\n            <rect x=\"74\" y=\"201\" width=\"52\" height=\"6\" rx=\"2\" fill=\"#8A98B8\" \/>\n\n            <rect class=\"tb-butler__housing\"\n                  x=\"22\" y=\"24\" width=\"156\" height=\"166\" rx=\"20\" ry=\"20\"\n                  fill=\"url(#tb-butler-housing-grad-tb-butler-showcase-hero)\"\n                  stroke=\"#8A98B8\" stroke-width=\"1\" \/>\n            <rect x=\"28\" y=\"30\" width=\"144\" height=\"4\" rx=\"2\" fill=\"rgba(255,255,255,0.32)\" \/>\n\n            <rect class=\"tb-butler__display\"\n                  x=\"32\" y=\"44\" width=\"136\" height=\"118\" rx=\"9\" ry=\"9\"\n                  fill=\"#08101F\" \/>\n            <rect x=\"32\" y=\"44\" width=\"136\" height=\"118\" rx=\"9\" ry=\"9\"\n                  fill=\"none\" stroke=\"#1B2238\" stroke-width=\"0.8\" opacity=\"0.7\" \/>\n            <rect x=\"38\" y=\"48\" width=\"50\" height=\"2\" rx=\"1\" fill=\"rgba(255,255,255,0.05)\" \/>\n\n            <text x=\"100\" y=\"178\" text-anchor=\"middle\"\n                  font-family=\"ui-monospace, 'SF Mono', Monaco, monospace\"\n                  font-size=\"9\" font-weight=\"800\"\n                  fill=\"rgba(34, 41, 62, 0.78)\" letter-spacing=\"1.2\">\n              BUTLER&#160;AI\n            <\/text>\n            <text x=\"100\" y=\"188.5\" text-anchor=\"middle\"\n                  font-family=\"ui-monospace, 'SF Mono', Monaco, monospace\"\n                  font-size=\"6\" font-weight=\"600\"\n                  fill=\"rgba(34, 41, 62, 0.62)\" letter-spacing=\"0.9\">\n              TB-SOFTWARE\n            <\/text>\n\n            <g class=\"tb-butler__face\" data-butler-face\n               transform=\"translate(32, 44) scale(0.461)\"\n               style=\"color: var(--tb-butler-cyan);\">\n              <g id=\"eyes\"><path d=\"M74 116 Q92 104 110 116\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"6\" stroke-linecap=\"round\"\/><path d=\"M146 116 Q164 104 182 116\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"6\" stroke-linecap=\"round\"\/><\/g>\n              <g id=\"mouth\"><path d=\"M96 178 Q128 196 160 178\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"6\" stroke-linecap=\"round\"\/><\/g>\n            <\/g>\n\n            <circle class=\"tb-butler__online-dot\" cx=\"160\" cy=\"156\" r=\"2.8\" fill=\"#10B981\" \/>\n\n            <defs>\n              <linearGradient id=\"tb-butler-housing-grad-tb-butler-showcase-hero\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\"   stop-color=\"#C9D3E6\" \/>\n                <stop offset=\"50%\"  stop-color=\"#9FAFCD\" \/>\n                <stop offset=\"100%\" stop-color=\"#7B8DB3\" \/>\n              <\/linearGradient>\n            <\/defs>\n          <\/svg>\n\n          <!-- Klick-Hint: erscheint kurz nach Page-Load f\u00fcr 5s mit Pulse-\n               Effekt um neuen Besuchern zu zeigen, dass der Butler interaktiv\n               ist. Verschwindet auch sofort bei erstem Hover\/Klick. JS toggelt\n               .is-visible an. -->\n          <!-- Klick-Hint sitzt LINKS vom Butler (vgl. butler.css), Pfeil zeigt\n               nach rechts \u2192 Richtung Roboter. Hand-hoch-Emoji w\u00e4re verwirrend\n               weil der Hint horizontal nicht vertikal ausgerichtet ist. -->\n          <div class=\"tb-butler__clickhint\" data-butler-clickhint aria-hidden=\"true\">\n            <span>Klick mich \u2192<\/span>\n          <\/div>\n\n          <div class=\"tb-butler__bubble\" data-butler-bubble role=\"status\" aria-live=\"polite\" hidden>\n            <div class=\"tb-butler__bubble-text\" data-butler-bubble-text><\/div>\n            <form class=\"tb-butler__inline-form\" data-butler-inline-form hidden>\n              <input class=\"tb-butler__inline-input\"\n                     data-butler-inline-input\n                     type=\"text\"\n                     maxlength=\"300\"\n                     placeholder=\"Antwort?\"\n                     aria-label=\"Antwort an Butler\"\n                     autocomplete=\"off\">\n              <button type=\"button\" class=\"tb-speech-btn tb-butler__mic\"\n                      data-butler-mic\n                      aria-label=\"Spracheingabe starten\" title=\"Spracheingabe starten\" aria-pressed=\"false\" hidden>\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"9\" y=\"2\" width=\"6\" height=\"12\" rx=\"3\"\/><path d=\"M5 10v2a7 7 0 0 0 14 0v-2\"\/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"22\"\/><\/svg>\n              <\/button>\n            <\/form>\n          <\/div>\n        <\/div>\n                <\/div>\n        <div class=\"tb-bsh-hero__copy\">\n          <p class=\"tb-bsh-hero__title\">Hi, ich bin Butler.<\/p>\n          <p class=\"tb-bsh-hero__sub\">Ich wohne in dieser Webseite. Was du hier siehst, kann ich.<\/p>\n          <p class=\"tb-bsh-hero__hint\">\n            Klick auf mich, dann \u00f6ffnet sich eine Sprechblase mit Eingabefeld.\n            Tippe was, alles weiter unten zeigt zus\u00e4tzlich, was ich kann.\n          <\/p>\n        <\/div>\n      <\/div>\n    <\/section>\n    \n    <section class=\"tb-bsh-section\">\n      <div class=\"tb-container\">\n        <header class=\"tb-bsh-section__head\">\n          <span class=\"tb-eyebrow\">Was ich kann<\/span>\n          <h2>49 Emotionen, 10 Bewegungen, 6 Symbole.<\/h2>\n          <p class=\"tb-bsh-subhint\">Klick auf \u201eDemo abspielen\" bei einer Karte, der Butler oben spielt sie live ab. Wir scrollen automatisch zu ihm hoch.<\/p>\n        <\/header>\n        <div class=\"tb-bsh-caps\">\n          <article class=\"tb-bsh-cap\">\n            <span class=\"tb-bsh-cap__num\">49<\/span>\n            <h3>Emotionen<\/h3>\n            <p>Jede ist eine eigene LCD-Pose im Display, von <code>idle-smile<\/code> bis <code>dance-confetti<\/code>.<\/p>\n            <button type=\"button\" class=\"tb-btn tb-btn--secondary\" data-bsh-demo=\"emotions\">Demo abspielen<\/button>\n          <\/article>\n          <article class=\"tb-bsh-cap\">\n            <span class=\"tb-bsh-cap__num\">10<\/span>\n            <h3>Bewegungen<\/h3>\n            <p>4 Verschieb-Richtungen + 6 vordefinierte CSS-Animationen wie <code>spin<\/code>, <code>wobble<\/code>, <code>bounce<\/code>.<\/p>\n            <button type=\"button\" class=\"tb-btn tb-btn--secondary\" data-bsh-demo=\"moves\">Demo abspielen<\/button>\n          <\/article>\n          <article class=\"tb-bsh-cap\">\n            <span class=\"tb-bsh-cap__num\">6<\/span>\n            <h3>Symbole<\/h3>\n            <p>SVG-Symbole, die ich kurz im Display einblende, H\u00e4kchen, Blitz, Herz, Noten, Konfetti, Party.<\/p>\n            <button type=\"button\" class=\"tb-btn tb-btn--secondary\" data-bsh-demo=\"symbols\">Demo abspielen<\/button>\n          <\/article>\n        <\/div>\n      <\/div>\n    <\/section>\n    \n    <section class=\"tb-bsh-section tb-bsh-section--alt\">\n      <div class=\"tb-container\">\n        <header class=\"tb-bsh-section__head\">\n          <span class=\"tb-eyebrow\">Emotion-Galerie<\/span>\n          <h2>Klick auf eine Pose, der Butler oben \u00fcbernimmt sie live.<\/h2>\n          <p class=\"tb-bsh-subhint\">Hier siehst du <strong>49 von aktuell 128+ Emotionen<\/strong>, die anderen werden je nach Bot-Persona und Kontext zur Laufzeit nachgeladen.<\/p>\n        <\/header>\n        <div class=\"tb-bsh-gallery\" data-bsh-gallery>\n          <p class=\"tb-bsh-loading\">\u2026 lade Emotionen \u2026<\/p>\n        <\/div>\n      <\/div>\n    <\/section>\n    \n    <section class=\"tb-bsh-section\">\n      <div class=\"tb-container\">\n        <header class=\"tb-bsh-section__head\">\n          <span class=\"tb-eyebrow\">Trigger-Panel<\/span>\n          <h2>Steuere mich direkt, Button klicken, ich reagiere.<\/h2>\n        <\/header>\n        <div class=\"tb-bsh-trigger\">\n          <div class=\"tb-bsh-trigger__group\">\n            <h3>Stimmung<\/h3>\n            <div class=\"tb-bsh-trigger__btns\">\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"friendly\">friendly<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"joy\">joy<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"happy\">happy<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"welcoming\">welcoming<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"thinking\">thinking<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"questioning\">questioning<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"helpful\">helpful<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"explaining\">explaining<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"attentive\">attentive<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"confused\">confused<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"suspense\">suspense<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"party\">party<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"laughing\">laughing<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"romantic\">romantic<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"comfortable\">comfortable<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"cozy\">cozy<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"cold\">cold<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"hot\">hot<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"sleep-zzz\">sleep-zzz<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"idle-tired\">idle-tired<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"idle-think\">idle-think<\/button>\n                          <\/div>\n          <\/div>\n          <div class=\"tb-bsh-trigger__group\">\n            <h3>Symbole<\/h3>\n            <div class=\"tb-bsh-trigger__btns\">\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"show\" data-bsh-value=\"checkmark\">checkmark<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"show\" data-bsh-value=\"lightning\">lightning<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"show\" data-bsh-value=\"heart-pulse\">heart-pulse<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"show\" data-bsh-value=\"music-notes\">music-notes<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"show\" data-bsh-value=\"dance-confetti\">dance-confetti<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"show\" data-bsh-value=\"party\">party<\/button>\n                          <\/div>\n          <\/div>\n          <div class=\"tb-bsh-trigger__group\">\n            <h3>Bewegungen<\/h3>\n            <div class=\"tb-bsh-trigger__btns\">\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--move\" data-bsh-action=\"move\" data-bsh-value=\"left\">\u2192 left<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--move\" data-bsh-action=\"move\" data-bsh-value=\"right\">\u2192 right<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--move\" data-bsh-action=\"move\" data-bsh-value=\"up\">\u2192 up<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--move\" data-bsh-action=\"move\" data-bsh-value=\"down\">\u2192 down<\/button>\n                                            <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--anim\" data-bsh-action=\"anim\" data-bsh-value=\"bounce\">\u2312 bounce<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--anim\" data-bsh-action=\"anim\" data-bsh-value=\"shake\">\u2312 shake<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--anim\" data-bsh-action=\"anim\" data-bsh-value=\"wobble\">\u2312 wobble<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--anim\" data-bsh-action=\"anim\" data-bsh-value=\"nod\">\u2312 nod<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--anim\" data-bsh-action=\"anim\" data-bsh-value=\"spin\">\u2312 spin<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--anim\" data-bsh-action=\"anim\" data-bsh-value=\"lean\">\u2312 lean<\/button>\n                          <\/div>\n          <\/div>\n          <div class=\"tb-bsh-trigger__group\">\n            <h3>Display-Text<\/h3>\n            <div class=\"tb-bsh-trigger__btns\">\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--text\" data-bsh-action=\"text\" data-bsh-value=\"HALLO\">HALLO<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--text\" data-bsh-action=\"text\" data-bsh-value=\"TB-SOFTWARE\">TB-SOFTWARE<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--text\" data-bsh-action=\"text\" data-bsh-value=\"WIDNAU\">WIDNAU<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--text\" data-bsh-action=\"text\" data-bsh-value=\"RHEINTAL\">RHEINTAL<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--text\" data-bsh-action=\"text\" data-bsh-value=\"LOKALE KI\">LOKALE KI<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--text\" data-bsh-action=\"text\" data-bsh-value=\"KMU\">KMU<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--text\" data-bsh-action=\"text\" data-bsh-value=\"OFFLINE\">OFFLINE<\/button>\n                          <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n    \n    <section class=\"tb-bsh-section tb-bsh-section--alt\">\n      <div class=\"tb-container\">\n        <header class=\"tb-bsh-section__head\">\n          <span class=\"tb-eyebrow\">Pers\u00f6nlichkeit<\/span>\n          <h2>W\u00e4hle, wer ich bin.<\/h2>\n          <p>Wechselt System-Prompt + Begr\u00fcssung. History wird zur\u00fcckgesetzt.<\/p>\n        <\/header>\n        <div class=\"tb-bsh-personas\" data-bsh-personas>\n                      <button type=\"button\" class=\"tb-bsh-persona\" data-bsh-persona=\"default\"\n                    style=\"--persona-color: #18C6E6;\">\n              <span class=\"tb-bsh-persona__dot\" aria-hidden=\"true\"><\/span>\n              <span class=\"tb-bsh-persona__name\">B\u00fcrohund<\/span>\n              <span class=\"tb-bsh-persona__tag\">charmant, knapp, leicht keck<\/span>\n            <\/button>\n                      <button type=\"button\" class=\"tb-bsh-persona\" data-bsh-persona=\"formal\"\n                    style=\"--persona-color: #3F4F71;\">\n              <span class=\"tb-bsh-persona__dot\" aria-hidden=\"true\"><\/span>\n              <span class=\"tb-bsh-persona__name\">Profi<\/span>\n              <span class=\"tb-bsh-persona__tag\">sachlich, pr\u00e4zise, wenig Schnickschnack<\/span>\n            <\/button>\n                      <button type=\"button\" class=\"tb-bsh-persona\" data-bsh-persona=\"playful\"\n                    style=\"--persona-color: #FF6BCB;\">\n              <span class=\"tb-bsh-persona__dot\" aria-hidden=\"true\"><\/span>\n              <span class=\"tb-bsh-persona__name\">Verspielt<\/span>\n              <span class=\"tb-bsh-persona__tag\">viele Symbole, viele Bewegungen, st\u00e4ndig in Action<\/span>\n            <\/button>\n                      <button type=\"button\" class=\"tb-bsh-persona\" data-bsh-persona=\"poet\"\n                    style=\"--persona-color: #A78BFA;\">\n              <span class=\"tb-bsh-persona__dot\" aria-hidden=\"true\"><\/span>\n              <span class=\"tb-bsh-persona__name\">Poet<\/span>\n              <span class=\"tb-bsh-persona__tag\">Metaphern, Bilder, ungew\u00f6hnliche Wortwahl<\/span>\n            <\/button>\n                  <\/div>\n      <\/div>\n    <\/section>\n    \n    <section class=\"tb-bsh-section\">\n      <div class=\"tb-container\">\n        <header class=\"tb-bsh-section__head\">\n          <span class=\"tb-eyebrow\">Langes Gespr\u00e4ch<\/span>\n          <h2>Hier siehst du auch, welche Action-Tags ich raussende.<\/h2>\n          <p>History bleibt nur im Browser (localStorage).<\/p>\n        <\/header>\n        <div class=\"tb-bsh-chat\" data-bsh-chat>\n          <div class=\"tb-bsh-chat__log\" data-bsh-chat-log role=\"log\" aria-live=\"polite\"><\/div>\n          <form class=\"tb-bsh-chat__form\" data-bsh-chat-form>\n            <textarea class=\"tb-bsh-chat__input\" data-bsh-chat-input\n                      rows=\"2\" maxlength=\"500\"\n                      placeholder=\"Sag mir was, ich antworte und du siehst meine Action-Tags rechts.\"\n                      aria-label=\"Nachricht\"><\/textarea>\n            <button type=\"submit\" class=\"tb-btn tb-btn--primary\" data-bsh-chat-send>Senden<\/button>\n          <\/form>\n          <div class=\"tb-bsh-chat__footer\">\n            <button type=\"button\" class=\"tb-btn tb-btn--ghost tb-bsh-chat__clear\" data-bsh-chat-clear>History l\u00f6schen<\/button>\n            <div class=\"tb-bsh-chat__mode\" data-bsh-chat-mode-wrap hidden>\n              <span class=\"tb-bsh-chat__mode-lab\">Modus:<\/span>\n              <label class=\"tb-bsh-chat__mode-opt\">\n                <input type=\"radio\" name=\"tb-bsh-mode\" value=\"local\" checked>\n                <span>\ud83d\udc0c Lokal \u00b7 langsam \u00b7 0 \u20ac<\/span>\n              <\/label>\n              <label class=\"tb-bsh-chat__mode-opt\">\n                <input type=\"radio\" name=\"tb-bsh-mode\" value=\"cloud\">\n                <span>\u26a1 Cloud \u00b7 schnell \u00b7 ~Cent<\/span>\n              <\/label>\n            <\/div>\n            <span class=\"tb-bsh-chat__count\" data-bsh-chat-count>0 Nachrichten<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n    \n    <section class=\"tb-bsh-section tb-bsh-section--alt\">\n      <div class=\"tb-container\">\n        <header class=\"tb-bsh-section__head\">\n          <span class=\"tb-eyebrow\">Arena<\/span>\n          <h2>Eine Frage, drei Pers\u00f6nlichkeiten, gleichzeitig.<\/h2>\n          <p>Schreib eine Frage unten, alle Butler antworten parallel mit ihrer eigenen Persona.<\/p>\n        <\/header>\n\n        <form class=\"tb-bsh-arena__form\" data-bsh-arena-form>\n          <input class=\"tb-bsh-arena__input\" type=\"text\" maxlength=\"200\"\n                 placeholder=\"Frag uns drei was. Wir antworten alle.\"\n                 data-bsh-arena-input aria-label=\"Frage an die Arena\">\n          <button type=\"submit\" class=\"tb-btn tb-btn--primary\" data-bsh-arena-send>Frag uns alle<\/button>\n        <\/form>\n\n        <div class=\"tb-bsh-arena tb-bsh-arena--3cols\" data-bsh-arena>\n                      <div class=\"tb-bsh-arena__slot\" data-bsh-arena-slot data-persona=\"default\">\n              <header class=\"tb-bsh-arena__head\">\n                <span class=\"tb-bsh-arena__dot\" style=\"background: #18C6E6\"><\/span>\n                <strong>B\u00fcrohund<\/strong>\n                <span class=\"tb-bsh-arena__tag\">charmant, knapp, leicht keck<\/span>\n              <\/header>\n              <div class=\"tb-bsh-arena__butler\">\n                        <div class=\"tb-butler tb-butler--sm\"\n             id=\"tb-butler-arena-0\"\n             data-tb-butler data-persona=\"default\"\n             data-mood=\"friendly\"\n             role=\"button\"\n             tabindex=\"0\"\n             aria-label=\"Butler AI, Klick zum Chat\">\n          <svg class=\"tb-butler__svg\" viewBox=\"0 0 200 220\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n            <line x1=\"78\" y1=\"8\" x2=\"78\" y2=\"24\" stroke=\"#7E8AAA\" stroke-width=\"1.75\" stroke-linecap=\"round\" \/>\n            <circle class=\"tb-butler__antenna\" cx=\"78\" cy=\"8\" r=\"3.5\" fill=\"#18C6E6\" \/>\n\n            <rect x=\"84\" y=\"192\" width=\"32\" height=\"11\" rx=\"2\" fill=\"#A6B3CC\" \/>\n            <rect x=\"74\" y=\"201\" width=\"52\" height=\"6\" rx=\"2\" fill=\"#8A98B8\" \/>\n\n            <rect class=\"tb-butler__housing\"\n                  x=\"22\" y=\"24\" width=\"156\" height=\"166\" rx=\"20\" ry=\"20\"\n                  fill=\"url(#tb-butler-housing-grad-tb-butler-arena-0)\"\n                  stroke=\"#8A98B8\" stroke-width=\"1\" \/>\n            <rect x=\"28\" y=\"30\" width=\"144\" height=\"4\" rx=\"2\" fill=\"rgba(255,255,255,0.32)\" \/>\n\n            <rect class=\"tb-butler__display\"\n                  x=\"32\" y=\"44\" width=\"136\" height=\"118\" rx=\"9\" ry=\"9\"\n                  fill=\"#08101F\" \/>\n            <rect x=\"32\" y=\"44\" width=\"136\" height=\"118\" rx=\"9\" ry=\"9\"\n                  fill=\"none\" stroke=\"#1B2238\" stroke-width=\"0.8\" opacity=\"0.7\" \/>\n            <rect x=\"38\" y=\"48\" width=\"50\" height=\"2\" rx=\"1\" fill=\"rgba(255,255,255,0.05)\" \/>\n\n            <text x=\"100\" y=\"178\" text-anchor=\"middle\"\n                  font-family=\"ui-monospace, 'SF Mono', Monaco, monospace\"\n                  font-size=\"9\" font-weight=\"800\"\n                  fill=\"rgba(34, 41, 62, 0.78)\" letter-spacing=\"1.2\">\n              BUTLER&#160;AI\n            <\/text>\n            <text x=\"100\" y=\"188.5\" text-anchor=\"middle\"\n                  font-family=\"ui-monospace, 'SF Mono', Monaco, monospace\"\n                  font-size=\"6\" font-weight=\"600\"\n                  fill=\"rgba(34, 41, 62, 0.62)\" letter-spacing=\"0.9\">\n              TB-SOFTWARE\n            <\/text>\n\n            <g class=\"tb-butler__face\" data-butler-face\n               transform=\"translate(32, 44) scale(0.461)\"\n               style=\"color: var(--tb-butler-cyan);\">\n              <g id=\"eyes\"><path d=\"M74 116 Q92 104 110 116\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"6\" stroke-linecap=\"round\"\/><path d=\"M146 116 Q164 104 182 116\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"6\" stroke-linecap=\"round\"\/><\/g>\n              <g id=\"mouth\"><path d=\"M96 178 Q128 196 160 178\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"6\" stroke-linecap=\"round\"\/><\/g>\n            <\/g>\n\n            <circle class=\"tb-butler__online-dot\" cx=\"160\" cy=\"156\" r=\"2.8\" fill=\"#10B981\" \/>\n\n            <defs>\n              <linearGradient id=\"tb-butler-housing-grad-tb-butler-arena-0\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\"   stop-color=\"#C9D3E6\" \/>\n                <stop offset=\"50%\"  stop-color=\"#9FAFCD\" \/>\n                <stop offset=\"100%\" stop-color=\"#7B8DB3\" \/>\n              <\/linearGradient>\n            <\/defs>\n          <\/svg>\n\n          <!-- Klick-Hint: erscheint kurz nach Page-Load f\u00fcr 5s mit Pulse-\n               Effekt um neuen Besuchern zu zeigen, dass der Butler interaktiv\n               ist. Verschwindet auch sofort bei erstem Hover\/Klick. JS toggelt\n               .is-visible an. -->\n          <!-- Klick-Hint sitzt LINKS vom Butler (vgl. butler.css), Pfeil zeigt\n               nach rechts \u2192 Richtung Roboter. Hand-hoch-Emoji w\u00e4re verwirrend\n               weil der Hint horizontal nicht vertikal ausgerichtet ist. -->\n          <div class=\"tb-butler__clickhint\" data-butler-clickhint aria-hidden=\"true\">\n            <span>Klick mich \u2192<\/span>\n          <\/div>\n\n          <div class=\"tb-butler__bubble\" data-butler-bubble role=\"status\" aria-live=\"polite\" hidden>\n            <div class=\"tb-butler__bubble-text\" data-butler-bubble-text><\/div>\n            <form class=\"tb-butler__inline-form\" data-butler-inline-form hidden>\n              <input class=\"tb-butler__inline-input\"\n                     data-butler-inline-input\n                     type=\"text\"\n                     maxlength=\"300\"\n                     placeholder=\"Antwort?\"\n                     aria-label=\"Antwort an Butler\"\n                     autocomplete=\"off\">\n              <button type=\"button\" class=\"tb-speech-btn tb-butler__mic\"\n                      data-butler-mic\n                      aria-label=\"Spracheingabe starten\" title=\"Spracheingabe starten\" aria-pressed=\"false\" hidden>\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"9\" y=\"2\" width=\"6\" height=\"12\" rx=\"3\"\/><path d=\"M5 10v2a7 7 0 0 0 14 0v-2\"\/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"22\"\/><\/svg>\n              <\/button>\n            <\/form>\n          <\/div>\n        <\/div>\n                      <\/div>\n              <div class=\"tb-bsh-arena__answer\" data-bsh-arena-answer><\/div>\n              <div class=\"tb-bsh-arena__meta\" data-bsh-arena-meta>bereit<\/div>\n            <\/div>\n                      <div class=\"tb-bsh-arena__slot\" data-bsh-arena-slot data-persona=\"playful\">\n              <header class=\"tb-bsh-arena__head\">\n                <span class=\"tb-bsh-arena__dot\" style=\"background: #FF6BCB\"><\/span>\n                <strong>Verspielt<\/strong>\n                <span class=\"tb-bsh-arena__tag\">viele Symbole, viele Bewegungen, st\u00e4ndig in Action<\/span>\n              <\/header>\n              <div class=\"tb-bsh-arena__butler\">\n                        <div class=\"tb-butler tb-butler--sm\"\n             id=\"tb-butler-arena-1\"\n             data-tb-butler data-persona=\"playful\"\n             data-mood=\"friendly\"\n             role=\"button\"\n             tabindex=\"0\"\n             aria-label=\"Butler AI, Klick zum Chat\">\n          <svg class=\"tb-butler__svg\" viewBox=\"0 0 200 220\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n            <line x1=\"78\" y1=\"8\" x2=\"78\" y2=\"24\" stroke=\"#7E8AAA\" stroke-width=\"1.75\" stroke-linecap=\"round\" \/>\n            <circle class=\"tb-butler__antenna\" cx=\"78\" cy=\"8\" r=\"3.5\" fill=\"#18C6E6\" \/>\n\n            <rect x=\"84\" y=\"192\" width=\"32\" height=\"11\" rx=\"2\" fill=\"#A6B3CC\" \/>\n            <rect x=\"74\" y=\"201\" width=\"52\" height=\"6\" rx=\"2\" fill=\"#8A98B8\" \/>\n\n            <rect class=\"tb-butler__housing\"\n                  x=\"22\" y=\"24\" width=\"156\" height=\"166\" rx=\"20\" ry=\"20\"\n                  fill=\"url(#tb-butler-housing-grad-tb-butler-arena-1)\"\n                  stroke=\"#8A98B8\" stroke-width=\"1\" \/>\n            <rect x=\"28\" y=\"30\" width=\"144\" height=\"4\" rx=\"2\" fill=\"rgba(255,255,255,0.32)\" \/>\n\n            <rect class=\"tb-butler__display\"\n                  x=\"32\" y=\"44\" width=\"136\" height=\"118\" rx=\"9\" ry=\"9\"\n                  fill=\"#08101F\" \/>\n            <rect x=\"32\" y=\"44\" width=\"136\" height=\"118\" rx=\"9\" ry=\"9\"\n                  fill=\"none\" stroke=\"#1B2238\" stroke-width=\"0.8\" opacity=\"0.7\" \/>\n            <rect x=\"38\" y=\"48\" width=\"50\" height=\"2\" rx=\"1\" fill=\"rgba(255,255,255,0.05)\" \/>\n\n            <text x=\"100\" y=\"178\" text-anchor=\"middle\"\n                  font-family=\"ui-monospace, 'SF Mono', Monaco, monospace\"\n                  font-size=\"9\" font-weight=\"800\"\n                  fill=\"rgba(34, 41, 62, 0.78)\" letter-spacing=\"1.2\">\n              BUTLER&#160;AI\n            <\/text>\n            <text x=\"100\" y=\"188.5\" text-anchor=\"middle\"\n                  font-family=\"ui-monospace, 'SF Mono', Monaco, monospace\"\n                  font-size=\"6\" font-weight=\"600\"\n                  fill=\"rgba(34, 41, 62, 0.62)\" letter-spacing=\"0.9\">\n              TB-SOFTWARE\n            <\/text>\n\n            <g class=\"tb-butler__face\" data-butler-face\n               transform=\"translate(32, 44) scale(0.461)\"\n               style=\"color: var(--tb-butler-cyan);\">\n              <g id=\"eyes\"><path d=\"M74 116 Q92 104 110 116\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"6\" stroke-linecap=\"round\"\/><path d=\"M146 116 Q164 104 182 116\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"6\" stroke-linecap=\"round\"\/><\/g>\n              <g id=\"mouth\"><path d=\"M96 178 Q128 196 160 178\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"6\" stroke-linecap=\"round\"\/><\/g>\n            <\/g>\n\n            <circle class=\"tb-butler__online-dot\" cx=\"160\" cy=\"156\" r=\"2.8\" fill=\"#10B981\" \/>\n\n            <defs>\n              <linearGradient id=\"tb-butler-housing-grad-tb-butler-arena-1\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\"   stop-color=\"#C9D3E6\" \/>\n                <stop offset=\"50%\"  stop-color=\"#9FAFCD\" \/>\n                <stop offset=\"100%\" stop-color=\"#7B8DB3\" \/>\n              <\/linearGradient>\n            <\/defs>\n          <\/svg>\n\n          <!-- Klick-Hint: erscheint kurz nach Page-Load f\u00fcr 5s mit Pulse-\n               Effekt um neuen Besuchern zu zeigen, dass der Butler interaktiv\n               ist. Verschwindet auch sofort bei erstem Hover\/Klick. JS toggelt\n               .is-visible an. -->\n          <!-- Klick-Hint sitzt LINKS vom Butler (vgl. butler.css), Pfeil zeigt\n               nach rechts \u2192 Richtung Roboter. Hand-hoch-Emoji w\u00e4re verwirrend\n               weil der Hint horizontal nicht vertikal ausgerichtet ist. -->\n          <div class=\"tb-butler__clickhint\" data-butler-clickhint aria-hidden=\"true\">\n            <span>Klick mich \u2192<\/span>\n          <\/div>\n\n          <div class=\"tb-butler__bubble\" data-butler-bubble role=\"status\" aria-live=\"polite\" hidden>\n            <div class=\"tb-butler__bubble-text\" data-butler-bubble-text><\/div>\n            <form class=\"tb-butler__inline-form\" data-butler-inline-form hidden>\n              <input class=\"tb-butler__inline-input\"\n                     data-butler-inline-input\n                     type=\"text\"\n                     maxlength=\"300\"\n                     placeholder=\"Antwort?\"\n                     aria-label=\"Antwort an Butler\"\n                     autocomplete=\"off\">\n              <button type=\"button\" class=\"tb-speech-btn tb-butler__mic\"\n                      data-butler-mic\n                      aria-label=\"Spracheingabe starten\" title=\"Spracheingabe starten\" aria-pressed=\"false\" hidden>\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"9\" y=\"2\" width=\"6\" height=\"12\" rx=\"3\"\/><path d=\"M5 10v2a7 7 0 0 0 14 0v-2\"\/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"22\"\/><\/svg>\n              <\/button>\n            <\/form>\n          <\/div>\n        <\/div>\n                      <\/div>\n              <div class=\"tb-bsh-arena__answer\" data-bsh-arena-answer><\/div>\n              <div class=\"tb-bsh-arena__meta\" data-bsh-arena-meta>bereit<\/div>\n            <\/div>\n                      <div class=\"tb-bsh-arena__slot\" data-bsh-arena-slot data-persona=\"formal\">\n              <header class=\"tb-bsh-arena__head\">\n                <span class=\"tb-bsh-arena__dot\" style=\"background: #3F4F71\"><\/span>\n                <strong>Profi<\/strong>\n                <span class=\"tb-bsh-arena__tag\">sachlich, pr\u00e4zise, wenig Schnickschnack<\/span>\n              <\/header>\n              <div class=\"tb-bsh-arena__butler\">\n                        <div class=\"tb-butler tb-butler--sm\"\n             id=\"tb-butler-arena-2\"\n             data-tb-butler data-persona=\"formal\"\n             data-mood=\"friendly\"\n             role=\"button\"\n             tabindex=\"0\"\n             aria-label=\"Butler AI, Klick zum Chat\">\n          <svg class=\"tb-butler__svg\" viewBox=\"0 0 200 220\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n            <line x1=\"78\" y1=\"8\" x2=\"78\" y2=\"24\" stroke=\"#7E8AAA\" stroke-width=\"1.75\" stroke-linecap=\"round\" \/>\n            <circle class=\"tb-butler__antenna\" cx=\"78\" cy=\"8\" r=\"3.5\" fill=\"#18C6E6\" \/>\n\n            <rect x=\"84\" y=\"192\" width=\"32\" height=\"11\" rx=\"2\" fill=\"#A6B3CC\" \/>\n            <rect x=\"74\" y=\"201\" width=\"52\" height=\"6\" rx=\"2\" fill=\"#8A98B8\" \/>\n\n            <rect class=\"tb-butler__housing\"\n                  x=\"22\" y=\"24\" width=\"156\" height=\"166\" rx=\"20\" ry=\"20\"\n                  fill=\"url(#tb-butler-housing-grad-tb-butler-arena-2)\"\n                  stroke=\"#8A98B8\" stroke-width=\"1\" \/>\n            <rect x=\"28\" y=\"30\" width=\"144\" height=\"4\" rx=\"2\" fill=\"rgba(255,255,255,0.32)\" \/>\n\n            <rect class=\"tb-butler__display\"\n                  x=\"32\" y=\"44\" width=\"136\" height=\"118\" rx=\"9\" ry=\"9\"\n                  fill=\"#08101F\" \/>\n            <rect x=\"32\" y=\"44\" width=\"136\" height=\"118\" rx=\"9\" ry=\"9\"\n                  fill=\"none\" stroke=\"#1B2238\" stroke-width=\"0.8\" opacity=\"0.7\" \/>\n            <rect x=\"38\" y=\"48\" width=\"50\" height=\"2\" rx=\"1\" fill=\"rgba(255,255,255,0.05)\" \/>\n\n            <text x=\"100\" y=\"178\" text-anchor=\"middle\"\n                  font-family=\"ui-monospace, 'SF Mono', Monaco, monospace\"\n                  font-size=\"9\" font-weight=\"800\"\n                  fill=\"rgba(34, 41, 62, 0.78)\" letter-spacing=\"1.2\">\n              BUTLER&#160;AI\n            <\/text>\n            <text x=\"100\" y=\"188.5\" text-anchor=\"middle\"\n                  font-family=\"ui-monospace, 'SF Mono', Monaco, monospace\"\n                  font-size=\"6\" font-weight=\"600\"\n                  fill=\"rgba(34, 41, 62, 0.62)\" letter-spacing=\"0.9\">\n              TB-SOFTWARE\n            <\/text>\n\n            <g class=\"tb-butler__face\" data-butler-face\n               transform=\"translate(32, 44) scale(0.461)\"\n               style=\"color: var(--tb-butler-cyan);\">\n              <g id=\"eyes\"><path d=\"M74 116 Q92 104 110 116\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"6\" stroke-linecap=\"round\"\/><path d=\"M146 116 Q164 104 182 116\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"6\" stroke-linecap=\"round\"\/><\/g>\n              <g id=\"mouth\"><path d=\"M96 178 Q128 196 160 178\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"6\" stroke-linecap=\"round\"\/><\/g>\n            <\/g>\n\n            <circle class=\"tb-butler__online-dot\" cx=\"160\" cy=\"156\" r=\"2.8\" fill=\"#10B981\" \/>\n\n            <defs>\n              <linearGradient id=\"tb-butler-housing-grad-tb-butler-arena-2\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\"   stop-color=\"#C9D3E6\" \/>\n                <stop offset=\"50%\"  stop-color=\"#9FAFCD\" \/>\n                <stop offset=\"100%\" stop-color=\"#7B8DB3\" \/>\n              <\/linearGradient>\n            <\/defs>\n          <\/svg>\n\n          <!-- Klick-Hint: erscheint kurz nach Page-Load f\u00fcr 5s mit Pulse-\n               Effekt um neuen Besuchern zu zeigen, dass der Butler interaktiv\n               ist. Verschwindet auch sofort bei erstem Hover\/Klick. JS toggelt\n               .is-visible an. -->\n          <!-- Klick-Hint sitzt LINKS vom Butler (vgl. butler.css), Pfeil zeigt\n               nach rechts \u2192 Richtung Roboter. Hand-hoch-Emoji w\u00e4re verwirrend\n               weil der Hint horizontal nicht vertikal ausgerichtet ist. -->\n          <div class=\"tb-butler__clickhint\" data-butler-clickhint aria-hidden=\"true\">\n            <span>Klick mich \u2192<\/span>\n          <\/div>\n\n          <div class=\"tb-butler__bubble\" data-butler-bubble role=\"status\" aria-live=\"polite\" hidden>\n            <div class=\"tb-butler__bubble-text\" data-butler-bubble-text><\/div>\n            <form class=\"tb-butler__inline-form\" data-butler-inline-form hidden>\n              <input class=\"tb-butler__inline-input\"\n                     data-butler-inline-input\n                     type=\"text\"\n                     maxlength=\"300\"\n                     placeholder=\"Antwort?\"\n                     aria-label=\"Antwort an Butler\"\n                     autocomplete=\"off\">\n              <button type=\"button\" class=\"tb-speech-btn tb-butler__mic\"\n                      data-butler-mic\n                      aria-label=\"Spracheingabe starten\" title=\"Spracheingabe starten\" aria-pressed=\"false\" hidden>\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"9\" y=\"2\" width=\"6\" height=\"12\" rx=\"3\"\/><path d=\"M5 10v2a7 7 0 0 0 14 0v-2\"\/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"22\"\/><\/svg>\n              <\/button>\n            <\/form>\n          <\/div>\n        <\/div>\n                      <\/div>\n              <div class=\"tb-bsh-arena__answer\" data-bsh-arena-answer><\/div>\n              <div class=\"tb-bsh-arena__meta\" data-bsh-arena-meta>bereit<\/div>\n            <\/div>\n                  <\/div>\n      <\/div>\n    <\/section>\n    \n    <section class=\"tb-bsh-section\">\n      <div class=\"tb-container\">\n        <header class=\"tb-bsh-section__head\">\n          <span class=\"tb-eyebrow\">Dein eigener Butler<\/span>\n          <h2>Bau dir deine Version.<\/h2>\n          <p>Name, Akzentfarbe und Pers\u00f6nlichkeit. Bleibt im Browser.<\/p>\n        <\/header>\n        <div class=\"tb-bsh-my\" data-bsh-my>\n          <form class=\"tb-bsh-my__form\">\n            <label class=\"tb-bsh-my__field\">\n              <span>Name<\/span>\n              <input type=\"text\" maxlength=\"24\" data-bsh-my-name placeholder=\"z. B. Pixel\" value=\"\">\n            <\/label>\n            <label class=\"tb-bsh-my__field\">\n              <span>Akzentfarbe<\/span>\n              <input type=\"color\" data-bsh-my-color value=\"#18C6E6\">\n            <\/label>\n            <label class=\"tb-bsh-my__field\">\n              <span>Pers\u00f6nlichkeit<\/span>\n              <select data-bsh-my-persona>\n                                  <option value=\"default\">B\u00fcrohund<\/option>\n                                  <option value=\"formal\">Profi<\/option>\n                                  <option value=\"playful\">Verspielt<\/option>\n                                  <option value=\"poet\">Poet<\/option>\n                              <\/select>\n            <\/label>\n            <button type=\"button\" class=\"tb-btn tb-btn--primary\" data-bsh-my-save>Speichern<\/button>\n            <button type=\"button\" class=\"tb-btn tb-btn--ghost\"   data-bsh-my-reset>Zur\u00fccksetzen<\/button>\n          <\/form>\n          <div class=\"tb-bsh-my__preview\">\n                    <div class=\"tb-butler tb-butler--lg\"\n             id=\"tb-butler-my-butler\"\n             data-tb-butler\n             data-mood=\"friendly\"\n             role=\"button\"\n             tabindex=\"0\"\n             aria-label=\"Butler AI, Klick zum Chat\">\n          <svg class=\"tb-butler__svg\" viewBox=\"0 0 200 220\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n            <line x1=\"78\" y1=\"8\" x2=\"78\" y2=\"24\" stroke=\"#7E8AAA\" stroke-width=\"1.75\" stroke-linecap=\"round\" \/>\n            <circle class=\"tb-butler__antenna\" cx=\"78\" cy=\"8\" r=\"3.5\" fill=\"#18C6E6\" \/>\n\n            <rect x=\"84\" y=\"192\" width=\"32\" height=\"11\" rx=\"2\" fill=\"#A6B3CC\" \/>\n            <rect x=\"74\" y=\"201\" width=\"52\" height=\"6\" rx=\"2\" fill=\"#8A98B8\" \/>\n\n            <rect class=\"tb-butler__housing\"\n                  x=\"22\" y=\"24\" width=\"156\" height=\"166\" rx=\"20\" ry=\"20\"\n                  fill=\"url(#tb-butler-housing-grad-tb-butler-my-butler)\"\n                  stroke=\"#8A98B8\" stroke-width=\"1\" \/>\n            <rect x=\"28\" y=\"30\" width=\"144\" height=\"4\" rx=\"2\" fill=\"rgba(255,255,255,0.32)\" \/>\n\n            <rect class=\"tb-butler__display\"\n                  x=\"32\" y=\"44\" width=\"136\" height=\"118\" rx=\"9\" ry=\"9\"\n                  fill=\"#08101F\" \/>\n            <rect x=\"32\" y=\"44\" width=\"136\" height=\"118\" rx=\"9\" ry=\"9\"\n                  fill=\"none\" stroke=\"#1B2238\" stroke-width=\"0.8\" opacity=\"0.7\" \/>\n            <rect x=\"38\" y=\"48\" width=\"50\" height=\"2\" rx=\"1\" fill=\"rgba(255,255,255,0.05)\" \/>\n\n            <text x=\"100\" y=\"178\" text-anchor=\"middle\"\n                  font-family=\"ui-monospace, 'SF Mono', Monaco, monospace\"\n                  font-size=\"9\" font-weight=\"800\"\n                  fill=\"rgba(34, 41, 62, 0.78)\" letter-spacing=\"1.2\">\n              BUTLER&#160;AI\n            <\/text>\n            <text x=\"100\" y=\"188.5\" text-anchor=\"middle\"\n                  font-family=\"ui-monospace, 'SF Mono', Monaco, monospace\"\n                  font-size=\"6\" font-weight=\"600\"\n                  fill=\"rgba(34, 41, 62, 0.62)\" letter-spacing=\"0.9\">\n              TB-SOFTWARE\n            <\/text>\n\n            <g class=\"tb-butler__face\" data-butler-face\n               transform=\"translate(32, 44) scale(0.461)\"\n               style=\"color: var(--tb-butler-cyan);\">\n              <g id=\"eyes\"><path d=\"M74 116 Q92 104 110 116\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"6\" stroke-linecap=\"round\"\/><path d=\"M146 116 Q164 104 182 116\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"6\" stroke-linecap=\"round\"\/><\/g>\n              <g id=\"mouth\"><path d=\"M96 178 Q128 196 160 178\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"6\" stroke-linecap=\"round\"\/><\/g>\n            <\/g>\n\n            <circle class=\"tb-butler__online-dot\" cx=\"160\" cy=\"156\" r=\"2.8\" fill=\"#10B981\" \/>\n\n            <defs>\n              <linearGradient id=\"tb-butler-housing-grad-tb-butler-my-butler\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\"   stop-color=\"#C9D3E6\" \/>\n                <stop offset=\"50%\"  stop-color=\"#9FAFCD\" \/>\n                <stop offset=\"100%\" stop-color=\"#7B8DB3\" \/>\n              <\/linearGradient>\n            <\/defs>\n          <\/svg>\n\n          <!-- Klick-Hint: erscheint kurz nach Page-Load f\u00fcr 5s mit Pulse-\n               Effekt um neuen Besuchern zu zeigen, dass der Butler interaktiv\n               ist. Verschwindet auch sofort bei erstem Hover\/Klick. JS toggelt\n               .is-visible an. -->\n          <!-- Klick-Hint sitzt LINKS vom Butler (vgl. butler.css), Pfeil zeigt\n               nach rechts \u2192 Richtung Roboter. Hand-hoch-Emoji w\u00e4re verwirrend\n               weil der Hint horizontal nicht vertikal ausgerichtet ist. -->\n          <div class=\"tb-butler__clickhint\" data-butler-clickhint aria-hidden=\"true\">\n            <span>Klick mich \u2192<\/span>\n          <\/div>\n\n          <div class=\"tb-butler__bubble\" data-butler-bubble role=\"status\" aria-live=\"polite\" hidden>\n            <div class=\"tb-butler__bubble-text\" data-butler-bubble-text><\/div>\n            <form class=\"tb-butler__inline-form\" data-butler-inline-form hidden>\n              <input class=\"tb-butler__inline-input\"\n                     data-butler-inline-input\n                     type=\"text\"\n                     maxlength=\"300\"\n                     placeholder=\"Antwort?\"\n                     aria-label=\"Antwort an Butler\"\n                     autocomplete=\"off\">\n              <button type=\"button\" class=\"tb-speech-btn tb-butler__mic\"\n                      data-butler-mic\n                      aria-label=\"Spracheingabe starten\" title=\"Spracheingabe starten\" aria-pressed=\"false\" hidden>\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"9\" y=\"2\" width=\"6\" height=\"12\" rx=\"3\"\/><path d=\"M5 10v2a7 7 0 0 0 14 0v-2\"\/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"22\"\/><\/svg>\n              <\/button>\n            <\/form>\n          <\/div>\n        <\/div>\n                    <p class=\"tb-bsh-my__name-display\" data-bsh-my-name-display><\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n    \n    <section class=\"tb-bsh-section tb-bsh-section--alt\">\n      <div class=\"tb-container\">\n        <header class=\"tb-bsh-section__head\">\n          <span class=\"tb-eyebrow\">Wie ich gebaut bin<\/span>\n          <h2>Kein Geheimnis, alles SVG, JS und ein lokales Sprachmodell.<\/h2>\n        <\/header>\n        <div class=\"tb-bsh-insights\">\n          <article>\n            <h3>SVG-Display mit 49 Faces<\/h3>\n            <p>Jede Emotion ist ein eigenes <code>&lt;g id=\"face\"&gt;<\/code>-Snippet,\n               das ich beim Wechsel im Display austausche. Skalierbar, klein, schnell.<\/p>\n          <\/article>\n          <article>\n            <h3>Lokales Sprachmodell<\/h3>\n            <p>Alle Antworten kommen \u00fcber einen Schweizer LLMProxy aus eigener\n               Hardware, kein externes API-Konto, keine Token-Rechnung am Monatsende.<\/p>\n          <\/article>\n          <article>\n            <h3>Action-Protokoll<\/h3>\n            <p>Die KI darf am Antwort-Ende Steuerungs-Tags wie\n               <code>[mood:joy]<\/code> oder <code>[anim:spin]<\/code> setzen. Mein JS\n               extrahiert sie und f\u00fchrt sie auf dem Display aus.<\/p>\n          <\/article>\n          <article>\n            <h3>10 Idle-Verhalten<\/h3>\n            <p>Zwinkern, G\u00e4hnen, Umschauen, ein Wort denken, ein Symbol einblenden \u2026\n               Wenn niemand interagiert, l\u00e4uft alle ~10 s eine andere Mini-Aktion.<\/p>\n          <\/article>\n          <article>\n            <h3>4 Personas<\/h3>\n            <p>B\u00fcrohund, Profi, Verspielt, Poet, jede ist eine kurze JSON-Datei mit\n               System-Prompt und Default-Mood. Neue Persona = neue Datei.<\/p>\n          <\/article>\n          <article>\n            <h3>Plugin-Architektur<\/h3>\n            <p>Engine als <code>window.TbButler<\/code>, Showcase-Komponenten konsumieren\n               nur die API. Du k\u00f6nntest deinen eigenen Roboter bauen, gleicher Stack.<\/p>\n          <\/article>\n        <\/div>\n      <\/div>\n    <\/section>\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":0,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-60","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.tb-software.ch\/ai\/index.php?rest_route=\/wp\/v2\/pages\/60","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tb-software.ch\/ai\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.tb-software.ch\/ai\/index.php?rest_route=\/wp\/v2\/types\/page"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tb-software.ch\/ai\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=60"}],"version-history":[{"count":1,"href":"https:\/\/www.tb-software.ch\/ai\/index.php?rest_route=\/wp\/v2\/pages\/60\/revisions"}],"predecessor-version":[{"id":61,"href":"https:\/\/www.tb-software.ch\/ai\/index.php?rest_route=\/wp\/v2\/pages\/60\/revisions\/61"}],"wp:attachment":[{"href":"https:\/\/www.tb-software.ch\/ai\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=60"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}