{"id":4361,"date":"2024-11-14T16:28:44","date_gmt":"2024-11-14T15:28:44","guid":{"rendered":"https:\/\/fahrtauglich.ch\/?page_id=4361"},"modified":"2026-10-12T12:24:43","modified_gmt":"2026-10-12T10:24:43","slug":"buchstabensalat","status":"publish","type":"page","link":"https:\/\/fahrtauglich.ch\/fr\/praxisportal\/buchstabensalat\/","title":{"rendered":"Salade de lettres"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4361\" class=\"elementor elementor-4361\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-279daf0 e-flex e-con-boxed e-con e-parent\" data-id=\"279daf0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1f2f64f elementor-widget elementor-widget-html\" data-id=\"1f2f64f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!--\r\n    Buchstabensalat \u2014 fahrtauglich.ch\/praxisportal\/buchstabensalat\/\r\n    Einbau: Inhalt dieser Datei vollstaendig in EIN Elementor-HTML-Widget einfuegen.\r\n    Das Snippet deckt die ganze Seite zwischen Header und Footer ab (Titel,\r\n    Einleitung mit Link auf trainmybrain.ch, Spiel, Spielanleitung, Texte).\r\n    Alle uebrigen Elementor-Widgets der Seite werden geloescht. Kein\r\n    <html>\/<head>\/<body>: Header und Footer liefert das Theme.\r\n\r\n    Grundlage: trainmybrain-buchstabensalat.html. Spiellogik 2026-10-12 neu\r\n    aufgebaut (Entscheide User): Woerter vom ersten zum letzten Buchstaben\r\n    markieren (ziehen oder antippen), Wortliste bei Einfach\/Mittel. Behoben:\r\n      - Woerter fielen bei der Platzierung still weg (18-36 % der Raetsel)\r\n      - alle Felder anklicken \u00abfand\u00bb alle Woerter\r\n      - Woerter mit gemeinsamem Feld waren kaum abzuschliessen\r\n    Jedes gesuchte Wort steht genau einmal im Raster; kein anderes Wort der\r\n    Kategorie entsteht zufaellig in den Fuellbuchstaben.\r\n\r\n    Optik: fahrtauglich.ch \u2014 Poppins, Gelb #FFBF00, Flaechen #F3F5F8, Pill-Buttons.\r\n    Alles CSS haengt an #ftb, damit nichts in die Elementor-Seite durchschlaegt.\r\n-->\r\n<style>\r\n    #ftb {\r\n        --ftb-gelb: #FFBF00;\r\n        --ftb-gelb-dunkel: #E6AB00;\r\n        --ftb-gelb-hell: #FFF4CC;\r\n        --ftb-schwarz: #000000;\r\n        --ftb-text: #1F2937;\r\n        --ftb-text-2: #4B5563;\r\n        --ftb-flaeche: #F3F5F8;\r\n        --ftb-linie: #C8D5DC;\r\n        --ftb-gruen: #047857;\r\n        --ftb-fehler: #B91C1C;\r\n        --ftb-zelle: 36px;\r\n\r\n        font-family: 'Poppins', sans-serif;\r\n        color: var(--ftb-text);\r\n        line-height: 1.5;\r\n        width: 100%;\r\n        max-width: 850px;\r\n        margin: 20px auto 60px;\r\n        box-sizing: border-box;\r\n    }\r\n    #ftb *, #ftb *::before, #ftb *::after { box-sizing: border-box; }\r\n    #ftb [hidden] { display: none !important; }\r\n\r\n    \/* ===== Seitenkopf \u2014 Masse wie die bisherigen Elementor-Widgets ===== *\/\r\n    #ftb .ftb-titel {\r\n        margin: 0;\r\n        font-family: inherit;\r\n        font-size: 48px;\r\n        font-weight: 600;\r\n        line-height: 1.2;\r\n        letter-spacing: 0;\r\n        text-align: center;\r\n        color: var(--ftb-schwarz);\r\n    }\r\n    #ftb .ftb-intro {\r\n        max-width: 760px;\r\n        margin: 50px auto 0;\r\n        font-size: 20px;\r\n        font-weight: 300;\r\n        line-height: 1.5;\r\n        text-align: center;\r\n        color: var(--ftb-schwarz);\r\n    }\r\n    \/* Links: schwarz mit gelber Unterstreichung (Gelb als Schrift waere 1.65:1) *\/\r\n    #ftb .ftb-intro a {\r\n        color: var(--ftb-schwarz);\r\n        font-weight: 400;\r\n        text-decoration: underline;\r\n        text-decoration-color: var(--ftb-gelb);\r\n        text-decoration-thickness: 3px;\r\n        text-underline-offset: 3px;\r\n    }\r\n    #ftb .ftb-intro a:hover, #ftb .ftb-intro a:focus { color: var(--ftb-schwarz); background: rgba(255, 191, 0, 0.18); }\r\n    #ftb a:focus-visible { outline: 3px solid var(--ftb-schwarz); outline-offset: 2px; }\r\n\r\n    \/* ===== Spielbereich ===== *\/\r\n    #ftb .ftb-spiel { max-width: 680px; margin: 34px auto 0; text-align: center; }\r\n\r\n    #ftb .ftb-karte {\r\n        position: relative;\r\n        overflow: hidden;\r\n        \/* clip statt hidden: hidden-Container lassen sich per Skript scrollen \u2014\r\n           ein fokussiertes Feld (Pfeiltasten) konnte den Karteninhalt verschieben. *\/\r\n        overflow: clip;\r\n        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\r\n        border: 2px solid #dee2e6;\r\n        border-radius: 20px;\r\n        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);\r\n        padding: 30px;\r\n    }\r\n    #ftb .ftb-karte::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: -50%; left: -50%;\r\n        width: 200%; height: 200%;\r\n        background: radial-gradient(circle, rgba(52, 58, 64, 0.05) 1px, transparent 1px);\r\n        background-size: 30px 30px;\r\n        animation: ftb-hintergrund 25s linear infinite;\r\n        z-index: 0;\r\n        pointer-events: none;\r\n    }\r\n    @keyframes ftb-hintergrund {\r\n        0%   { transform: translate(0, 0) rotate(0deg); }\r\n        100% { transform: translate(-30px, -30px) rotate(360deg); }\r\n    }\r\n    #ftb .ftb-inhalt {\r\n        position: relative;\r\n        z-index: 1;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        gap: 18px;\r\n    }\r\n\r\n    \/* Einstellungen: Kategorie + Schwierigkeit *\/\r\n    #ftb .ftb-einstellungen {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        align-items: flex-end;\r\n        justify-content: center;\r\n        gap: 14px 18px;\r\n    }\r\n    #ftb .ftb-feld { display: flex; flex-direction: column; align-items: center; gap: 6px; }\r\n    #ftb .ftb-feld-label {\r\n        font-size: 0.72rem;\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n        color: var(--ftb-text-2);\r\n    }\r\n    #ftb .ftb-select {\r\n        -webkit-appearance: none;\r\n        appearance: none;\r\n        min-width: 200px;\r\n        min-height: 48px;\r\n        margin: 0;\r\n        padding: 10px 44px 10px 20px;\r\n        background: #ffffff url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'\/%3E%3C\/svg%3E\") no-repeat right 16px center \/ 18px;\r\n        border: 2px solid var(--ftb-schwarz);\r\n        border-radius: 100px;\r\n        font-family: inherit;\r\n        font-size: 1rem;\r\n        font-weight: 500;\r\n        color: var(--ftb-schwarz);\r\n        cursor: pointer;\r\n    }\r\n    #ftb .ftb-select:focus-visible { outline: 3px solid var(--ftb-gelb); outline-offset: 2px; }\r\n    #ftb .ftb-stufen {\r\n        display: inline-flex;\r\n        gap: 0;\r\n        padding: 3px;\r\n        background: #ffffff;\r\n        border: 2px solid var(--ftb-schwarz);\r\n        border-radius: 100px;\r\n    }\r\n    #ftb .ftb-stufe {\r\n        -webkit-appearance: none;\r\n        appearance: none;\r\n        margin: 0;\r\n        min-height: 40px;\r\n        padding: 6px 16px;\r\n        background: transparent;\r\n        border: none;\r\n        border-radius: 100px;\r\n        font-family: inherit;\r\n        font-size: 0.95rem;\r\n        font-weight: 500;\r\n        color: var(--ftb-schwarz);\r\n        cursor: pointer;\r\n    }\r\n    #ftb .ftb-stufe:hover, #ftb .ftb-stufe:focus { background: var(--ftb-flaeche); color: var(--ftb-schwarz); }\r\n    #ftb .ftb-stufe[aria-pressed=\"true\"] { background: var(--ftb-gelb); color: var(--ftb-schwarz); }\r\n\r\n    \/* Status *\/\r\n    #ftb .ftb-status {\r\n        margin: 0;\r\n        font-size: 1.05rem;\r\n        font-weight: 500;\r\n        color: var(--ftb-text);\r\n    }\r\n    #ftb .ftb-status strong { font-weight: 700; font-variant-numeric: tabular-nums; }\r\n\r\n    \/* Raster *\/\r\n    #ftb .ftb-brett { width: 100%; display: flex; justify-content: center; }\r\n    #ftb .ftb-raster {\r\n        display: grid;\r\n        gap: 4px;\r\n        padding: 12px;\r\n        background: rgba(255, 255, 255, 0.85);\r\n        border: 1px solid rgba(0, 0, 0, 0.05);\r\n        border-radius: 15px;\r\n        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n        touch-action: none;              \/* Ziehen ueber das Raster scrollt nicht die Seite *\/\r\n        -webkit-user-select: none;\r\n        user-select: none;\r\n    }\r\n    #ftb .ftb-zelle {\r\n        -webkit-appearance: none;\r\n        appearance: none;\r\n        margin: 0;\r\n        padding: 0;\r\n        width: var(--ftb-zelle);\r\n        height: var(--ftb-zelle);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        background: #ffffff;\r\n        border: 1px solid var(--ftb-linie);\r\n        border-radius: 6px;\r\n        font-family: inherit;\r\n        font-size: calc(var(--ftb-zelle) * 0.46);\r\n        font-weight: 600;\r\n        line-height: 1;\r\n        color: var(--ftb-text);\r\n        cursor: pointer;\r\n        transition: background 0.12s ease, border-color 0.12s ease;\r\n        -webkit-tap-highlight-color: transparent;\r\n    }\r\n    #ftb .ftb-zelle:hover { background: var(--ftb-flaeche); color: var(--ftb-text); }\r\n    #ftb .ftb-zelle:focus-visible { outline: 3px solid var(--ftb-schwarz); outline-offset: 1px; z-index: 1; }\r\n    \/* Zustaende \u2014 Kontraste: schwarz auf Gelb 12.7:1, weiss auf Gruen 5.5:1 *\/\r\n    #ftb .ftb-zelle.gefunden { background: var(--ftb-gruen); border-color: var(--ftb-gruen); color: #ffffff; }\r\n    #ftb .ftb-zelle.loesung  { background: var(--ftb-gelb-hell); border: 2px solid var(--ftb-gelb-dunkel); color: var(--ftb-schwarz); }\r\n    #ftb .ftb-zelle.start    { box-shadow: 0 0 0 3px var(--ftb-schwarz) inset; }\r\n    #ftb .ftb-zelle.auswahl  { background: var(--ftb-gelb); border-color: var(--ftb-gelb-dunkel); color: var(--ftb-schwarz); }\r\n    #ftb .ftb-zelle.falsch   { background: #FDE2E2; border-color: var(--ftb-fehler); color: var(--ftb-fehler); animation: ftb-schuetteln 0.35s ease-in-out; }\r\n    #ftb .ftb-zelle.neu      { animation: ftb-puls 0.45s ease-out; }\r\n    @keyframes ftb-schuetteln { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }\r\n    @keyframes ftb-puls { 0% { transform: scale(1); } 50% { transform: scale(1.18); } 100% { transform: scale(1); } }\r\n\r\n    \/* Wortliste *\/\r\n    #ftb .ftb-woerter {\r\n        list-style: none;\r\n        margin: 0;\r\n        padding: 0;\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        justify-content: center;\r\n        gap: 8px;\r\n        max-width: 560px;\r\n    }\r\n    #ftb .ftb-woerter li {\r\n        margin: 0;\r\n        padding: 4px 12px;\r\n        background: #ffffff;\r\n        border: 1px solid var(--ftb-linie);\r\n        border-radius: 100px;\r\n        font-size: 0.9rem;\r\n        font-weight: 500;\r\n        letter-spacing: 0.04em;\r\n        color: var(--ftb-text);\r\n    }\r\n    #ftb .ftb-woerter li.gefunden { background: var(--ftb-gruen); border-color: var(--ftb-gruen); color: #ffffff; text-decoration: line-through; text-decoration-thickness: 2px; }\r\n    #ftb .ftb-woerter li.gezeigt  { background: var(--ftb-gelb-hell); border-color: var(--ftb-gelb-dunkel); }\r\n    #ftb .ftb-hinweis-schwer { margin: 0; font-size: 0.9rem; color: var(--ftb-text-2); }\r\n\r\n    #ftb .ftb-meldung {\r\n        min-height: 1.5em;\r\n        margin: 0;\r\n        font-size: 1rem;\r\n        font-weight: 500;\r\n        color: var(--ftb-text);\r\n    }\r\n    #ftb .ftb-meldung.fehler { color: var(--ftb-fehler); }\r\n    #ftb .ftb-meldung.erfolg { color: var(--ftb-gruen); }\r\n\r\n    \/* ===== Buttons (Pill-Stil der fahrtauglich.ch-Buttons) ===== *\/\r\n    #ftb .ftb-kontrollen { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }\r\n    #ftb .ftb-knopf {\r\n        -webkit-appearance: none;\r\n        appearance: none;\r\n        margin: 0;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        min-height: 48px;\r\n        padding: 10px 28px;\r\n        background: var(--ftb-gelb);\r\n        border: 2px solid var(--ftb-gelb);\r\n        border-radius: 100px;\r\n        box-shadow: none;\r\n        font-family: inherit;\r\n        font-size: 1rem;\r\n        font-weight: 500;\r\n        line-height: 1.2;\r\n        text-transform: none;\r\n        text-decoration: none;\r\n        color: var(--ftb-schwarz);\r\n        cursor: pointer;\r\n        transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;\r\n    }\r\n    #ftb .ftb-knopf:hover, #ftb .ftb-knopf:focus { background: var(--ftb-gelb-dunkel); border-color: var(--ftb-gelb-dunkel); color: var(--ftb-schwarz); }\r\n    #ftb .ftb-knopf:hover { transform: translateY(-1px); }\r\n    #ftb .ftb-knopf-hell { background: #ffffff; border-color: var(--ftb-schwarz); }\r\n    #ftb .ftb-knopf-hell:hover, #ftb .ftb-knopf-hell:focus { background: var(--ftb-flaeche); border-color: var(--ftb-schwarz); }\r\n    #ftb .ftb-knopf:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }\r\n    #ftb .ftb-knopf:focus-visible, #ftb .ftb-stufe:focus-visible,\r\n    #ftb .ftb-modal-schliessen:focus-visible, #ftb summary:focus-visible { outline: 3px solid var(--ftb-schwarz); outline-offset: 2px; }\r\n\r\n    \/* ===== Spielanleitung ===== *\/\r\n    #ftb .ftb-anleitung {\r\n        margin-top: 24px;\r\n        text-align: left;\r\n        background: #ffffff;\r\n        border-radius: 8px;\r\n        box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);\r\n        padding: 15px 18px;\r\n    }\r\n    #ftb .ftb-anleitung summary {\r\n        cursor: pointer;\r\n        list-style: none;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        gap: 1rem;\r\n        padding: 4px 0;\r\n        font-size: 1.15rem;\r\n        font-weight: 600;\r\n        color: var(--ftb-schwarz);\r\n        user-select: none;\r\n    }\r\n    #ftb .ftb-anleitung summary::-webkit-details-marker { display: none; }\r\n    #ftb .ftb-chev { width: 20px; height: 20px; flex: 0 0 auto; transition: transform 0.2s ease; }\r\n    #ftb .ftb-anleitung[open] .ftb-chev { transform: rotate(180deg); }\r\n    #ftb .ftb-anleitung-liste { list-style: none; margin: 12px 0 4px; padding: 0; display: grid; gap: 8px; }\r\n    #ftb .ftb-anleitung-liste li {\r\n        margin: 0;\r\n        padding: 10px 14px;\r\n        background: var(--ftb-flaeche);\r\n        border-left: 3px solid var(--ftb-gelb);\r\n        border-radius: 6px;\r\n        font-size: 0.95rem;\r\n        font-weight: 300;\r\n        line-height: 1.55;\r\n        color: var(--ftb-schwarz);\r\n    }\r\n    #ftb .ftb-anleitung-liste li strong { font-weight: 600; }\r\n\r\n    \/* ===== Textabschnitte (Kartenstil der bisherigen Textboxen) ===== *\/\r\n    #ftb .ftb-abschnitt { margin-top: 70px; }\r\n    #ftb .ftb-abschnitt h2 {\r\n        margin: 0 0 20px;\r\n        font-family: inherit;\r\n        font-size: 36px;\r\n        font-weight: 600;\r\n        line-height: 1.2;\r\n        letter-spacing: 0;\r\n        text-transform: none;\r\n        text-align: center;\r\n        color: var(--ftb-schwarz);\r\n    }\r\n    #ftb .ftb-box {\r\n        background: #ffffff;\r\n        border-radius: 8px;\r\n        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);\r\n        padding: 15px 20px;\r\n        font-size: 22px;\r\n        font-weight: 300;\r\n        line-height: 1.5;\r\n        color: var(--ftb-schwarz);\r\n        text-align: left;\r\n    }\r\n    #ftb .ftb-box p { margin: 0 0 14px; }\r\n    #ftb .ftb-box p:last-child { margin-bottom: 0; }\r\n    #ftb .ftb-box strong { font-weight: 500; }\r\n    #ftb .ftb-tipps { margin: 0; padding-left: 1.2em; }\r\n    #ftb .ftb-tipps li { margin: 0 0 14px; padding-left: 0.2em; }\r\n    #ftb .ftb-tipps li:last-child { margin-bottom: 0; }\r\n    #ftb .ftb-tipps li::marker { color: var(--ftb-gelb-dunkel); }\r\n    #ftb .ftb-tipps strong { display: block; }\r\n    #ftb .ftb-nutzen { list-style: none; margin: 6px 0 0; padding: 0; }\r\n    #ftb .ftb-nutzen li {\r\n        display: grid;\r\n        grid-template-columns: 2.4em 1fr;\r\n        gap: 0 0.6em;\r\n        padding: 14px 0;\r\n        border-top: 1px solid var(--ftb-linie);\r\n    }\r\n    #ftb .ftb-nutzen li:last-child { border-bottom: 1px solid var(--ftb-linie); }\r\n    #ftb .ftb-nutzen-nr { font-weight: 600; line-height: 1.5; color: var(--ftb-gelb-dunkel); }\r\n    #ftb .ftb-nutzen strong { display: block; }\r\n\r\n    \/* ===== Dialog ===== *\/\r\n    #ftb .ftb-modal { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; padding: 20px; }\r\n    #ftb .ftb-modal.active { display: flex; }\r\n    #ftb .ftb-modal-hintergrund { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(5px); }\r\n    #ftb .ftb-modal-inhalt {\r\n        position: relative;\r\n        width: 100%;\r\n        max-width: 420px;\r\n        max-height: 85vh;\r\n        overflow-y: auto;\r\n        background: #ffffff;\r\n        border-radius: 15px;\r\n        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);\r\n        padding: 32px 28px 28px;\r\n        text-align: center;\r\n        animation: ftb-modal-ein 0.25s ease;\r\n    }\r\n    @keyframes ftb-modal-ein { from { opacity: 0; transform: scale(0.96) translateY(12px); } to { opacity: 1; transform: none; } }\r\n    #ftb .ftb-modal-schliessen {\r\n        -webkit-appearance: none;\r\n        appearance: none;\r\n        position: absolute;\r\n        top: 8px;\r\n        right: 8px;\r\n        width: 44px;\r\n        height: 44px;\r\n        margin: 0;\r\n        padding: 0;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        background: none;\r\n        border: none;\r\n        border-radius: 50%;\r\n        font-family: inherit;\r\n        font-size: 28px;\r\n        line-height: 1;\r\n        color: #6B7280;\r\n        cursor: pointer;\r\n    }\r\n    #ftb .ftb-modal-schliessen:hover, #ftb .ftb-modal-schliessen:focus { background: var(--ftb-flaeche); color: #374151; }\r\n    #ftb .ftb-modal h2 { margin: 0 0 8px; font-family: inherit; font-size: 1.75rem; font-weight: 600; line-height: 1.2; color: var(--ftb-text); }\r\n    #ftb .ftb-modal p { margin: 0 0 6px; color: var(--ftb-text-2); }\r\n    #ftb .ftb-ergebnis { display: flex; justify-content: center; gap: 28px; margin: 18px 0 18px; flex-wrap: wrap; }\r\n    #ftb .ftb-ergebnis strong { display: block; font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--ftb-schwarz); font-variant-numeric: tabular-nums; }\r\n    #ftb .ftb-ergebnis span { font-size: 0.85rem; color: var(--ftb-text-2); }\r\n\r\n    #ftb .ftb-sr { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }\r\n\r\n    \/* ===== Responsive (Elementor: Tablet <= 1024px, Handy <= 767px) ===== *\/\r\n    @media (max-width: 1024px) {\r\n        #ftb .ftb-titel { font-size: 45px; }\r\n        #ftb .ftb-intro { font-size: 16px; margin-top: 30px; }\r\n        #ftb .ftb-box   { font-size: 16px; }\r\n    }\r\n    @media (max-width: 768px) {\r\n        #ftb { max-width: 95%; }\r\n        #ftb .ftb-karte { padding: 20px; }\r\n    }\r\n    @media (max-width: 767px) {\r\n        #ftb .ftb-titel { font-size: 28px; }\r\n        #ftb .ftb-intro { margin-top: 20px; }\r\n        #ftb .ftb-spiel { margin-top: 24px; }\r\n        #ftb .ftb-abschnitt { margin-top: 50px; }\r\n        #ftb .ftb-abschnitt h2 { font-size: 28px; }\r\n        #ftb .ftb-box   { padding: 15px; }\r\n    }\r\n    @media (max-width: 520px) {\r\n        #ftb .ftb-karte  { padding: 14px 6px; border-radius: 16px; }\r\n        #ftb .ftb-inhalt { gap: 14px; }\r\n        #ftb .ftb-raster { padding: 5px; gap: 2px; }\r\n        #ftb .ftb-zelle  { font-size: calc(var(--ftb-zelle) * 0.52); border-radius: 4px; }\r\n        #ftb .ftb-select { min-width: 0; width: 100%; }\r\n        #ftb .ftb-einstellungen, #ftb .ftb-feld { width: 100%; }\r\n        #ftb .ftb-stufen { width: 100%; }\r\n        #ftb .ftb-stufe  { flex: 1; padding: 6px 8px; }\r\n        #ftb .ftb-kontrollen { width: 100%; }\r\n        #ftb .ftb-kontrollen .ftb-knopf { flex: 1; padding: 10px 12px; font-size: 0.95rem; }\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n        #ftb *, #ftb *::before, #ftb *::after {\r\n            animation-duration: 0.01ms !important;\r\n            animation-iteration-count: 1 !important;\r\n            transition-duration: 0.01ms !important;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<div id=\"ftb\">\r\n\r\n    <div class=\"ftb-sr\" aria-live=\"polite\" aria-atomic=\"true\" id=\"ftb-sr\"><\/div>\r\n\r\n    <h1 class=\"ftb-titel\">Buchstabensalat<\/h1>\r\n\r\n    <p class=\"ftb-intro\">Finden Sie die versteckten W\u00f6rter im Buchstabengitter: 10 Kategorien, 3 Schwierigkeitsgrade. Weitere Spiele f\u00fcr Ged\u00e4chtnis, Konzentration und Logik finden Sie auf <a href=\"https:\/\/trainmybrain.ch\/\">trainmybrain.ch<\/a>, unserer Plattform f\u00fcr kognitive Spiele.<\/p>\r\n\r\n    <div class=\"ftb-spiel\">\r\n\r\n        <section class=\"ftb-karte\" aria-label=\"Buchstabensalat Spielbereich\">\r\n            <div class=\"ftb-inhalt\">\r\n\r\n                <div class=\"ftb-einstellungen\">\r\n                    <div class=\"ftb-feld\">\r\n                        <label class=\"ftb-feld-label\" for=\"ftb-kategorie\">Kategorie<\/label>\r\n                        <select class=\"ftb-select\" id=\"ftb-kategorie\">\r\n                            <option value=\"tiere\">Tiere<\/option>\r\n                            <option value=\"moebel\">M\u00f6bel<\/option>\r\n                            <option value=\"fruechte\">Fr\u00fcchte<\/option>\r\n                            <option value=\"farben\">Farben<\/option>\r\n                            <option value=\"laender\">L\u00e4nder<\/option>\r\n                            <option value=\"berufe\">Berufe<\/option>\r\n                            <option value=\"sportarten\">Sportarten<\/option>\r\n                            <option value=\"gemuese\">Gem\u00fcse<\/option>\r\n                            <option value=\"kleidung\">Kleidung<\/option>\r\n                            <option value=\"pflanzen\">Pflanzen<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n                    <div class=\"ftb-feld\">\r\n                        <span class=\"ftb-feld-label\" id=\"ftb-stufe-label\">Schwierigkeit<\/span>\r\n                        <div class=\"ftb-stufen\" role=\"group\" aria-labelledby=\"ftb-stufe-label\">\r\n                            <button type=\"button\" class=\"ftb-stufe\" data-stufe=\"einfach\" aria-pressed=\"true\" aria-label=\"Einfach: 8 mal 8 Felder, 5 W\u00f6rter, mit Wortliste\">Einfach<\/button>\r\n                            <button type=\"button\" class=\"ftb-stufe\" data-stufe=\"mittel\" aria-pressed=\"false\" aria-label=\"Mittel: 10 mal 10 Felder, 8 W\u00f6rter, mit Wortliste\">Mittel<\/button>\r\n                            <button type=\"button\" class=\"ftb-stufe\" data-stufe=\"schwer\" aria-pressed=\"false\" aria-label=\"Schwer: 12 mal 12 Felder, 10 W\u00f6rter, ohne Wortliste\">Schwer<\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <p class=\"ftb-status\" id=\"ftb-status\">Gefunden: <strong id=\"ftb-zaehler\">0 \/ 5<\/strong><\/p>\r\n\r\n                <div class=\"ftb-brett\" id=\"ftb-brett\">\r\n                    <div class=\"ftb-raster\" id=\"ftb-raster\" role=\"grid\" aria-label=\"Buchstabengitter\"><\/div>\r\n                <\/div>\r\n\r\n                <ul class=\"ftb-woerter\" id=\"ftb-woerter\" aria-label=\"Gesuchte W\u00f6rter\"><\/ul>\r\n                <p class=\"ftb-hinweis-schwer\" id=\"ftb-hinweis-schwer\" hidden>Schwer: Die W\u00f6rter werden nicht angezeigt. Gesucht sind <span id=\"ftb-anzahl-schwer\">10<\/span> Begriffe aus der Kategorie \u00ab<span id=\"ftb-kat-schwer\">Tiere<\/span>\u00bb.<\/p>\r\n\r\n                <p class=\"ftb-meldung\" id=\"ftb-meldung\" aria-live=\"polite\"><\/p>\r\n\r\n                <div class=\"ftb-kontrollen\">\r\n                    <button type=\"button\" id=\"ftb-neu\" class=\"ftb-knopf\">Neues R\u00e4tsel<\/button>\r\n                    <button type=\"button\" id=\"ftb-loesung\" class=\"ftb-knopf ftb-knopf-hell\">L\u00f6sung zeigen<\/button>\r\n                <\/div>\r\n\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <details class=\"ftb-anleitung\" id=\"ftb-anleitung\">\r\n            <summary>\r\n                Spielanleitung\r\n                <svg class=\"ftb-chev\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M6 9l6 6 6-6\"\/><\/svg>\r\n            <\/summary>\r\n            <ul class=\"ftb-anleitung-liste\">\r\n                <li><strong>Wort markieren:<\/strong> Ziehen Sie mit Finger oder Maus vom ersten bis zum letzten Buchstaben eines Worts. Oder tippen Sie den ersten und danach den letzten Buchstaben an.<\/li>\r\n                <li><strong>Richtungen:<\/strong> Die W\u00f6rter stehen waagerecht (von links nach rechts), senkrecht (von oben nach unten) oder diagonal. R\u00fcckw\u00e4rts geschriebene W\u00f6rter gibt es nicht.<\/li>\r\n                <li><strong>Gefunden:<\/strong> Ein gesuchtes Wort wird gr\u00fcn. Ist die Markierung kein gesuchtes Wort, verschwindet sie wieder.<\/li>\r\n                <li><strong>Schwierigkeit:<\/strong> Einfach = 8 \u00d7 8 Felder mit 5 W\u00f6rtern, Mittel = 10 \u00d7 10 mit 8 W\u00f6rtern, beide mit Wortliste. Schwer = 12 \u00d7 12 mit 10 W\u00f6rtern, ohne Wortliste.<\/li>\r\n                <li><strong>L\u00f6sung zeigen:<\/strong> Markiert die noch nicht gefundenen W\u00f6rter. Danach geht es mit \u00abNeues R\u00e4tsel\u00bb weiter.<\/li>\r\n                <li><strong>Mit der Tastatur:<\/strong> Mit Tab ins Gitter, mit den Pfeiltasten von Buchstabe zu Buchstabe. Enter markiert den ersten und dann den letzten Buchstaben, Escape bricht ab.<\/li>\r\n            <\/ul>\r\n        <\/details>\r\n\r\n    <\/div><!-- \/.ftb-spiel -->\r\n\r\n    <!-- ===== Wie funktioniert der Buchstabensalat? ===== -->\r\n    <section class=\"ftb-abschnitt\" aria-labelledby=\"ftb-h-regeln\">\r\n        <h2 id=\"ftb-h-regeln\">Wie l\u00f6sen Sie den Buchstabensalat?<\/h2>\r\n        <div class=\"ftb-box\">\r\n            <p>Im Gitter sind mehrere W\u00f6rter aus einer Kategorie versteckt, etwa Tiere, M\u00f6bel oder L\u00e4nder. Die \u00fcbrigen Felder sind mit zuf\u00e4lligen Buchstaben gef\u00fcllt. Ihre Aufgabe: alle versteckten W\u00f6rter finden.<\/p>\r\n            <p>Die W\u00f6rter stehen waagerecht, senkrecht oder diagonal, immer in Leserichtung. Markieren Sie ein Wort, indem Sie vom ersten bis zum letzten Buchstaben ziehen oder diese beiden Buchstaben nacheinander antippen. Ein gefundenes Wort wird gr\u00fcn, in der Wortliste wird es durchgestrichen.<\/p>\r\n            <p>Bei <strong>Einfach<\/strong> und <strong>Mittel<\/strong> sehen Sie, welche W\u00f6rter gesucht sind. Bei <strong>Schwer<\/strong> kennen Sie nur die Kategorie und die Anzahl, die Begriffe m\u00fcssen Sie selbst erkennen. Der Buchstabensalat l\u00e4uft im Browser, kostenlos und ohne Anmeldung.<\/p>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- ===== Nutzen ===== -->\r\n    <section class=\"ftb-abschnitt\" aria-labelledby=\"ftb-h-nutzen\">\r\n        <h2 id=\"ftb-h-nutzen\">Was ist der Nutzen vom Buchstabensalat?<\/h2>\r\n        <div class=\"ftb-box\">\r\n            <p>Ein Buchstabensalat, auch Suchsel oder Wortsuchr\u00e4tsel genannt, fordert mehrere F\u00e4higkeiten gleichzeitig:<\/p>\r\n            <ol class=\"ftb-nutzen\">\r\n                <li><span class=\"ftb-nutzen-nr\" aria-hidden=\"true\">01<\/span><div><strong>Konzentration und Ausdauer<\/strong>Das Gitter Zeile f\u00fcr Zeile abzusuchen, ohne Bereiche zu \u00fcberspringen, verlangt anhaltende Aufmerksamkeit.<\/div><\/li>\r\n                <li><span class=\"ftb-nutzen-nr\" aria-hidden=\"true\">02<\/span><div><strong>Visuelles Suchen<\/strong>Bekannte Buchstabenfolgen zwischen zuf\u00e4lligen Buchstaben zu erkennen, auch diagonal, schult den suchenden Blick.<\/div><\/li>\r\n                <li><span class=\"ftb-nutzen-nr\" aria-hidden=\"true\">03<\/span><div><strong>Wortschatz<\/strong>Die Kategorien regen an, passende Begriffe abzurufen. Besonders bei \u00abSchwer\u00bb, wo Sie die W\u00f6rter selbst erkennen m\u00fcssen.<\/div><\/li>\r\n                <li><span class=\"ftb-nutzen-nr\" aria-hidden=\"true\">04<\/span><div><strong>Entspannung mit Erfolgserlebnis<\/strong>Ein R\u00e4tsel dauert nur wenige Minuten, und jedes gefundene Wort ist ein kleiner Erfolg, ruhig, ohne Zeitdruck.<\/div><\/li>\r\n            <\/ol>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- ===== Tipps ===== -->\r\n    <section class=\"ftb-abschnitt\" aria-labelledby=\"ftb-h-tipps\">\r\n        <h2 id=\"ftb-h-tipps\">Buchstabensalat-Tipps: Strategien zum L\u00f6sen<\/h2>\r\n        <div class=\"ftb-box\">\r\n            <ul class=\"ftb-tipps\">\r\n                <li><strong>Nach seltenen Buchstaben suchen<\/strong>Buchstaben wie \u00c4, \u00d6, \u00dc, X oder Y fallen schnell auf. Kommt einer davon in einem gesuchten Wort vor, starten Sie dort.<\/li>\r\n                <li><strong>Mit dem ersten Buchstaben beginnen<\/strong>Suchen Sie den Anfangsbuchstaben eines Worts und pr\u00fcfen Sie von dort aus nach rechts, nach unten und in beide Diagonalen.<\/li>\r\n                <li><strong>Systematisch vorgehen<\/strong>Gehen Sie Zeile f\u00fcr Zeile und Spalte f\u00fcr Spalte durch. So \u00fcbersehen Sie weniger als beim Herumsuchen.<\/li>\r\n                <li><strong>Bei \u00abSchwer\u00bb: Begriffe vorher sammeln<\/strong>\u00dcberlegen Sie, welche W\u00f6rter zur Kategorie passen k\u00f6nnten, etwa bei Tieren: Katze, L\u00f6we, Fuchs. Dann suchen Sie gezielt nach deren Anfang.<\/li>\r\n                <li><strong>L\u00f6sung als Lernhilfe<\/strong>Kommen Sie nicht weiter, zeigen Sie die L\u00f6sung an und schauen Sie, wo das Wort versteckt war. Das sch\u00e4rft den Blick f\u00fcrs n\u00e4chste R\u00e4tsel.<\/li>\r\n            <\/ul>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Dialog: Raetsel geloest -->\r\n    <div class=\"ftb-modal\" id=\"ftb-modal\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"ftb-modal-titel\">\r\n        <div class=\"ftb-modal-hintergrund\"><\/div>\r\n        <div class=\"ftb-modal-inhalt\">\r\n            <button type=\"button\" class=\"ftb-modal-schliessen\" aria-label=\"Schliessen\">\u00d7<\/button>\r\n            <h2 id=\"ftb-modal-titel\">Geschafft!<\/h2>\r\n            <p>Sie haben alle W\u00f6rter gefunden.<\/p>\r\n            <div class=\"ftb-ergebnis\">\r\n                <div><strong id=\"ftb-modal-woerter\">0<\/strong><span>W\u00f6rter<\/span><\/div>\r\n                <div><strong id=\"ftb-modal-zeit\">0:00<\/strong><span>Zeit<\/span><\/div>\r\n            <\/div>\r\n            <button type=\"button\" id=\"ftb-modal-neu\" class=\"ftb-knopf\">N\u00e4chstes R\u00e4tsel<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n    'use strict';\r\n\r\n    if (document.readyState === 'loading') {\r\n        document.addEventListener('DOMContentLoaded', ftbStart);\r\n    } else {\r\n        ftbStart();\r\n    }\r\n\r\n    function ftbStart() {\r\n        const root = document.getElementById('ftb');\r\n        if (!root || root.dataset.ftbBereit) return;\r\n        root.dataset.ftbBereit = '1';\r\n\r\n        \/\/ \u2500\u2500 Wortlisten \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n        \/\/ Aus trainmybrain-buchstabensalat.html, korrigiert 2026-10-12:\r\n        \/\/ KOLRABI -> KOHLRABI, LICHI -> LITSCHI, SIENNA -> SIENA.\r\n        const KATEGORIEN = {\r\n            tiere:      [\"KATZE\",\"HUND\",\"VOGEL\",\"FISCH\",\"MAUS\",\"L\u00d6WE\",\"TIGER\",\"B\u00c4R\",\"ELEFANT\",\"GIRAFFE\",\"PFERD\",\"AFFE\",\"PANDA\",\"SCHAF\",\"ZEBRA\",\"KAMEL\",\"DELFIN\",\"FUCHS\",\"WOLF\",\"KOALA\",\"ESEL\",\"HIRSCH\",\"HASE\",\"RATTE\",\"ROBBE\",\"NASHORN\",\"IGEL\",\"LEOPARD\",\"GAZELLE\",\"FLAMINGO\",\"STRAUSS\",\"SCHILDKR\u00d6TE\",\"KROKODIL\",\"WAL\",\"SEEHUND\",\"ORCA\",\"OTTER\",\"PINGUIN\",\"PAPAGEI\",\"GEPARD\",\"SCHWAN\",\"TAUBE\"],\r\n            moebel:     [\"STUHL\",\"TISCH\",\"BETT\",\"SOFA\",\"SCHRANK\",\"KOMMODE\",\"SPIEGEL\",\"REGAL\",\"SESSEL\",\"VITRINE\",\"COUCH\",\"NACHTTISCH\",\"SCHREIBTISCH\",\"HOCKER\",\"LIEGE\",\"SIDEBOARD\",\"BARHOCKER\",\"GARDEROBE\",\"ESSTISCH\",\"TRUHE\",\"KLAPPTISCH\",\"B\u00dcROSTUHL\",\"BEISTELLTISCH\",\"LAMPE\",\"KISSEN\",\"KLAPPBETT\",\"TISCHLAMPE\",\"COUCHTISCH\",\"GARTENBANK\",\"FUSSBANK\",\"H\u00c4NGEREGAL\",\"BETTKASTEN\",\"SITZBANK\",\"WANDREGAL\",\"LAGERREGAL\"],\r\n            fruechte:   [\"APFEL\",\"BIRNE\",\"BANANE\",\"ORANGE\",\"MANDARINE\",\"ZITRONE\",\"LIMETTE\",\"PFIRSICH\",\"NEKTARINE\",\"PFLAUME\",\"KIRSCHE\",\"ERDBEERE\",\"HIMBEERE\",\"BLAUBEERE\",\"BROMBEERE\",\"TRAUBE\",\"MELONE\",\"KIWI\",\"ANANAS\",\"MANGO\",\"PAPAYA\",\"GRAPEFRUIT\",\"AVOCADO\",\"FEIGE\",\"DATTEL\",\"GRANATAPFEL\",\"QUITTE\",\"KAKI\",\"GUAVE\",\"LITSCHI\",\"PHYSALIS\"],\r\n            farben:     [\"ROT\",\"GR\u00dcN\",\"BLAU\",\"GELB\",\"ORANGE\",\"LILA\",\"VIOLETT\",\"PINK\",\"ROSA\",\"BRAUN\",\"SCHWARZ\",\"WEISS\",\"GRAU\",\"T\u00dcRKIS\",\"MAGENTA\",\"CYAN\",\"BEIGE\",\"CREME\",\"KHAKI\",\"OLIVGR\u00dcN\",\"HELLBLAU\",\"DUNKELBLAU\",\"HELLGR\u00dcN\",\"SILBER\",\"GOLD\",\"INDIGO\",\"BURGUNDER\",\"MAUVE\",\"OCKER\",\"SIENA\",\"TERRAKOTTA\",\"SMARAGDGR\u00dcN\",\"PETROL\"],\r\n            laender:    [\"DEUTSCHLAND\",\"\u00d6STERREICH\",\"SCHWEIZ\",\"FRANKREICH\",\"ITALIEN\",\"SPANIEN\",\"PORTUGAL\",\"BELGIEN\",\"D\u00c4NEMARK\",\"SCHWEDEN\",\"NORWEGEN\",\"FINNLAND\",\"ISLAND\",\"POLEN\",\"UNGARN\",\"RUM\u00c4NIEN\",\"BULGARIEN\",\"GRIECHENLAND\",\"T\u00dcRKEI\",\"RUSSLAND\",\"UKRAINE\",\"LETTLAND\",\"LITAUEN\",\"ESTLAND\",\"IRLAND\",\"KROATIEN\",\"SERBIEN\",\"ALBANIEN\",\"SLOWENIEN\",\"USA\",\"KANADA\",\"MEXIKO\",\"BRASILIEN\",\"ARGENTINIEN\",\"CHILE\",\"CHINA\",\"INDIEN\",\"JAPAN\",\"AUSTRALIEN\",\"NEUSEELAND\",\"ISRAEL\",\"MAROKKO\",\"THAILAND\",\"VIETNAM\",\"MALAYSIA\",\"SINGAPUR\",\"INDONESIEN\",\"PHILIPPINEN\",\"BOLIVIEN\",\"PERU\",\"KOLUMBIEN\"],\r\n            berufe:     [\"ARZT\",\"LEHRER\",\"INGENIEUR\",\"B\u00c4CKER\",\"METZGER\",\"FRISEUR\",\"KAUFMANN\",\"BUCHHALTER\",\"ARCHITEKT\",\"JURIST\",\"ANWALT\",\"NOTAR\",\"RICHTER\",\"POLIZIST\",\"SCHREINER\",\"MECHANIKER\",\"ELEKTRIKER\",\"MALER\",\"TAXIFAHRER\",\"PILOT\",\"ZAHNARZT\",\"APOTHEKER\",\"KELLNER\",\"KOCH\",\"SCHLOSSER\",\"GRAFIKER\",\"DESIGNER\",\"MUSIKER\",\"SCHAUSPIELER\",\"AUTOR\",\"JOURNALIST\",\"FOTOGRAF\",\"PSYCHOLOGE\",\"THERAPEUT\",\"LOGISTIKER\"],\r\n            sportarten: [\"FUSSBALL\",\"BASKETBALL\",\"HANDBALL\",\"VOLLEYBALL\",\"TENNIS\",\"TISCHTENNIS\",\"BADMINTON\",\"SQUASH\",\"BASEBALL\",\"EISHOCKEY\",\"FELDHOCKEY\",\"CRICKET\",\"RUGBY\",\"SCHWIMMEN\",\"TAUCHEN\",\"SURFEN\",\"SEGELN\",\"SKIFAHREN\",\"SNOWBOARDEN\",\"MARATHON\",\"TRIATHLON\",\"BOGENSCHIESSEN\",\"REITEN\",\"GOLF\",\"BOXEN\",\"JUDO\",\"KARATE\",\"RADSPORT\",\"DARTS\",\"BOULDERN\",\"CURLING\",\"BOCCIA\",\"TAEKWONDO\",\"RINGEN\",\"KLETTERN\",\"PARAGLIDING\"],\r\n            gemuese:    [\"KAROTTE\",\"KARTOFFEL\",\"TOMATE\",\"GURKE\",\"ZWIEBEL\",\"KNOBLAUCH\",\"PAPRIKA\",\"ZUCCHINI\",\"K\u00dcRBIS\",\"KOHL\",\"ROTKOHL\",\"WEISSKOHL\",\"WIRSING\",\"BLUMENKOHL\",\"BROKKOLI\",\"ERBSEN\",\"BOHNEN\",\"SPINAT\",\"SCHALOTTE\",\"LAUCH\",\"SELLERIE\",\"FENCHEL\",\"ARTISCHOCKE\",\"SPARGEL\",\"CHAMPIGNON\",\"RADIESCHEN\",\"RUCOLA\",\"MANGOLD\",\"MAIS\",\"PASTINAKE\",\"KOHLRABI\",\"ENDIVIE\",\"INGWER\",\"PAKCHOI\",\"OKRA\"],\r\n            kleidung:   [\"HOSE\",\"HEMD\",\"BLUSE\",\"KLEID\",\"ROCK\",\"JACKE\",\"MANTEL\",\"PULLOVER\",\"ANZUG\",\"KRAWATTE\",\"FLIEGE\",\"SCHUHE\",\"STIEFEL\",\"SANDALE\",\"SNEAKER\",\"SOCKEN\",\"UNTERHOSE\",\"BLAZER\",\"WESTE\",\"HUT\",\"M\u00dcTZE\",\"STRICKJACKE\",\"STRUMPFHOSE\",\"UNTERHEMD\"],\r\n            pflanzen:   [\"BAMBUS\",\"KAKTUS\",\"FARN\",\"ALOE\",\"PALME\",\"EICHE\",\"BIRKE\",\"TULPE\",\"ROSE\",\"L\u00d6WENZAHN\",\"G\u00c4NSEBL\u00dcMCHEN\",\"VEILCHEN\",\"MARGERITE\",\"NARZISSE\",\"HIBISKUS\",\"LILIE\",\"ORCHIDEE\",\"BASILIKUM\",\"PETERSILIE\",\"THYMIAN\",\"ROSMARIN\",\"SALBEI\",\"MAJORAN\",\"MINZE\",\"KLEE\",\"BUCHE\",\"TANNE\",\"EUKALYPTUS\",\"RHODODENDRON\",\"AZALEE\",\"AHORN\",\"MAGNOLIE\",\"FLIEDER\",\"GINSENG\",\"GINKGO\",\"BONSAI\"]\r\n        };\r\n        const KATEGORIE_NAME = { tiere: 'Tiere', moebel: 'M\u00f6bel', fruechte: 'Fr\u00fcchte', farben: 'Farben', laender: 'L\u00e4nder', berufe: 'Berufe', sportarten: 'Sportarten', gemuese: 'Gem\u00fcse', kleidung: 'Kleidung', pflanzen: 'Pflanzen' };\r\n        const STUFEN = {\r\n            einfach: { n: 8,  woerter: 5,  liste: true  },\r\n            mittel:  { n: 10, woerter: 8,  liste: true  },\r\n            schwer:  { n: 12, woerter: 10, liste: false }\r\n        };\r\n        const ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ\u00c4\u00d6\u00dc';\r\n        \/\/ Platziert wird nur in Leserichtung; geprueft wird in allen 8 Richtungen\r\n        const RICHTUNGEN = [[1, 0], [0, 1], [1, 1], [-1, 1]];\r\n        const ALLE_RICHTUNGEN = [[1, 0], [0, 1], [1, 1], [-1, 1], [-1, 0], [0, -1], [-1, -1], [1, -1]];\r\n\r\n        \/\/ \u2500\u2500 DOM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n        const kategorieEl = document.getElementById('ftb-kategorie');\r\n        const stufenBtns  = Array.from(root.querySelectorAll('.ftb-stufe'));\r\n        const brett       = document.getElementById('ftb-brett');\r\n        const rasterEl    = document.getElementById('ftb-raster');\r\n        const zaehlerEl   = document.getElementById('ftb-zaehler');\r\n        const woerterEl   = document.getElementById('ftb-woerter');\r\n        const schwerEl    = document.getElementById('ftb-hinweis-schwer');\r\n        const meldungEl   = document.getElementById('ftb-meldung');\r\n        const srEl        = document.getElementById('ftb-sr');\r\n        const btnNeu      = document.getElementById('ftb-neu');\r\n        const btnLoesung  = document.getElementById('ftb-loesung');\r\n        const modal       = document.getElementById('ftb-modal');\r\n\r\n        \/\/ \u2500\u2500 Zustand \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n        let stufe     = 'einfach';\r\n        let n         = 8;\r\n        let gitter    = [];        \/\/ n x n Buchstaben\r\n        let woerter   = [];        \/\/ [{ wort, felder: ['x,y', ...] }]\r\n        let gefunden  = new Set(); \/\/ Woerter\r\n        let phase     = 'laeuft';  \/\/ laeuft | loesung | geloest\r\n        let startZeit = 0;\r\n        let zellen    = [];        \/\/ DOM-Zellen [y][x]\r\n        let anfang    = null;      \/\/ {x,y} Startfeld (Ziehen oder erster Tipp)\r\n        let antippen  = null;      \/\/ {x,y} gemerkter erster Tipp\r\n        let zieht     = false;\r\n        let bewegt    = false;\r\n        let linie     = [];        \/\/ aktuelle Markierung [{x,y}]\r\n        let fokus     = { x: 0, y: 0 };\r\n\r\n        \/\/ \u2500\u2500 Einstellungen merken \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n        const EINST_KEY = 'ft_buchstabensalat_einstellungen';\r\n        try {\r\n            const e = JSON.parse(localStorage.getItem(EINST_KEY) || '{}');\r\n            if (e.kategorie && KATEGORIEN[e.kategorie]) kategorieEl.value = e.kategorie;\r\n            if (e.stufe && STUFEN[e.stufe]) stufe = e.stufe;\r\n        } catch (err) {}\r\n        function einstellungenSpeichern() {\r\n            try { localStorage.setItem(EINST_KEY, JSON.stringify({ kategorie: kategorieEl.value, stufe })); } catch (err) {}\r\n        }\r\n\r\n        \/\/ \u2500\u2500 Raetsel erzeugen \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n        function mischen(a) {\r\n            for (let i = a.length - 1; i > 0; i--) {\r\n                const j = Math.floor(Math.random() * (i + 1));\r\n                [a[i], a[j]] = [a[j], a[i]];\r\n            }\r\n            return a;\r\n        }\r\n\r\n        \/\/ Wie oft steht ein Wort im Gitter (alle 8 Richtungen)?\r\n        function vorkommen(g, wort) {\r\n            let anzahl = 0;\r\n            const L = wort.length, n = g.length;\r\n            for (let y = 0; y < n; y++) for (let x = 0; x < n; x++) {\r\n                if (g[y][x] !== wort[0]) continue;\r\n                for (const [dx, dy] of ALLE_RICHTUNGEN) {\r\n                    const ex = x + dx * (L - 1), ey = y + dy * (L - 1);\r\n                    if (ex < 0 || ex >= n || ey < 0 || ey >= n) continue;\r\n                    let ok = true;\r\n                    for (let i = 1; i < L && ok; i++) ok = g[y + dy * i][x + dx * i] === wort[i];\r\n                    if (ok) anzahl++;\r\n                }\r\n            }\r\n            return anzahl;\r\n        }\r\n\r\n        const umgekehrt = w => w.split('').reverse().join('');\r\n\r\n        function erzeugen(kategorie, s) {\r\n            const alle = Array.from(new Set(KATEGORIEN[kategorie])).filter(w => w.length <= s.n);\r\n            let bestes = null;\r\n            for (let versuch = 0; versuch < 300; versuch++) {\r\n                const g = Array.from({ length: s.n }, () => Array(s.n).fill(''));\r\n                const gewaehlt = [];\r\n                for (const wort of mischen(alle.slice())) {\r\n                    if (gewaehlt.length === s.woerter) break;\r\n                    \/\/ Kein Wort, das in einem gewaehlten steckt oder umgekehrt\r\n                    if (gewaehlt.some(o => o.wort.includes(wort) || wort.includes(o.wort))) continue;\r\n                    const optionen = [];\r\n                    for (let y = 0; y < s.n; y++) for (let x = 0; x < s.n; x++) for (const [dx, dy] of RICHTUNGEN) {\r\n                        const ex = x + dx * (wort.length - 1), ey = y + dy * (wort.length - 1);\r\n                        if (ex < 0 || ex >= s.n || ey < 0 || ey >= s.n) continue;\r\n                        let ok = true;\r\n                        for (let i = 0; i < wort.length && ok; i++) {\r\n                            const v = g[y + dy * i][x + dx * i];\r\n                            ok = v === '' || v === wort[i];\r\n                        }\r\n                        if (ok) optionen.push([x, y, dx, dy]);\r\n                    }\r\n                    if (!optionen.length) continue;\r\n                    const [x, y, dx, dy] = optionen[Math.floor(Math.random() * optionen.length)];\r\n                    const felder = [];\r\n                    for (let i = 0; i < wort.length; i++) {\r\n                        g[y + dy * i][x + dx * i] = wort[i];\r\n                        felder.push(`${x + dx * i},${y + dy * i}`);\r\n                    }\r\n                    gewaehlt.push({ wort, felder });\r\n                }\r\n                if (!bestes || gewaehlt.length > bestes.woerter.length) bestes = { g, woerter: gewaehlt };\r\n                if (gewaehlt.length < s.woerter) continue;\r\n                \/\/ Fuellen, bis jedes gesuchte Wort genau einmal und kein anderes\r\n                \/\/ Wort der Kategorie zufaellig im Gitter steht. Ausgenommen sind\r\n                \/\/ Woerter, die zwangslaeufig in einem gesetzten stecken (HUND in\r\n                \/\/ SEEHUND) \u2014 die liegen auf denselben Feldern.\r\n                const andere = alle.filter(w => !gewaehlt.some(o => o.wort.includes(w) || umgekehrt(o.wort).includes(w)));\r\n                for (let f = 0; f < 40; f++) {\r\n                    const h = g.map(r => r.map(v => v || ALPHABET[Math.floor(Math.random() * ALPHABET.length)]));\r\n                    const einmal = o => vorkommen(h, o.wort) === (o.wort === umgekehrt(o.wort) ? 2 : 1);\r\n                    if (gewaehlt.every(einmal) && andere.every(w => vorkommen(h, w) === 0)) {\r\n                        return { g: h, woerter: gewaehlt };\r\n                    }\r\n                }\r\n            }\r\n            \/\/ Praktisch unerreichbar: bestes Ergebnis, der Zaehler zeigt die echte Anzahl\r\n            const h = bestes.g.map(r => r.map(v => v || ALPHABET[Math.floor(Math.random() * ALPHABET.length)]));\r\n            return { g: h, woerter: bestes.woerter };\r\n        }\r\n\r\n        function neuesRaetsel() {\r\n            const s = STUFEN[stufe];\r\n            const r = erzeugen(kategorieEl.value, s);\r\n            n = s.n;\r\n            gitter = r.g;\r\n            woerter = r.woerter;\r\n            gefunden = new Set();\r\n            phase = 'laeuft';\r\n            anfang = antippen = null;\r\n            zieht = bewegt = false;\r\n            linie = [];\r\n            fokus = { x: 0, y: 0 };\r\n            startZeit = performance.now();\r\n            btnLoesung.disabled = false;\r\n            stufenBtns.forEach(b => b.setAttribute('aria-pressed', String(b.dataset.stufe === stufe)));\r\n            rasterAufbauen();\r\n            listeAnzeigen();\r\n            zaehlerAnzeigen();\r\n            meldung('');\r\n            sr(`Neues R\u00e4tsel: ${KATEGORIE_NAME[kategorieEl.value]}, ${woerter.length} W\u00f6rter, ${n} mal ${n} Felder.`);\r\n            einstellungenSpeichern();\r\n        }\r\n\r\n        \/\/ \u2500\u2500 Anzeige \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n        function rasterAufbauen() {\r\n            rasterEl.innerHTML = '';\r\n            rasterEl.style.gridTemplateColumns = `repeat(${n}, var(--ftb-zelle))`;\r\n            zellen = [];\r\n            for (let y = 0; y < n; y++) {\r\n                const reihe = [];\r\n                for (let x = 0; x < n; x++) {\r\n                    const z = document.createElement('button');\r\n                    z.type = 'button';\r\n                    z.className = 'ftb-zelle';\r\n                    z.textContent = gitter[y][x];\r\n                    z.dataset.x = x;\r\n                    z.dataset.y = y;\r\n                    z.tabIndex = x === 0 && y === 0 ? 0 : -1;\r\n                    z.setAttribute('role', 'gridcell');\r\n                    z.setAttribute('aria-label', `${gitter[y][x]}, Zeile ${y + 1}, Spalte ${x + 1}`);\r\n                    rasterEl.appendChild(z);\r\n                    reihe.push(z);\r\n                }\r\n                zellen.push(reihe);\r\n            }\r\n            groesseAnpassen();\r\n        }\r\n\r\n        \/\/ Zellgroesse aus der verfuegbaren Breite (statt CSS-Skalierung):\r\n        \/\/ Tippflaechen bleiben echt gross, nichts wird abgeschnitten.\r\n        function groesseAnpassen() {\r\n            const stil = getComputedStyle(rasterEl);\r\n            const abstand = parseFloat(stil.columnGap) || 4;\r\n            const rand = parseFloat(stil.paddingLeft) + parseFloat(stil.paddingRight) + 2;\r\n            const frei = brett.clientWidth - rand - abstand * (n - 1);\r\n            const groesse = Math.max(18, Math.min(42, Math.floor(frei \/ n)));\r\n            root.style.setProperty('--ftb-zelle', groesse + 'px');\r\n        }\r\n        if (window.ResizeObserver) new ResizeObserver(() => { if (n) groesseAnpassen(); }).observe(brett);\r\n        else window.addEventListener('resize', groesseAnpassen);\r\n\r\n        function listeAnzeigen() {\r\n            const s = STUFEN[stufe];\r\n            woerterEl.innerHTML = '';\r\n            woerterEl.hidden = !s.liste;\r\n            schwerEl.hidden = s.liste;\r\n            if (s.liste) {\r\n                woerter.slice().sort((a, b) => a.wort.localeCompare(b.wort, 'de')).forEach(o => {\r\n                    const li = document.createElement('li');\r\n                    li.textContent = o.wort;\r\n                    li.dataset.wort = o.wort;\r\n                    woerterEl.appendChild(li);\r\n                });\r\n            } else {\r\n                document.getElementById('ftb-anzahl-schwer').textContent = woerter.length;\r\n                document.getElementById('ftb-kat-schwer').textContent = KATEGORIE_NAME[kategorieEl.value];\r\n            }\r\n        }\r\n\r\n        \/\/ Bei \u00abSchwer\u00bb erscheinen gefundene Woerter nachtraeglich in der Liste\r\n        function listeEintragen(wort, art) {\r\n            let li = woerterEl.querySelector(`li[data-wort=\"${wort}\"]`);\r\n            if (!li) {\r\n                li = document.createElement('li');\r\n                li.textContent = wort;\r\n                li.dataset.wort = wort;\r\n                woerterEl.appendChild(li);\r\n                woerterEl.hidden = false;\r\n            }\r\n            li.classList.add(art);\r\n        }\r\n\r\n        function zaehlerAnzeigen() {\r\n            zaehlerEl.textContent = `${gefunden.size} \/ ${woerter.length}`;\r\n        }\r\n\r\n        function meldung(text, art) {\r\n            meldungEl.textContent = text;\r\n            meldungEl.className = 'ftb-meldung' + (art ? ' ' + art : '');\r\n        }\r\n\r\n        function sr(text) { if (srEl) srEl.textContent = text; }\r\n\r\n        function markierungZeigen() {\r\n            for (const reihe of zellen) for (const z of reihe) z.classList.remove('auswahl', 'start');\r\n            if (antippen) zellen[antippen.y][antippen.x].classList.add('start');\r\n            for (const p of linie) zellen[p.y][p.x].classList.add('auswahl');\r\n        }\r\n\r\n        \/\/ \u2500\u2500 Linie vom Start zum Ziel (waagerecht, senkrecht, diagonal) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n        function linieZwischen(a, b) {\r\n            const dx = b.x - a.x, dy = b.y - a.y;\r\n            if (!(dx === 0 || dy === 0 || Math.abs(dx) === Math.abs(dy))) return null;\r\n            const schritte = Math.max(Math.abs(dx), Math.abs(dy));\r\n            const sx = Math.sign(dx), sy = Math.sign(dy);\r\n            const l = [];\r\n            for (let i = 0; i <= schritte; i++) l.push({ x: a.x + sx * i, y: a.y + sy * i });\r\n            return l;\r\n        }\r\n\r\n        \/\/ Beim Ziehen auf die naechste erlaubte Richtung einrasten, damit kleine\r\n        \/\/ Abweichungen der Hand die Markierung nicht abbrechen.\r\n        function linieEingerastet(a, b) {\r\n            const dx = b.x - a.x, dy = b.y - a.y;\r\n            if (!dx && !dy) return [{ x: a.x, y: a.y }];\r\n            const winkel = Math.atan2(dy, dx);\r\n            const achtel = Math.round(winkel \/ (Math.PI \/ 4));\r\n            const sx = Math.round(Math.cos(achtel * Math.PI \/ 4));\r\n            const sy = Math.round(Math.sin(achtel * Math.PI \/ 4));\r\n            let schritte = Math.max(Math.abs(dx), Math.abs(dy));\r\n            while (schritte > 0) {\r\n                const ex = a.x + sx * schritte, ey = a.y + sy * schritte;\r\n                if (ex >= 0 && ex < n && ey >= 0 && ey < n) break;\r\n                schritte--;\r\n            }\r\n            const l = [];\r\n            for (let i = 0; i <= schritte; i++) l.push({ x: a.x + sx * i, y: a.y + sy * i });\r\n            return l;\r\n        }\r\n\r\n        \/\/ \u2500\u2500 Pruefen \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n        function pruefen(l) {\r\n            if (!l || l.length < 2) return;\r\n            const schluessel = l.map(p => `${p.x},${p.y}`);\r\n            const rueck = schluessel.slice().reverse();\r\n            const gleich = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);\r\n            const treffer = woerter.find(o => gleich(o.felder, schluessel) || gleich(o.felder, rueck));\r\n            const buchstaben = l.map(p => gitter[p.y][p.x]).join('');\r\n\r\n            if (treffer && gefunden.has(treffer.wort)) {\r\n                meldung(`\u00ab${treffer.wort}\u00bb haben Sie schon gefunden.`);\r\n                return;\r\n            }\r\n            if (treffer) {\r\n                gefunden.add(treffer.wort);\r\n                treffer.felder.forEach(f => {\r\n                    const [x, y] = f.split(',').map(Number);\r\n                    const z = zellen[y][x];\r\n                    z.classList.remove('loesung');\r\n                    z.classList.add('gefunden', 'neu');\r\n                    z.setAttribute('aria-label', `${gitter[y][x]}, Zeile ${y + 1}, Spalte ${x + 1}, gefunden`);\r\n                    setTimeout(() => z.classList.remove('neu'), 500);\r\n                });\r\n                listeEintragen(treffer.wort, 'gefunden');\r\n                zaehlerAnzeigen();\r\n                meldung(`\u00ab${treffer.wort}\u00bb gefunden!`, 'erfolg');\r\n                sr(`${treffer.wort} gefunden. ${gefunden.size} von ${woerter.length}.`);\r\n                if (gefunden.size === woerter.length) geloest();\r\n                return;\r\n            }\r\n            \/\/ Kein gesuchtes Wort: kurz rot, dann weg\r\n            l.forEach(p => {\r\n                const z = zellen[p.y][p.x];\r\n                z.classList.add('falsch');\r\n                setTimeout(() => z.classList.remove('falsch'), 450);\r\n            });\r\n            meldung(`\u00ab${buchstaben}\u00bb ist kein gesuchtes Wort.`, 'fehler');\r\n            sr(`${buchstaben} ist kein gesuchtes Wort.`);\r\n        }\r\n\r\n        function geloest() {\r\n            phase = 'geloest';\r\n            btnLoesung.disabled = true;\r\n            const ms = performance.now() - startZeit;\r\n            const s = Math.floor(ms \/ 1000);\r\n            const zeit = `${Math.floor(s \/ 60)}:${String(s % 60).padStart(2, '0')}`;\r\n            document.getElementById('ftb-modal-woerter').textContent = woerter.length;\r\n            document.getElementById('ftb-modal-zeit').textContent = zeit;\r\n            ftEvent({ event: 'buchstabensalat_geloest', buchstabensalat_kategorie: kategorieEl.value, buchstabensalat_stufe: stufe, buchstabensalat_sekunden: s });\r\n            setTimeout(() => { if (phase === 'geloest') modalOeffnen(); }, 650);\r\n        }\r\n\r\n        function loesungZeigen() {\r\n            if (phase !== 'laeuft') return;\r\n            phase = 'loesung';\r\n            anfang = antippen = null;\r\n            linie = [];\r\n            markierungZeigen();\r\n            woerter.forEach(o => {\r\n                if (gefunden.has(o.wort)) return;\r\n                o.felder.forEach(f => {\r\n                    const [x, y] = f.split(',').map(Number);\r\n                    if (!zellen[y][x].classList.contains('gefunden')) zellen[y][x].classList.add('loesung');\r\n                });\r\n                listeEintragen(o.wort, 'gezeigt');\r\n            });\r\n            btnLoesung.disabled = true;\r\n            meldung('L\u00f6sung angezeigt. Mit \u00abNeues R\u00e4tsel\u00bb geht es weiter.');\r\n            sr('L\u00f6sung angezeigt.');\r\n            ftEvent({ event: 'buchstabensalat_loesung', buchstabensalat_kategorie: kategorieEl.value, buchstabensalat_stufe: stufe });\r\n        }\r\n\r\n        \/\/ \u2500\u2500 Eingabe: Ziehen oder Antippen (Pointer Events) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n        function zelleBei(x, y) {\r\n            const el = document.elementFromPoint(x, y);\r\n            const z = el && el.closest ? el.closest('.ftb-zelle') : null;\r\n            return z && rasterEl.contains(z) ? { x: Number(z.dataset.x), y: Number(z.dataset.y) } : null;\r\n        }\r\n\r\n        rasterEl.addEventListener('pointerdown', e => {\r\n            if (phase !== 'laeuft') return;\r\n            const p = zelleBei(e.clientX, e.clientY);\r\n            if (!p) return;\r\n            e.preventDefault();\r\n            zieht = true;\r\n            bewegt = false;\r\n            anfang = p;\r\n            linie = [p];\r\n            try { rasterEl.setPointerCapture(e.pointerId); } catch (err) {}\r\n            markierungZeigen();\r\n        });\r\n\r\n        rasterEl.addEventListener('pointermove', e => {\r\n            if (!zieht) return;\r\n            const p = zelleBei(e.clientX, e.clientY);\r\n            if (!p) return;\r\n            if (p.x !== anfang.x || p.y !== anfang.y) bewegt = true;\r\n            if (!bewegt) return;\r\n            antippen = null;\r\n            linie = linieEingerastet(anfang, p);\r\n            markierungZeigen();\r\n        });\r\n\r\n        function loslassen() {\r\n            if (!zieht) return;\r\n            zieht = false;\r\n            if (bewegt) {\r\n                const l = linie;\r\n                linie = [];\r\n                anfang = null;\r\n                markierungZeigen();\r\n                pruefen(l);\r\n                return;\r\n            }\r\n            \/\/ Kein Ziehen: Antippen\r\n            tippen(anfang);\r\n        }\r\n        rasterEl.addEventListener('pointerup', loslassen);\r\n        rasterEl.addEventListener('pointercancel', () => { zieht = false; linie = []; anfang = null; markierungZeigen(); });\r\n\r\n        function tippen(p) {\r\n            linie = [];\r\n            anfang = null;\r\n            if (!antippen) {\r\n                antippen = p;\r\n                meldung('Tippen Sie jetzt den letzten Buchstaben des Worts an.');\r\n            } else if (antippen.x === p.x && antippen.y === p.y) {\r\n                antippen = null;\r\n                meldung('');\r\n            } else {\r\n                const l = linieZwischen(antippen, p);\r\n                if (!l) {\r\n                    antippen = p;\r\n                    meldung('Erster und letzter Buchstabe m\u00fcssen in einer Linie liegen. Neuer Anfang gesetzt.', 'fehler');\r\n                } else {\r\n                    antippen = null;\r\n                    pruefen(l);\r\n                }\r\n            }\r\n            markierungZeigen();\r\n        }\r\n\r\n        \/\/ \u2500\u2500 Tastatur im Gitter (Pfeile, Enter\/Leertaste, Escape) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n        rasterEl.addEventListener('keydown', e => {\r\n            const z = e.target.closest('.ftb-zelle');\r\n            if (!z) return;\r\n            const x = Number(z.dataset.x), y = Number(z.dataset.y);\r\n            const ziel = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }[e.key];\r\n            if (ziel) {\r\n                e.preventDefault();\r\n                const nx = Math.max(0, Math.min(n - 1, x + ziel[0])), ny = Math.max(0, Math.min(n - 1, y + ziel[1]));\r\n                zellen[y][x].tabIndex = -1;\r\n                zellen[ny][nx].tabIndex = 0;\r\n                zellen[ny][nx].focus();\r\n                fokus = { x: nx, y: ny };\r\n            } else if (e.key === 'Enter' || e.key === ' ') {\r\n                e.preventDefault();\r\n                if (phase === 'laeuft') tippen({ x, y });\r\n            } else if (e.key === 'Escape' && antippen) {\r\n                e.preventDefault();\r\n                antippen = null;\r\n                markierungZeigen();\r\n                meldung('');\r\n            }\r\n        });\r\n        \/\/ Mausklick ausloesen nicht doppelt: Klicks erledigt pointerdown\/up\r\n        rasterEl.addEventListener('click', e => e.preventDefault());\r\n\r\n        \/** Spielereignis an GTM (dataLayer). Nur Spieldaten, keine Personendaten. *\/\r\n        function ftEvent(daten) {\r\n            try {\r\n                window.dataLayer = window.dataLayer || [];\r\n                window.dataLayer.push(Object.assign({ spiel_seite: 'fahrtauglich' }, daten));\r\n            } catch (err) {}\r\n        }\r\n\r\n        \/\/ \u2500\u2500 Bedienelemente \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n        function klick(btn, fn) {\r\n            btn.addEventListener('click', e => {\r\n                e.preventDefault();\r\n                if (e.detail > 0) btn.blur();\r\n                fn();\r\n            });\r\n        }\r\n        klick(btnNeu, neuesRaetsel);\r\n        klick(btnLoesung, loesungZeigen);\r\n        stufenBtns.forEach(b => klick(b, () => { stufe = b.dataset.stufe; neuesRaetsel(); }));\r\n        kategorieEl.addEventListener('change', neuesRaetsel);\r\n        klick(document.getElementById('ftb-modal-neu'), () => { modalSchliessen(); neuesRaetsel(); });\r\n\r\n        \/\/ \u2500\u2500 Dialog \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n        function modalOeffnen() {\r\n            modal.classList.add('active');\r\n            document.body.style.overflow = 'hidden';\r\n            document.getElementById('ftb-modal-neu').focus();\r\n        }\r\n        function modalSchliessen() {\r\n            modal.classList.remove('active');\r\n            document.body.style.overflow = '';\r\n        }\r\n        modal.querySelector('.ftb-modal-schliessen').addEventListener('click', modalSchliessen);\r\n        modal.querySelector('.ftb-modal-hintergrund').addEventListener('click', modalSchliessen);\r\n        document.addEventListener('keydown', e => {\r\n            if (e.key === 'Escape' && modal.classList.contains('active')) { e.preventDefault(); modalSchliessen(); }\r\n        });\r\n\r\n        \/\/ \u2500\u2500 Start \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n        neuesRaetsel();\r\n        try {\r\n            if (!localStorage.getItem('ft_buchstabensalat_seen')) {\r\n                document.getElementById('ftb-anleitung').open = true;\r\n                localStorage.setItem('ft_buchstabensalat_seen', '1');\r\n            }\r\n        } catch (err) {}\r\n    }\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Entdecken Sie unseren interaktiven Buchstabensalat online \u2013 das kostenlose Wortsuchr\u00e4tsel in verschiedenen Schwierigkeitsstufen und Kategorien wie Tiere, L\u00e4nder und mehr. Trainieren Sie Ihr Gehirn und verbessern Sie Ihre Konzentration mit diesem unterhaltsamen Wortspiel!<\/p>","protected":false},"author":1,"featured_media":0,"parent":1467,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"iawp_total_views":16134,"footnotes":""},"class_list":["post-4361","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Buchstabensalat<\/title>\n<meta name=\"description\" content=\"Buchstabensalat: Trainieren Sie Ihre geistigen F\u00e4higkeiten mit dem Buchstabensalat. Viel Spass beim L\u00f6sen des Buchstabensalats!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fahrtauglich.ch\/fr\/praxisportal\/buchstabensalat\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Buchstabensalat\" \/>\n<meta property=\"og:description\" content=\"Buchstabensalat: Trainieren Sie Ihre geistigen F\u00e4higkeiten mit dem Buchstabensalat. Viel Spass beim L\u00f6sen des Buchstabensalats!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fahrtauglich.ch\/fr\/praxisportal\/buchstabensalat\/\" \/>\n<meta property=\"og:site_name\" content=\"Fahrtauglich\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-12T10:24:43+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/fahrtauglich.ch\\\/praxisportal\\\/buchstabensalat\\\/\",\"url\":\"https:\\\/\\\/fahrtauglich.ch\\\/praxisportal\\\/buchstabensalat\\\/\",\"name\":\"Buchstabensalat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/fahrtauglich.ch\\\/#website\"},\"datePublished\":\"2024-11-14T15:28:44+00:00\",\"dateModified\":\"2026-10-12T10:24:43+00:00\",\"description\":\"Buchstabensalat: Trainieren Sie Ihre geistigen F\u00e4higkeiten mit dem Buchstabensalat. Viel Spass beim L\u00f6sen des Buchstabensalats!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/fahrtauglich.ch\\\/praxisportal\\\/buchstabensalat\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/fahrtauglich.ch\\\/praxisportal\\\/buchstabensalat\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/fahrtauglich.ch\\\/praxisportal\\\/buchstabensalat\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\\\/\\\/fahrtauglich.ch\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Praxisportal\",\"item\":\"https:\\\/\\\/fahrtauglich.ch\\\/praxisportal\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Buchstabensalat\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/fahrtauglich.ch\\\/#website\",\"url\":\"https:\\\/\\\/fahrtauglich.ch\\\/\",\"name\":\"Fahrtauglich\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/fahrtauglich.ch\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/fahrtauglich.ch\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/fahrtauglich.ch\\\/#organization\",\"name\":\"Fahrtauglich\",\"url\":\"https:\\\/\\\/fahrtauglich.ch\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/fahrtauglich.ch\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/fahrtauglich.ch\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/cropped-Logo-2.jpg\",\"contentUrl\":\"https:\\\/\\\/fahrtauglich.ch\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/cropped-Logo-2.jpg\",\"width\":307,\"height\":188,\"caption\":\"Fahrtauglich\"},\"image\":{\"@id\":\"https:\\\/\\\/fahrtauglich.ch\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Salade de lettres","description":"Buchstabensalat: Trainieren Sie Ihre geistigen F\u00e4higkeiten mit dem Buchstabensalat. Viel Spass beim L\u00f6sen des Buchstabensalats!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fahrtauglich.ch\/fr\/praxisportal\/buchstabensalat\/","og_locale":"fr_FR","og_type":"article","og_title":"Buchstabensalat","og_description":"Buchstabensalat: Trainieren Sie Ihre geistigen F\u00e4higkeiten mit dem Buchstabensalat. Viel Spass beim L\u00f6sen des Buchstabensalats!","og_url":"https:\/\/fahrtauglich.ch\/fr\/praxisportal\/buchstabensalat\/","og_site_name":"Fahrtauglich","article_modified_time":"2026-10-12T10:24:43+00:00","twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/fahrtauglich.ch\/praxisportal\/buchstabensalat\/","url":"https:\/\/fahrtauglich.ch\/praxisportal\/buchstabensalat\/","name":"Salade de lettres","isPartOf":{"@id":"https:\/\/fahrtauglich.ch\/#website"},"datePublished":"2024-11-14T15:28:44+00:00","dateModified":"2026-10-12T10:24:43+00:00","description":"Buchstabensalat: Trainieren Sie Ihre geistigen F\u00e4higkeiten mit dem Buchstabensalat. Viel Spass beim L\u00f6sen des Buchstabensalats!","breadcrumb":{"@id":"https:\/\/fahrtauglich.ch\/praxisportal\/buchstabensalat\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fahrtauglich.ch\/praxisportal\/buchstabensalat\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fahrtauglich.ch\/praxisportal\/buchstabensalat\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/fahrtauglich.ch\/"},{"@type":"ListItem","position":2,"name":"Praxisportal","item":"https:\/\/fahrtauglich.ch\/praxisportal\/"},{"@type":"ListItem","position":3,"name":"Buchstabensalat"}]},{"@type":"WebSite","@id":"https:\/\/fahrtauglich.ch\/#website","url":"https:\/\/fahrtauglich.ch\/","name":"Fahrtauglich","description":"","publisher":{"@id":"https:\/\/fahrtauglich.ch\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fahrtauglich.ch\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/fahrtauglich.ch\/#organization","name":"Fahrtauglich","url":"https:\/\/fahrtauglich.ch\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/fahrtauglich.ch\/#\/schema\/logo\/image\/","url":"https:\/\/fahrtauglich.ch\/wp-content\/uploads\/2024\/08\/cropped-Logo-2.jpg","contentUrl":"https:\/\/fahrtauglich.ch\/wp-content\/uploads\/2024\/08\/cropped-Logo-2.jpg","width":307,"height":188,"caption":"Fahrtauglich"},"image":{"@id":"https:\/\/fahrtauglich.ch\/#\/schema\/logo\/image\/"}}]}},"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"fahrtauglich.ch","author_link":"https:\/\/fahrtauglich.ch\/fr\/blog\/author\/mintcream-quetzal-259960-hostingersite-com\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"Entdecken Sie unseren interaktiven Buchstabensalat online \u2013 das kostenlose Wortsuchr\u00e4tsel in verschiedenen Schwierigkeitsstufen und Kategorien wie Tiere, L\u00e4nder und mehr. Trainieren Sie Ihr Gehirn und verbessern Sie Ihre Konzentration mit diesem unterhaltsamen Wortspiel!","_links":{"self":[{"href":"https:\/\/fahrtauglich.ch\/fr\/wp-json\/wp\/v2\/pages\/4361","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fahrtauglich.ch\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fahrtauglich.ch\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fahrtauglich.ch\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fahrtauglich.ch\/fr\/wp-json\/wp\/v2\/comments?post=4361"}],"version-history":[{"count":223,"href":"https:\/\/fahrtauglich.ch\/fr\/wp-json\/wp\/v2\/pages\/4361\/revisions"}],"predecessor-version":[{"id":8575,"href":"https:\/\/fahrtauglich.ch\/fr\/wp-json\/wp\/v2\/pages\/4361\/revisions\/8575"}],"up":[{"embeddable":true,"href":"https:\/\/fahrtauglich.ch\/fr\/wp-json\/wp\/v2\/pages\/1467"}],"wp:attachment":[{"href":"https:\/\/fahrtauglich.ch\/fr\/wp-json\/wp\/v2\/media?parent=4361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}