<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learn German Grammar Visually | Interactive Sentence Structure & AI Story Generator</title>
    
    <!-- SEO Meta Tags -->
    <meta name="description" content="Master German grammar through interactive visualization! Learn German sentence structure with AI-powered parsing, dependency trees, and 3D grammar visualization. Perfect for visual learners and educators.">
    <meta name="keywords" content="learn German grammar, German grammar visualization, visual German learning, German sentence structure, interactive grammar learning, German language learning app, visual grammar parsing, German dependency trees, 3D grammar visualization, German learning tools, visual language learning, German grammar practice, AI story generation, German syntax visualization, educational grammar tool, German case visualization, German word order learning">
    <meta name="author" content="satzklar">
    <meta name="robots" content="index, follow">
    <meta name="language" content="English">
    <meta name="revisit-after" content="7 days">
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://satzklar.net/">
    <meta property="og:title" content="satzklar - Learn German Grammar Visually & AI Story Generator">
    <meta property="og:description" content="Master German grammar through interactive visualization! Learn sentence structure with AI-powered parsing, 3D grammar trees, and visual dependency analysis. Perfect for visual learners.">
    <meta property="og:image" content="https://satzklar.net/images/logo@2x.png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:site_name" content="satzklar">
    <meta property="og:locale" content="en_US">
    
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://satzklar.net/">
    <meta property="twitter:title" content="Learn German Grammar Through Interactive Visualization">
    <meta property="twitter:description" content="Master German sentence structure with 3D grammar visualization! Interactive learning tool with AI-powered parsing and visual dependency trees. Perfect for visual learners.">
    <meta property="twitter:image" content="https://satzklar.net/images/logo@2x.png">
    
    <!-- Canonical URL -->
    <link rel="canonical" href="https://satzklar.net/">
    
    <!-- Language alternate versions -->
    <link rel="alternate" href="https://satzklar.net/" hreflang="en">
    <link rel="alternate" href="https://satzklar.net/" hreflang="x-default">
    
    <!-- Structured Data -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "EducationalApplication",
      "name": "German Grammar Visualization & AI Text Generator",
      "alternateName": "satzklar",
      "description": "Interactive German grammar learning platform with visual sentence structure analysis. Master German through 3D grammar visualization, AI-powered parsing, and immersive educational tools.",
      "url": "https://satzklar.net",
      "applicationCategory": "EducationalApplication",
      "operatingSystem": "Web Browser",
      "browserRequirements": "Requires JavaScript. Requires HTML5.",
      "softwareVersion": "2.0",
      "offers": {
        "@type": "Offer",
        "price": "0",
        "priceCurrency": "USD"
      },
      "creator": {
        "@type": "Organization",
        "name": "satzklar"
      },
      "inLanguage": "en",
      "about": {
        "@type": "Thing",
        "name": "German Grammar",
        "description": "German language grammar, syntax, and sentence structure analysis"
      },
      "keywords": ["German grammar", "AI text generator", "random German sentences", "story generation", "dependency parsing", "language learning", "syntax analysis", "educational tool"],
      "featureList": [
        "AI-powered random German sentence generation",
        "German story generation with context",
        "Interactive dependency tree visualization",
        "Component-based grammar parsing", 
        "3D sentence structure visualization",
        "Real-time German text analysis",
        "Educational grammar references"
      ]
    }
    </script>
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Fraktur:wght@400&family=Germania+One&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css?v=34">
    <link rel="stylesheet" href="reference-styles.css?v=2">
    <link rel="stylesheet" href="reference-sidebar-styles.css?v=6">
    <link rel="stylesheet" href="css/sentence-history-v5.css?v=11">
    <link rel="stylesheet" href="css/help-modal-styles.css?v=1">
    <!-- Favicon and app icons -->
    <link rel="icon" type="image/svg+xml" href="/images/favicon.svg">
    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
    <link rel="icon" type="image/png" sizes="64x64" href="/images/favicon-64x64.png">
    <link rel="icon" type="image/png" sizes="128x128" href="/images/favicon-128x128.png">
    <link rel="icon" type="image/png" sizes="192x192" href="/images/favicon-192x192.png">
    <link rel="icon" type="image/png" sizes="512x512" href="/images/favicon-512x512.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
    <meta name="theme-color" content="#1565c0">
    <meta name="application-name" content="German Grammar Visualization">
    
    <!-- Hide SEO content immediately to prevent flash -->
    <style>
        .seo-only {
            display: none !important;
        }
        
        /* Extra protection during page loads/language switches */
        .main-title.seo-only,
        .features-overview.seo-only,
        h1.seo-only,
        section.seo-only {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            height: 0 !important;
            overflow: hidden !important;
            position: absolute !important;
            left: -9999px !important;
        }
    </style>
    
    <!-- Inline Story Creation Form Styles -->
    <style>
        /* Main App Story Form Styles */
        .main-app-story-form {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 0;
            margin: 20px auto 0 auto;
            border: 1px solid #e0e0e0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            max-width: 600px;
            width: 100%;
        }
        
        .main-app-story-form .form-header {
            background: #fff;
            padding: 20px 25px;
            border-bottom: 1px solid #e0e0e0;
            border-radius: 12px 12px 0 0;
        }
        
        .main-app-story-form .form-header h3 {
            margin: 0 0 8px 0;
            color: #333;
            font-size: 1.4rem;
        }
        
        .main-app-story-form .form-header p {
            margin: 0;
            color: #666;
            font-size: 0.95rem;
        }
        
        .main-app-story-form .story-form {
            padding: 25px;
        }
        
        .main-app-story-form .form-group {
            margin-bottom: 20px;
        }
        
        .main-app-story-form label {
            display: block;
            margin-bottom: 6px;
            font-weight: 600;
            color: #333;
            font-size: 0.9rem;
        }
        
        .main-app-story-form .required {
            color: #e74c3c;
        }
        
        .main-app-story-form input[type="text"],
        .main-app-story-form select {
            width: 100%;
            padding: 10px 12px;
            border: 2px solid #e0e0e0;
            border-radius: 6px;
            font-size: 14px;
            transition: border-color 0.3s;
            background: #fff;
            color: #333;
            box-sizing: border-box;
        }
        
        .main-app-story-form input[type="text"]:focus,
        .main-app-story-form select:focus {
            outline: none;
            border-color: #1565c0;
        }
        
        .main-app-story-form input[type="text"][readonly] {
            background: #f8f9fa;
            color: #495057;
            border-color: #dee2e6;
            cursor: default;
        }
        
        .main-app-story-form input[type="text"][readonly]:focus {
            border-color: #dee2e6;
            box-shadow: none;
        }
        
        .main-app-story-form .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }
        
        .main-app-story-form .difficulty-selector {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }
        
        .main-app-story-form .difficulty-option {
            position: relative;
        }
        
        .main-app-story-form .difficulty-option input[type="radio"] {
            position: absolute;
            opacity: 0;
        }
        
        .main-app-story-form .difficulty-option label {
            display: block;
            padding: 10px 8px;
            text-align: center;
            border: 2px solid #e0e0e0;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
            margin: 0;
            font-size: 0.85rem;
        }
        
        .main-app-story-form .difficulty-option input[type="radio"]:checked + label {
            background: #1565c0;
            color: white;
            border-color: #1565c0;
        }
        
        .main-app-story-form .difficulty-option label:hover {
            border-color: #1565c0;
            background: #f5f5f5;
        }
        
        .main-app-story-form .difficulty-option input[type="radio"]:checked + label:hover {
            background: #0d47a1;
        }
        
        .main-app-story-form .difficulty-label {
            font-weight: bold;
            font-size: 0.8em;
            display: block;
        }
        
        .main-app-story-form .difficulty-desc {
            font-size: 0.7em;
            opacity: 0.8;
            margin-top: 2px;
            display: block;
        }
        
        .main-app-story-form .length-selector {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }
        
        .main-app-story-form .length-option {
            position: relative;
        }
        
        .main-app-story-form .length-option input[type="radio"] {
            position: absolute;
            opacity: 0;
        }
        
        .main-app-story-form .length-option label {
            display: block;
            padding: 10px;
            text-align: center;
            border: 2px solid #e0e0e0;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
            margin: 0;
            font-size: 0.85rem;
        }
        
        .main-app-story-form .length-option input[type="radio"]:checked + label {
            background: #1565c0;
            color: white;
            border-color: #1565c0;
        }
        
        .main-app-story-form .help-text {
            font-size: 0.8rem;
            color: #666;
            margin-top: 4px;
        }
        
        .main-app-story-form .form-actions {
            display: flex;
            gap: 12px;
            justify-content: center;
            margin-top: 25px;
        }
        
        .main-app-story-form .generate-btn {
            background: #1565c0;
            color: white;
            border: none;
            padding: 12px 24px;
            font-size: 1rem;
            font-weight: 600;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .main-app-story-form .generate-btn:hover {
            background: #0d47a1;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }
        
        .main-app-story-form .cancel-btn {
            background: #f5f5f5;
            color: #666;
            border: 2px solid #e0e0e0;
            padding: 10px 24px;
            font-size: 1rem;
            font-weight: 600;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .main-app-story-form .cancel-btn:hover {
            border-color: #666;
            color: #333;
        }
        
        .main-story-result {
            padding: 20px;
            border-top: 1px solid #e0e0e0;
            background: #fff;
            border-radius: 0 0 12px 12px;
        }
        
        /* Mobile responsiveness */
        @media (max-width: 768px) {
            .main-app-story-form .form-row {
                grid-template-columns: 1fr;
            }
            
            .main-app-story-form .difficulty-selector {
                grid-template-columns: 1fr;
            }
            
            .main-app-story-form .length-selector {
                grid-template-columns: 1fr;
            }
            
            .main-app-story-form .form-actions {
                flex-direction: column;
            }
            
            .main-app-story-form .generate-btn,
            .main-app-story-form .cancel-btn {
                width: 100%;
            }
        }
    </style>
    
    <link rel="manifest" href="/manifest.json">
</head>
<body>
    <!-- Mobile Header Bar (hidden on desktop) -->
    <header id="mobileHeader" class="mobile-header mobile-only">
        <a href="https://satzklar.net" target="_blank" rel="noopener noreferrer" class="mobile-logo-link">
            <img src="/images/logo.svg" alt="satzklar - Free German Grammar Checker & Language Learning Tool" class="mobile-logo">
        </a>
        <div class="mobile-slogan-container">
            <div class="mobile-slogan" id="mobileSloganClick" data-tooltip="English: 'Crystal clear sentences'" data-i18n-tooltip="tooltips.slogan">Kristallklare Sätze</div>
            <div class="header-nav mobile-header-nav"></div>
        </div>
    </header>

    <!-- Main Application Interface -->
    <main>

        <!-- Input Controls Section -->
        <section id="controls" aria-label="German text input and analysis controls">
        <h1 class="main-title seo-only" style="display: none !important;">German Grammar Analyzer & AI Story Generator</h1>
        <div class="logo-and-label desktop-only">
            <div class="logo-above-input">
                <a href="https://satzklar.net" target="_blank" rel="noopener noreferrer" class="logo-link">
                    <img src="/images/logo.svg" alt="satzklar - AI German Grammar Analyzer & Sentence Parser Tool" class="input-logo">
                </a>
                <div class="slogan-and-contact">
                    <div class="logo-slogan" data-tooltip="English: 'Crystal clear sentences' - Our approach to making German grammar transparent and understandable." data-i18n-tooltip="tooltips.slogan">Kristallklare Sätze</div>
                    <div class="header-nav desktop-only"></div>
                </div>
            </div>
        </div>
        <div class="input-group">
            <div class="input-section">
                <div class="text-input-row">
                    <div class="textarea-container">
                        <textarea 
                            id="germanInput" 
                            placeholder="Enter German text for grammar checking & sentence analysis... (e.g., 'Der fleißige Student hat gestern Abend spät mit dem Studium seiner schwierigen Hausaufgaben begonnen.')"
                            data-i18n-placeholder="input.placeholder"
                            data-i18n="input.defaultSentence"
                            data-tooltip="Free German grammar checker - Enter text for sentence parsing, dependency analysis, and interactive language learning"
                            data-i18n-tooltip="tooltips.textInput"
                            maxlength="1000"
                        >Der schnelle braune Fuchs springt über den faulen Hund.</textarea>
                        
                        <!-- TTS Controls for reading the sentence -->
                        <div class="input-tts-controls">
                            <button class="input-tts-icon" title="Play audio pronunciation of your German sentence" data-i18n-title="tts.listen">🔊</button>
                            <select class="input-voice-selector" title="Choose German voice for pronunciation" data-i18n-title="tts.chooseVoice">
                                <option value="marlene" selected>Marlene</option>
                                <option value="birgit">Birgit</option>
                                <option value="hans">Hans</option>
                                <option value="klaus">Klaus</option>
                            </select>
                        </div>
                        
                        <!-- Character Picker Button (All Devices) -->
                        <button class="mobile-character-trigger" data-tooltip="Special characters" data-i18n-tooltip="tooltips.characterHelper">Ä</button>
                        
                        <!-- History Button -->
                        <button class="history-button" id="historyButton" data-tooltip="View sentence history: Select from previously analyzed sentences" data-i18n-tooltip="tooltips.sentenceHistory" disabled>
                            <span class="history-icon">🕒</span>
                            <span class="history-count" id="historyCount" style="display: none;">0</span>
                        </button>
                        
                        <!-- History Dropdown (initially hidden) -->
                        <div class="history-dropdown" id="historyDropdown" style="display: none;">
                            <div class="history-header">
                                <span class="history-title" data-i18n="history.title">Recent Sentences (click to select)</span>
                                <button class="history-clear" id="historyClear" data-tooltip="Clear all history" data-i18n-tooltip="tooltips.clearHistory">🗑️</button>
                            </div>
                            <div class="history-list" id="historyList">
                                <!-- History items will be populated here -->
                            </div>
                        </div>
                    </div>
                    
                    <div class="button-group">
                        <button 
                            id="parseButton" 
                            class="parse-button"
                            data-tooltip="Analyze German text with AI-powered grammar parsing and dependency trees"
                            data-i18n-tooltip="tooltips.analyzeText"
                        ><span class="button-icon">✨</span><span class="button-text" data-i18n="controls.analyzeShort"> Analyze Text</span></button>
                        <button 
                            id="luckyButton" 
                            class="lucky-button"
                            data-tooltip="Generate random German sentences with AI - automatically analyzed with grammar trees"
                            data-i18n-tooltip="tooltips.randomText"
                        ><span class="button-icon">🎲</span><span class="button-text" data-i18n="controls.randomText"> Random Text</span></button>
                    </div>
                    
                    <!-- Dynamic Ad System -->
                    <div id="dynamicAd" class="dynamic-ad-inline" data-ad-type="feature" data-ad-id="emphasis-game">
                        <!-- Ad content will be dynamically generated by ad-manager.js -->
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content Area -->
    <div class="sidebar-toggle" id="sidebarToggle" title="Toggle References Panel" data-i18n-title="references.toggle">
        <span class="toggle-icon">📚</span>
        <span class="toggle-text" data-i18n="tabs.references">References</span>
    </div>

    <div id="referencesSidebar" class="references-sidebar collapsed">        
        <div class="sidebar-content">
            <div id="componentReference" class="reference-legend collapsed">
                <div class="legend-header" id="componentReferenceHeader">
                    <span class="legend-title" data-i18n="analysis.components">Components</span>
                    <span class="legend-toggle">▼</span>
                </div>
                <div class="legend-content" id="componentReferenceContent">
                    <div class="legend-grid">
                        <div class="legend-category">
                            <div class="category-title" data-i18n="references.sentenceStructure">Sentence Structure</div>
                            <div class="legend-items">
                                <span class="legend-item" data-tooltip="Satz - Complete German sentence containing all necessary grammatical elements" data-i18n-tooltip="references.tooltips.satz">Satz (Sentence)</span>
                                <span class="legend-item" data-tooltip="Hauptsatz - Main clause that can stand alone as a complete sentence" data-i18n-tooltip="references.tooltips.hauptsatz">Hauptsatz (Main Clause)</span>
                                <span class="legend-item" data-tooltip="Nebensatz - Dependent clause that cannot stand alone" data-i18n-tooltip="references.tooltips.nebensatz">Nebensatz (Subordinate)</span>
                                <span class="legend-item" data-tooltip="Relativsatz - Relative clause modifying a noun (der/die/das)" data-i18n-tooltip="references.tooltips.relativsatz">Relativsatz (Relative)</span>
                                <span class="legend-item" data-tooltip="Adverbialsatz - Adverbial clause describing circumstances" data-i18n-tooltip="references.tooltips.adverbialsatz">Adverbialsatz (Adverbial)</span>
                            </div>
                        </div>
                        <div class="legend-category">
                            <div class="category-title" data-i18n="references.phraseComponents">Phrase Components</div>
                            <div class="legend-items">
                                <span class="legend-item" data-tooltip="Subjekt-NP - Subject noun phrase including all modifiers" data-i18n-tooltip="references.tooltips.subjektNP">Subjekt-NP (Subject)</span>
                                <span class="legend-item" data-tooltip="Prädikat - The predicate containing the verb and its complements" data-i18n-tooltip="references.tooltips.praedikat">Prädikat (Predicate)</span>
                                <span class="legend-item" data-tooltip="Akkusativobjekt-NP - Direct object noun phrase in accusative case" data-i18n-tooltip="references.tooltips.akkusativobjektNP">Akkusativobjekt-NP (Direct Obj)</span>
                                <span class="legend-item" data-tooltip="Dativobjekt-NP - Indirect object noun phrase in dative case" data-i18n-tooltip="references.tooltips.dativobjektNP">Dativobjekt-NP (Indirect Obj)</span>
                                <span class="legend-item" data-tooltip="Präpositionalobjekt-NP - Object of a preposition with its modifiers" data-i18n-tooltip="references.tooltips.praepositionalobjektNP">Präpositionalobjekt-NP (Prep Obj)</span>
                            </div>
                        </div>
                        <div class="legend-category">
                            <div class="category-title" data-i18n="references.wordComponents">Word-Level Components</div>
                            <div class="legend-items">
                                <span class="legend-item" data-tooltip="Substantiv - Main noun (person, place, thing, or concept)" data-i18n-tooltip="references.tooltips.substantiv">Substantiv (Noun)</span>
                                <span class="legend-item" data-tooltip="Verb - Action or state verb" data-i18n-tooltip="references.tooltips.verb">Verb (Verb)</span>
                                <span class="legend-item" data-tooltip="Adjektiv - Word describing a noun" data-i18n-tooltip="references.tooltips.adjektiv">Adjektiv (Adjective)</span>
                                <span class="legend-item" data-tooltip="Adverb - Word modifying verbs, adjectives, or other adverbs" data-i18n-tooltip="references.tooltips.adverb">Adverb (Adverb)</span>
                                <span class="legend-item" data-tooltip="Artikel - Definite or indefinite article (der/die/das, ein/eine)" data-i18n-tooltip="references.tooltips.artikel">Artikel (Article)</span>
                                <span class="legend-item" data-tooltip="Pronomen - Word replacing a noun (ich, du, er, sie, es)" data-i18n-tooltip="references.tooltips.pronomen">Pronomen (Pronoun)</span>
                                <span class="legend-item" data-tooltip="Präposition - Word showing relationships (in, auf, mit, von)" data-i18n-tooltip="references.tooltips.praeposition">Präposition (Preposition)</span>
                                <span class="legend-item" data-tooltip="Partikel - Modal particle expressing attitude (doch, ja, halt)" data-i18n-tooltip="references.tooltips.partikel">Partikel (Particle)</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="posReference" class="reference-legend collapsed">
                <div class="legend-header" id="posReferenceHeader">
                    <span class="legend-title" data-i18n="references.partsOfSpeech">Parts of Speech</span>
                    <span class="legend-toggle">▼</span>
                </div>
                <div class="legend-content" id="posReferenceContent">
                    <div class="legend-grid">
                        <div class="legend-category">
                            <div class="category-title" data-i18n="references.coreWords">Core Word Types</div>
                            <div class="legend-items">
                                <span class="legend-item" data-tooltip="NOUN - Person, place, thing, or idea (Hund, Haus, Liebe)" data-i18n-tooltip="references.tooltips.pos_noun">NOUN (Noun)</span>
                                <span class="legend-item" data-tooltip="VERB - Action or state of being (laufen, sein, haben)" data-i18n-tooltip="references.tooltips.pos_verb">VERB (Verb)</span>
                                <span class="legend-item" data-tooltip="ADJ - Describes a noun or pronoun (schnell, groß, schön)" data-i18n-tooltip="references.tooltips.adj">ADJ (Adjective)</span>
                                <span class="legend-item" data-tooltip="ADV - Modifies verb, adjective, or adverb (sehr, heute, dort)" data-i18n-tooltip="references.tooltips.adv">ADV (Adverb)</span>
                            </div>
                        </div>
                        <div class="legend-category">
                            <div class="category-title" data-i18n="references.functionWords">Function Words</div>
                            <div class="legend-items">
                                <span class="legend-item" data-tooltip="DET - Specifies which noun (der, die, das, ein, eine)" data-i18n-tooltip="references.tooltips.det">DET (Determiner)</span>
                                <span class="legend-item" data-tooltip="PRON - Replaces a noun (ich, du, er, sie, es, wir)" data-i18n-tooltip="references.tooltips.pron">PRON (Pronoun)</span>
                                <span class="legend-item" data-tooltip="ADP - Shows relationship, prepositions (in, auf, mit, von)" data-i18n-tooltip="references.tooltips.adp">ADP (Preposition)</span>
                                <span class="legend-item" data-tooltip="AUX - Helping verb (haben, sein, werden, müssen)" data-i18n-tooltip="references.tooltips.aux">AUX (Auxiliary)</span>
                            </div>
                        </div>
                        <div class="legend-category">
                            <div class="category-title" data-i18n="references.connectingWords">Connecting Words</div>
                            <div class="legend-items">
                                <span class="legend-item" data-tooltip="CCONJ - Connects equal elements (und, oder, aber)" data-i18n-tooltip="references.tooltips.cconj">CCONJ (Coordinator)</span>
                                <span class="legend-item" data-tooltip="SCONJ - Introduces dependent clause (dass, weil, wenn)" data-i18n-tooltip="references.tooltips.sconj">SCONJ (Subordinator)</span>
                                <span class="legend-item" data-tooltip="PART - Function word or particle (zu, nicht, doch)" data-i18n-tooltip="references.tooltips.part">PART (Particle)</span>
                            </div>
                        </div>
                        <div class="legend-category">
                            <div class="category-title" data-i18n="references.otherTypes">Other Types</div>
                            <div class="legend-items">
                                <span class="legend-item" data-tooltip="NUM - Number or numeral (eins, zwei, drei, viele)" data-i18n-tooltip="references.tooltips.num">NUM (Number)</span>
                                <span class="legend-item" data-tooltip="INTJ - Exclamation or interjection (ach, oh, wow)" data-i18n-tooltip="references.tooltips.intj">INTJ (Interjection)</span>
                                <span class="legend-item" data-tooltip="PUNCT - Punctuation mark (. , ! ? : ;)" data-i18n-tooltip="references.tooltips.punct">PUNCT (Punctuation)</span>
                                <span class="legend-item" data-tooltip="X - Unknown or other category" data-i18n-tooltip="references.tooltips.x">X (Other)</span>
                            </div>
                        </div>
                    </div>
                </div>
        </div>

            <div id="relationsReference" class="reference-legend collapsed">
                <div class="legend-header" id="relationsReferenceHeader">
                    <span class="legend-title" data-i18n="references.grammaticalRoles">Grammatical Roles</span>
                    <span class="legend-toggle">▼</span>
                </div>
            <div class="legend-content" id="relationsReferenceContent">
                <div class="legend-grid">
                    <div class="legend-category">
                        <div class="category-title" data-i18n="references.coreRoles">Core Roles</div>
                        <div class="legend-items">
                            <span class="legend-item" data-tooltip="Root - Main verb or head of the sentence" data-i18n-tooltip="references.tooltips.root">root (Main verb)</span>
                            <span class="legend-item" data-tooltip="Nominal Subject - Subject of the verb (who/what does the action)" data-i18n-tooltip="references.tooltips.nsubj">nsubj (Subject)</span>
                            <span class="legend-item" data-tooltip="Direct Object - Direct object of the verb (who/what receives the action)" data-i18n-tooltip="references.tooltips.obj">obj (Direct Object)</span>
                            <span class="legend-item" data-tooltip="Indirect Object - Indirect object of the verb (to/for whom)" data-i18n-tooltip="references.tooltips.iobj">iobj (Indirect Object)</span>
                        </div>
                    </div>
                    <div class="legend-category">
                        <div class="category-title" data-i18n="references.modifiers">Modifiers</div>
                        <div class="legend-items">
                            <span class="legend-item" data-tooltip="Adjectival Modifier - Adjective modifying a noun" data-i18n-tooltip="references.tooltips.amod">amod (Adjective)</span>
                            <span class="legend-item" data-tooltip="Adverbial Modifier - Adverb or adverbial phrase" data-i18n-tooltip="references.tooltips.advmod">advmod (Adverb)</span>
                            <span class="legend-item" data-tooltip="Nominal Modifier - Noun modifying another noun" data-i18n-tooltip="references.tooltips.nmod">nmod (Noun Modifier)</span>
                            <span class="legend-item" data-tooltip="Numeric Modifier - Number modifying a noun" data-i18n-tooltip="references.tooltips.nummod">nummod (Number)</span>
                        </div>
                    </div>
                    <div class="legend-category">
                        <div class="category-title" data-i18n="references.determinersCase">Determiners & Case</div>
                        <div class="legend-items">
                            <span class="legend-item" data-tooltip="Determiner - Article or determiner (der, die, das, ein, etc.)" data-i18n-tooltip="references.tooltips.det_role">det (Article)</span>
                            <span class="legend-item" data-tooltip="Case - Preposition marking case relationship" data-i18n-tooltip="references.tooltips.case">case (Preposition)</span>
                            <span class="legend-item" data-tooltip="Oblique - Prepositional phrase or oblique argument" data-i18n-tooltip="references.tooltips.obl">obl (Prepositional)</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

            
            <div id="featuresReference" class="reference-legend collapsed">
                <div class="legend-header" id="featuresReferenceHeader">
                    <span class="legend-title" data-i18n="references.features">Features</span>
                    <span class="legend-toggle">▼</span>
                </div>
            <div class="legend-content" id="featuresReferenceContent">
                <div class="legend-grid">
                    <div class="legend-category">
                        <div class="category-title" data-i18n="references.case">Case</div>
                        <div class="legend-items">
                            <span class="legend-item" data-tooltip="Nominative case - used for the subject of a sentence" data-i18n-tooltip="references.tooltips.nom">Nom (Subject)</span>
                            <span class="legend-item" data-tooltip="Accusative case - used for the direct object of a verb" data-i18n-tooltip="references.tooltips.acc">Acc (Direct Object)</span>
                            <span class="legend-item" data-tooltip="Dative case - used for the indirect object, often with prepositions like mit, von, zu" data-i18n-tooltip="references.tooltips.dat">Dat (Indirect Object)</span>
                            <span class="legend-item" data-tooltip="Genitive case - used to show possession or ownership" data-i18n-tooltip="references.tooltips.gen">Gen (Possessive)</span>
                        </div>
                    </div>
                    <div class="legend-category">
                        <div class="category-title" data-i18n="references.genderNumber">Gender & Number</div>
                        <div class="legend-items">
                            <span class="legend-item" data-tooltip="Masculine gender - used with der articles and masculine nouns" data-i18n-tooltip="references.tooltips.masc">Masc (Masculine)</span>
                            <span class="legend-item" data-tooltip="Feminine gender - used with die articles and feminine nouns" data-i18n-tooltip="references.tooltips.fem">Fem (Feminine)</span>
                            <span class="legend-item" data-tooltip="Neuter gender - used with das articles and neuter nouns" data-i18n-tooltip="references.tooltips.neut">Neut (Neuter)</span>
                            <span class="legend-item" data-tooltip="Singular - refers to one person, thing, or instance" data-i18n-tooltip="references.tooltips.sing">Sing (Singular)</span>
                            <span class="legend-item" data-tooltip="Plural - refers to multiple people, things, or instances" data-i18n-tooltip="references.tooltips.plur">Plur (Plural)</span>
                        </div>
                    </div>
                    <div class="legend-category">
                        <div class="category-title" data-i18n="references.person">Person</div>
                        <div class="legend-items">
                            <span class="legend-item" data-tooltip="First person - the speaker (ich, wir)" data-i18n-tooltip="references.tooltips.first">1 (First person)</span>
                            <span class="legend-item" data-tooltip="Second person - the addressee (du, ihr, Sie)" data-i18n-tooltip="references.tooltips.second">2 (Second person)</span>
                            <span class="legend-item" data-tooltip="Third person - someone/something else (er, sie, es, sie)" data-i18n-tooltip="references.tooltips.third">3 (Third person)</span>
                        </div>
                    </div>
                    <div class="legend-category">
                        <div class="category-title" data-i18n="references.tenseMood">Tense & Mood</div>
                        <div class="legend-items">
                            <span class="legend-item" data-tooltip="Present tense - actions happening now or general truths" data-i18n-tooltip="references.tooltips.pres">Pres (Present)</span>
                            <span class="legend-item" data-tooltip="Past tense - actions that already happened" data-i18n-tooltip="references.tooltips.past">Past (Past)</span>
                            <span class="legend-item" data-tooltip="Indicative mood - statements of fact" data-i18n-tooltip="references.tooltips.ind">Ind (Indicative)</span>
                            <span class="legend-item" data-tooltip="Subjunctive mood - hypothetical or wishful statements" data-i18n-tooltip="references.tooltips.subj">Subj (Subjunctive)</span>
                            <span class="legend-item" data-tooltip="Imperative mood - commands or requests" data-i18n-tooltip="references.tooltips.imp">Imp (Imperative)</span>
                        </div>
                    </div>
                    <div class="legend-category">
                        <div class="category-title" data-i18n="references.formDegree">Form & Degree</div>
                        <div class="legend-items">
                            <span class="legend-item" data-tooltip="Finite verb - conjugated form with person and number" data-i18n-tooltip="references.tooltips.fin">Fin (Finite)</span>
                            <span class="legend-item" data-tooltip="Infinitive - base form of the verb (ending in -en)" data-i18n-tooltip="references.tooltips.inf">Inf (Infinitive)</span>
                            <span class="legend-item" data-tooltip="Participle - verb form used in compound tenses or as adjective" data-i18n-tooltip="references.tooltips.part_form">Part (Participle)</span>
                            <span class="legend-item" data-tooltip="Positive degree - basic form (groß = big)" data-i18n-tooltip="references.tooltips.pos">Pos (Positive)</span>
                            <span class="legend-item" data-tooltip="Comparative degree - comparison form (größer = bigger)" data-i18n-tooltip="references.tooltips.cmp">Cmp (Comparative)</span>
                            <span class="legend-item" data-tooltip="Superlative degree - highest degree (größte = biggest)" data-i18n-tooltip="references.tooltips.sup">Sup (Superlative)</span>
                        </div>
                    </div>
                    <div class="legend-category">
                        <div class="category-title" data-i18n="references.articlesPronouns">Articles & Pronouns</div>
                        <div class="legend-items">
                            <span class="legend-item" data-tooltip="Definite article - specific reference (der, die, das)" data-i18n-tooltip="references.tooltips.def">Def (Definite)</span>
                            <span class="legend-item" data-tooltip="Indefinite article - non-specific reference (ein, eine)" data-i18n-tooltip="references.tooltips.ind_art">Ind (Indefinite)</span>
                            <span class="legend-item" data-tooltip="Personal pronoun - ich, du, er, sie, es, wir, ihr, sie" data-i18n-tooltip="references.tooltips.prs">Prs (Personal)</span>
                            <span class="legend-item" data-tooltip="Relative pronoun - der/die/das in relative clauses" data-i18n-tooltip="references.tooltips.rel">Rel (Relative)</span>
                            <span class="legend-item" data-tooltip="Demonstrative pronoun - dieser, jener, der (as pronoun)" data-i18n-tooltip="references.tooltips.dem">Dem (Demonstrative)</span>
                            <span class="legend-item" data-tooltip="Interrogative pronoun - wer, was, welcher" data-i18n-tooltip="references.tooltips.int">Int (Interrogative)</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>

    <!-- Export Sidebar -->
    <div class="sidebar-toggle export-sidebar-toggle" id="exportSidebarToggle" title="Export Options" data-i18n-title="export.toggle">
        <span class="toggle-icon">📤</span>
        <span class="toggle-text" data-i18n="export.title">Export</span>
    </div>

    <div id="exportSidebar" class="references-sidebar export-sidebar collapsed">
        <div class="sidebar-content">
            <!-- Component Tree Export Section -->
            <div id="componentExportSection" class="reference-legend collapsed">
                <div class="legend-header">
                    <span class="legend-title" data-i18n="export.componentTree">Component Tree</span>
                    <span class="legend-toggle">▼</span>
                </div>
                <div class="legend-content">
                    <div class="export-options-grid">
                        <button class="export-button" data-format="png" data-tab="component">
                            <span class="export-icon">📸</span>
                            <span class="export-label" data-i18n="export.png">PNG Image</span>
                        </button>
                        <button class="export-button" data-format="svg" data-tab="component">
                            <span class="export-icon">🖼️</span>
                            <span class="export-label" data-i18n="export.svg">SVG Vector</span>
                        </button>
                        <button class="export-button" data-format="print" data-tab="component">
                            <span class="export-icon">🖨️</span>
                            <span class="export-label" data-i18n="export.print">Print</span>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Parse Tree Export Section -->
            <div id="parseExportSection" class="reference-legend collapsed">
                <div class="legend-header">
                    <span class="legend-title" data-i18n="export.parseTree">Parse Tree</span>
                    <span class="legend-toggle">▼</span>
                </div>
                <div class="legend-content">
                    <div class="export-options-grid">
                        <button class="export-button" data-format="png" data-tab="parse">
                            <span class="export-icon">📸</span>
                            <span class="export-label" data-i18n="export.png">PNG Image</span>
                        </button>
                        <button class="export-button" data-format="svg" data-tab="parse">
                            <span class="export-icon">🖼️</span>
                            <span class="export-label" data-i18n="export.svg">SVG Vector</span>
                        </button>
                        <button class="export-button" data-format="print" data-tab="parse">
                            <span class="export-icon">🖨️</span>
                            <span class="export-label" data-i18n="export.print">Print</span>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 3D Parse Tree Export Section - Hidden until reliability improves -->
            <div id="parse3dExportSection" class="reference-legend collapsed" style="display: none;">
                <div class="legend-header">
                    <span class="legend-title" data-i18n="export.parse3dTree">3D Parse Tree</span>
                    <span class="legend-toggle">▼</span>
                </div>
                <div class="legend-content">
                    <div class="export-options-grid">
                        <button class="export-button" data-format="png" data-tab="canvas">
                            <span class="export-icon">📸</span>
                            <span class="export-label" data-i18n="export.png">PNG Image</span>
                        </button>
                        <button class="export-button" data-format="svg" data-tab="canvas">
                            <span class="export-icon">🖼️</span>
                            <span class="export-label" data-i18n="export.svg">SVG Vector</span>
                        </button>
                        <button class="export-button" data-format="print" data-tab="canvas">
                            <span class="export-icon">🖨️</span>
                            <span class="export-label" data-i18n="export.print">Print</span>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Report Export Section -->
            <div id="reportExportSection" class="reference-legend collapsed">
                <div class="legend-header">
                    <span class="legend-title" data-i18n="export.report">Report</span>
                    <span class="legend-toggle">▼</span>
                </div>
                <div class="legend-content">
                    <div class="export-options-grid report-section">
                        <button class="export-button full-width" data-format="pdf" data-tab="report">
                            <span class="export-icon">📊</span>
                            <span class="export-label" data-i18n="export.pdfReport">Comprehensive PDF Report</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

        <!-- Features Overview Section -->
        <section class="features-overview seo-only" style="display: none !important;">
            <h2>Free German Grammar Checker & Language Learning Tool</h2>
            <p>Learn German online with our AI-powered sentence parser. Check German grammar, analyze dependency trees, and practice with interactive exercises. Perfect for students learning German language fundamentals.</p>
            
            <div class="feature-grid">
                <div class="feature-item">
                    <h3>🧠 German Grammar Checker</h3>
                    <p>AI-powered sentence parser identifies cases, verb forms, and grammatical relationships. Check German grammar accuracy instantly.</p>
                </div>
                <div class="feature-item">
                    <h3>📊 Interactive Language Learning</h3>
                    <p>Learn German online with dependency trees, component analysis, and 3D visualizations for better understanding.</p>
                </div>
                <div class="feature-item">
                    <h3>📚 German Practice Stories</h3>
                    <p>Generate contextual German stories incorporating analyzed sentences for practical grammar practice and language learning.</p>
                </div>
                <div class="feature-item">
                    <h3>🎯 Free German Learning Tool</h3>
                    <p>Perfect educational app for students learning German language fundamentals, syntax, and sentence structure online.</p>
                </div>
            </div>
        </section>

        <div id="mainContent">
        <!-- Tab Container -->
        <div id="panelsContainer">
            <!-- Collapsible Header -->
            <div class="tab-container-header" id="tabContainerHeader">
                <span class="tab-container-title" data-tooltip="View the parsed dependency tree, 3D visualization, and detailed sentence analysis" data-i18n-tooltip="tooltips.results" data-i18n="tabs.results">Results</span>
                <button 
                    id="shareButton" 
                    class="share-button-icon"
                    style="display: none;"
                    data-tooltip="Share this sentence: Copy shareable link to clipboard"
                    data-i18n-tooltip="tooltips.shareButton"
                >🔗</button>
                <div id="status" class="header-status"></div>
                <span class="tab-container-toggle">▼</span>
            </div>
            
            <!-- Tab Content Wrapper -->
            <div class="tab-content-wrapper tab-container" id="tabContentWrapper">
                <!-- Tab Headers -->
                <div class="tab-headers">
                    <button class="tab-button active" data-tab="componentTree" data-tooltip="User-friendly component tree using traditional German grammatical terminology" data-i18n-tooltip="tooltips.componentTree" data-i18n="tabs.componentTree">Component Tree</button>
                    <button class="tab-button" data-tab="textTree" data-tooltip="Text representation of the grammatical dependency tree structure" data-i18n-tooltip="tooltips.parseTree" data-i18n="tabs.parseTree">Parse Tree</button>
                    <button class="tab-button" data-tab="canvasContainer" data-tooltip="Interactive 3D visualization of the dependency tree structure" data-i18n-tooltip="tooltips.parseTree3D" data-i18n="tabs.parseTree3D">3D Parse Tree</button>
                    <button class="tab-button" data-tab="analysisPanel" data-tooltip="Detailed analysis including translation, meaning, and grammatical structure" data-i18n-tooltip="tooltips.analysis" data-i18n="tabs.analysis">Sentence Analysis</button>
                    <button class="tab-button" data-tab="storyPanel" data-tooltip="AI-generated German short stories incorporating your analyzed sentence in natural context" data-i18n-tooltip="tooltips.story" data-i18n="tabs.story">Story</button>
                </div>
            
                <!-- Tab Content -->
                <div class="tab-content">
                    <!-- Component Tree Panel (using new tab-layout architecture) -->
                    <div id="componentTree" class="tab-pane active tab-layout">
                        <div id="componentTreeResults" class="tab-results" style="display: none;">
                            <div class="tab-layout__content">
                                <div class="tree-header" style="display: none;">
                                    <h3 class="tree-title" data-i18n="tabs.componentTree">Component Tree</h3>
                                    <!-- Export dropdown removed - now in Export sidebar -->
                                </div>
                                <div id="componentTreeContent"></div>
                            </div>
                            <!--
                            <div class="tab-layout__legend">
                                <div class="tab-layout__legend-title">Legend:</div>
                                <div class="tab-layout__legend-items" id="componentLegendItems"></div>
                            </div>
                            -->
                        </div>
                    </div>

                    <!-- Parse Tree Panel (using new tab-layout architecture) -->
                    <div id="textTree" class="tab-pane tab-layout">
                        <div id="textTreeResults" class="tab-results" style="display: none;">
                            <div class="tab-layout__content">
                                <div class="tree-header" style="display: none;">
                                    <h3 class="tree-title" data-i18n="tabs.parseTree">Parse Tree</h3>
                                    <!-- Export dropdown removed - now in Export sidebar -->
                                </div>
                                <div id="textTreeContent"></div>
                            </div>
                            <!--
                            <div class="tab-layout__legend">
                                <div class="tab-layout__legend-title">Legend:</div>
                                <div class="tab-layout__legend-items" id="posLegendItems"></div>
                            </div>
                            -->
                        </div>
                    </div>

                    <!-- 3D Visualization Canvas -->
                    <div id="canvasContainer" class="tab-pane tab-layout tab-layout--canvas">
                        <div class="tab-layout__content">
                            <!-- 3D Controls Panel -->
                            <div class="canvas-controls">
                                <button id="resetViewBtn" class="control-btn" data-i18n-title="controlsCamera.resetView.tooltip" title="Reset camera view to default position">
                                    <span>🎯</span> <span data-i18n="controlsCamera.resetView.label">Reset View</span>
                                </button>
                                <button id="zoomInBtn" class="control-btn" data-i18n-title="controlsCamera.zoomIn.tooltip" title="Zoom in closer to the tree">
                                    <span>🔍+</span> <span data-i18n="controlsCamera.zoomIn.label">Zoom In</span>
                                </button>
                                <button id="zoomOutBtn" class="control-btn" data-i18n-title="controlsCamera.zoomOut.tooltip" title="Zoom out for wider view">
                                    <span>🔍-</span> <span data-i18n="controlsCamera.zoomOut.label">Zoom Out</span>
                                </button>
                            </div>
                            
                            <!-- Error Panel -->
                            <div id="errorPanel">
                                <h3>Issues</h3>
                                <div id="errorList"></div>
                            </div>
                        </div>
                        <!-- POS Colors legend removed for cleaner 3D interface -->
                    </div>

                    <!-- Sentence Analysis Panel -->
                    <div id="analysisPanel" class="tab-pane tab-layout">
                        <div class="tab-layout__content">
                            <div id="analysisContent"></div>
                        </div>
                        <!-- Legend temporarily disabled - uncomment to restore -->
                        <!--
                        <div class="tab-layout__legend">
                            <div class="tab-layout__legend-title">Legend:</div>
                            <div class="tab-layout__legend-items" id="analysisLegendItems"></div>
                        </div>
                        -->
                    </div>

                    <!-- Story Panel -->
                    <div id="storyPanel" class="tab-pane tab-layout">
                        <div class="tab-layout__content">
                            <div id="storyContent">
                                <div class="story-controls" id="storyControls" style="display: none;">
                                    <a href="#" id="generateStoryButton" class="story-link" data-tooltip="Create an AI-generated German short story using your sentence in natural context">
                                        🤖 Create German Story
                                    </a>
                                    <div class="tts-controls" id="ttsControls" style="display: none;">
                                        <button id="speakSentenceButton" class="tts-button" data-tooltip="Listen to German pronunciation of your sentence">
                                            <span class="button-icon">🔊</span><span class="button-text"> Speak Sentence</span>
                                        </button>
                                        <button id="speakStoryButton" class="tts-button" data-tooltip="Listen to German pronunciation of the story" style="display: none;">
                                            <span class="button-icon">📖</span><span class="button-text"> Read Story</span>
                                        </button>
                                        <button id="pauseStoryButton" class="tts-button tts-pause" data-tooltip="Pause story reading" style="display: none;">
                                            <span class="button-icon">⏸️</span><span class="button-text"> Pause</span>
                                        </button>
                                        <button id="stopSpeechButton" class="tts-button tts-stop" data-tooltip="Stop speech" style="display: none;">
                                            <span class="button-icon">⏹️</span><span class="button-text"> Stop</span>
                                        </button>
                                    </div>
                                    <div class="tts-speed-controls" id="ttsSpeedControls" style="display: none;">
                                        <label class="speed-control-label">
                                            <span class="speed-label-text">Speed:</span>
                                            <input type="range" id="storySpeedSlider" class="speed-slider" 
                                                   min="0.5" max="1.5" step="0.1" value="1.0" 
                                                   data-tooltip="Adjust story reading speed">
                                            <span class="speed-value" id="speedValue">1.0x</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="story-loading" style="display: none;">
                                    <div class="loading-spinner"></div>
                                    <p>AI creating your German story...</p>
                                </div>
                                <div id="storyStatus" class="story-status" style="display: none;"></div>
                                <div class="story-text" id="storyText"></div>
                                
                                <!-- Inline Story Creation Form -->
                                <div class="main-app-story-form" id="mainAppStoryForm" style="display: none;">
                                    <div class="form-header">
                                        <h3>📚 Create Your German Story</h3>
                                        <p>Generate a custom story with your preferred genre, difficulty, and length</p>
                                    </div>
                                    
                                    <form id="mainStoryForm" class="story-form">
                                        <div class="form-group">
                                            <label for="mainStorySentence">Based on Your Analyzed Sentence</label>
                                            <input type="text" id="mainStorySentence" name="sentence" required readonly placeholder="Your analyzed sentence will appear here...">
                                            <div class="help-text">This sentence will be naturally incorporated into your story</div>
                                        </div>
                                        
                                        <div class="form-row">
                                            <div class="form-group">
                                                <label for="mainStoryGenre">Story Genre <span class="required">*</span></label>
                                                <select id="mainStoryGenre" name="genre" required>
                                                    <option value="">Select a genre...</option>
                                                    <option value="SCIENCE_FICTION">Science Fiction</option>
                                                    <option value="FAMILY">Family</option>
                                                    <option value="ROMANCE">Romance</option>
                                                    <option value="ADVENTURE">Adventure</option>
                                                    <option value="MYSTERY">Mystery</option>
                                                    <option value="HISTORICAL">Historical</option>
                                                    <option value="COMEDY">Comedy</option>
                                                    <option value="DRAMA">Drama</option>
                                                    <option value="FANTASY">Fantasy</option>
                                                    <option value="SLICE_OF_LIFE">Slice of Life</option>
                                                </select>
                                            </div>
                                            
                                            <div class="form-group">
                                                <label for="mainStoryTopics">Topics/Themes (Optional)</label>
                                                <input type="text" id="mainStoryTopics" name="topics" placeholder="e.g., friendship, travel, food">
                                                <div class="help-text">Comma-separated keywords</div>
                                            </div>
                                        </div>
                                        
                                        <div class="form-group">
                                            <label>Difficulty Level <span class="required">*</span></label>
                                            <div class="difficulty-selector">
                                                <div class="difficulty-option">
                                                    <input type="radio" id="main-diff-a1" name="difficulty" value="A1" required>
                                                    <label for="main-diff-a1">
                                                        <span class="difficulty-label">A1 - Beginner</span>
                                                        <span class="difficulty-desc">Simple sentences</span>
                                                    </label>
                                                </div>
                                                <div class="difficulty-option">
                                                    <input type="radio" id="main-diff-a2" name="difficulty" value="A2">
                                                    <label for="main-diff-a2">
                                                        <span class="difficulty-label">A2 - Elementary</span>
                                                        <span class="difficulty-desc">Common phrases</span>
                                                    </label>
                                                </div>
                                                <div class="difficulty-option">
                                                    <input type="radio" id="main-diff-b1" name="difficulty" value="B1">
                                                    <label for="main-diff-b1">
                                                        <span class="difficulty-label">B1 - Intermediate</span>
                                                        <span class="difficulty-desc">Complex sentences</span>
                                                    </label>
                                                </div>
                                                <div class="difficulty-option">
                                                    <input type="radio" id="main-diff-b2" name="difficulty" value="B2">
                                                    <label for="main-diff-b2">
                                                        <span class="difficulty-label">B2 - Upper-Int.</span>
                                                        <span class="difficulty-desc">Advanced grammar</span>
                                                    </label>
                                                </div>
                                                <div class="difficulty-option">
                                                    <input type="radio" id="main-diff-c1" name="difficulty" value="C1">
                                                    <label for="main-diff-c1">
                                                        <span class="difficulty-label">C1 - Advanced</span>
                                                        <span class="difficulty-desc">Complex texts</span>
                                                    </label>
                                                </div>
                                                <div class="difficulty-option">
                                                    <input type="radio" id="main-diff-c2" name="difficulty" value="C2">
                                                    <label for="main-diff-c2">
                                                        <span class="difficulty-label">C2 - Proficiency</span>
                                                        <span class="difficulty-desc">Native-like</span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="form-group">
                                            <label>Story Length <span class="required">*</span></label>
                                            <div class="length-selector">
                                                <div class="length-option">
                                                    <input type="radio" id="main-len-short" name="length" value="short" required>
                                                    <label for="main-len-short">Short<br><small>150-200 words</small></label>
                                                </div>
                                                <div class="length-option">
                                                    <input type="radio" id="main-len-medium" name="length" value="medium" checked>
                                                    <label for="main-len-medium">Medium<br><small>250-350 words</small></label>
                                                </div>
                                                <div class="length-option">
                                                    <input type="radio" id="main-len-long" name="length" value="long">
                                                    <label for="main-len-long">Long<br><small>400-500 words</small></label>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="form-actions">
                                            <button type="submit" class="generate-btn" id="mainGenerateStoryBtn">
                                                ✨ Generate Story
                                            </button>
                                            <button type="button" class="cancel-btn" id="mainCancelStoryBtn">
                                                Cancel
                                            </button>
                                        </div>
                                    </form>
                                    
                                    <div class="main-story-result" id="mainStoryResult" style="display: none;">
                                        <!-- Story result will be populated here -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </main>

    <!-- Mobile Character Popup -->
    <div id="mobileCharacterPopup" class="mobile-character-popup">
        <div class="popup-content">
            <button class="popup-char-btn" data-char="ä">ä</button>
            <button class="popup-char-btn" data-char="ö">ö</button>
            <button class="popup-char-btn" data-char="ü">ü</button>
            <button class="popup-char-btn" data-char="ß">ß</button>
            <button class="popup-char-btn" data-char="Ä">Ä</button>
            <button class="popup-char-btn" data-char="Ö">Ö</button>
            <button class="popup-char-btn" data-char="Ü">Ü</button>
        </div>
    </div>

    <!-- Legal Footer -->
    <footer class="main-footer">
        <div class="footer-content">
            <div class="footer-links">
                <a href="/about.html" data-i18n="footer.about">About Us</a>
                <a href="/labs.html">Labs</a>
                <a href="/blog/">Blog</a>
                <a href="/api/docs" data-i18n="footer.api">API</a>
                <a href="/terms.html" data-i18n="footer.terms">Terms of Service</a>
                <a href="/privacy.html" data-i18n="footer.privacy">Privacy Policy</a>
                <a href="mailto:support@satzklar.net" data-i18n="footer.contact">Contact</a>
            </div>
            <div class="footer-copy">
                <p>&copy; 2025 satzklar. <span data-i18n="footer.copyright">All rights reserved.</span></p>
                <p class="footer-powered" data-i18n="footer.poweredBy" data-i18n-interpolation='{"claude": "<a href=\"https://www.anthropic.com\" target=\"_blank\" rel=\"noopener\">Claude AI</a>", "narakeet": "<a href=\"https://www.narakeet.com\" target=\"_blank\" rel=\"noopener\">Narakeet TTS</a>"}'>Powered by <a href="https://www.anthropic.com" target="_blank" rel="noopener">Claude AI</a> & <a href="https://www.narakeet.com" target="_blank" rel="noopener">Narakeet TTS</a></p>
            </div>
        </div>
    </footer>

    <!-- Minimal Three.js Bundle - Lazy loaded only when 3D visualization is needed -->
    <script src="js/three-minimal.js?v=6"></script>

    <!-- Help Bubble with Modal Selector -->
    <div id="feedbackBubble" class="feedback-bubble">
        <div class="feedback-icon" id="feedbackIcon">💬</div>
        <div class="feedback-content" id="feedbackContent">
            <div class="feedback-header">
                <h3 data-i18n="help.title">How can we help you?</h3>
                <button class="feedback-close" id="feedbackClose">×</button>
            </div>
            <div class="feedback-body">
                <div class="help-options">
                    <!-- Ask AI About Sentence Option -->
                    <div class="help-option" data-help-type="ask-ai">
                        <div class="help-option-icon german-flag">
                            <div class="flag-stripe black"></div>
                            <div class="flag-stripe red"></div>
                            <div class="flag-stripe gold"></div>
                        </div>
                        <div class="help-option-content">
                            <div class="help-option-title" data-i18n="help.askAI.title">Ask satzklar about this sentence</div>
                            <div class="help-option-description" data-i18n="help.askAI.description">Grammar explanations & insights</div>
                        </div>
                    </div>

                    <!-- How satzklar Works Option -->
                    <div class="help-option" data-help-type="how-it-works">
                        <div class="help-option-icon">💡</div>
                        <div class="help-option-content">
                            <div class="help-option-title" data-i18n="help.howItWorks.title">How satzklar Works</div>
                            <div class="help-option-description" data-i18n="help.howItWorks.description">Learn about app features</div>
                        </div>
                    </div>

                    <!-- Report Problem Option -->
                    <div class="help-option" data-help-type="report-problem">
                        <div class="help-option-icon">🐛</div>
                        <div class="help-option-content">
                            <div class="help-option-title" data-i18n="help.reportProblem.title">Report a Problem</div>
                            <div class="help-option-description" data-i18n="help.reportProblem.description">Parsing error, bug, or issue</div>
                        </div>
                    </div>

                    <!-- Support Request Option -->
                    <div class="help-option" data-help-type="support-request">
                        <div class="help-option-icon">💌</div>
                        <div class="help-option-content">
                            <div class="help-option-title" data-i18n="help.supportRequest.title">Support Request</div>
                            <div class="help-option-description" data-i18n="help.supportRequest.description">General help or feedback</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Application Scripts -->
    <!-- Modal Loading Overlay -->
    <div id="loadingModal" class="loading-modal">
        <div class="loading-modal-content">
            <div class="loading-spinner"></div>
            <div class="loading-text">Analyzing<span class="loading-dots"><span>.</span><span>.</span><span>.</span></span></div>
            <div class="loading-progress-bar">
                <div class="loading-progress-fill"></div>
            </div>
        </div>
    </div>
    
    <!-- Internationalization -->
    <script src="js/i18n.js?v=1"></script>
    <script src="js/language-switcher.js?v=1"></script>
    <script src="js/shared-components.js?v=1"></script>
    
    <!-- Turnstile Configuration (Production Only) -->
    <script>
    // Initialize Turnstile configuration
    // In development, CAPTCHA is disabled; in production, use environment variable
    (function() {
        // Set fallback values
        window.TURNSTILE_SITE_KEY = null;
        
        // Try to load external config file (production builds)
        const script = document.createElement('script');
        script.src = 'js/turnstile-config.js?v=' + Date.now();
        script.async = true;
        script.onload = function() {
            console.log('🔒 Turnstile: Production configuration loaded');
        };
        script.onerror = function() {
            // Config file not found - use fallback
            console.log('🔒 Turnstile: Configuration file not found, using fallback (development mode)');
            window.TURNSTILE_SITE_KEY = null; // CAPTCHA will be disabled
        };
        document.head.appendChild(script);
    })();
    </script>
    
    <script src="js/references-sidebar.js?v=2"></script>
    <script src="js/export-sidebar.js?v=1"></script>
    <script src="js/three-setup.js?v=4"></script>
    <script src="js/reliable-tts.js?v=1"></script>
    <script src="js/narakeet-tts.js?v=1"></script>
    <script src="js/story-narrator.js?v=1"></script>
    <script src="js/dictionary.js?v=8&t=1750125500"></script>
    <script src="js/sentence-selector.js?v=1"></script>
    <script src="js/tree-visualization.js?v=4"></script>
    
    <!-- PDF Generation -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.9/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.9/vfs_fonts.js"></script>
    
    <script src="js/export-manager.js?v=1"></script>
    <script src="js/tts-manager.js?v=1"></script>
    <script src="js/ai-assistant.js?v=37&t=1754710800"></script>
    <script src="js/help-manager.js?v=20250821002&t=1754712000"></script>
    <script src="js/api-client.js?v=1"></script>
    <script src="js/analysis-renderer.js?v=1"></script>
    <script src="js/ui-feedback-manager.js?v=1"></script>
    <script src="js/character-picker.js?v=1"></script>
    <script src="js/storage-manager.js?v=1"></script>
    <script src="js/story-manager.js?v=1"></script>
    <script src="js/tab-manager.js?v=1"></script>
    <script src="js/language-manager.js?v=1"></script>
    <script src="js/threejs-manager.js?v=1"></script>
    <script src="js/event-manager.js?v=1"></script>
    <script src="js/legend-manager.js?v=1"></script>
    <script src="js/url-handler.js?v=1"></script>
    <script src="js/sharing-manager.js?v=1"></script>
    <script src="js/grammar-definitions.js?v=1"></script>
    <script src="js/linguistic-formatter.js?v=1"></script>
    <script src="js/components/sentence-history-manager.js?v=1"></script>
    <script src="js/prefetch-manager.js?v=1"></script>
    <script src="js/ad-manager.js?v=1"></script>
    <script src="js/app.js?v=37&t=1754710800"></script>
    
    <!-- Help System Debug Script -->
    <script>
        // Debug script to verify HelpManager initialization
        setTimeout(() => {
            console.log('🔍 HelpManager Debug Check:');
            console.log('  - window.app exists:', !!window.app);
            console.log('  - window.app.helpManager exists:', !!(window.app && window.app.helpManager));
            console.log('  - HelpManager class available:', typeof HelpManager);
            console.log('  - feedbackBubble element exists:', !!document.getElementById('feedbackBubble'));
            
            if (window.app && window.app.helpManager) {
                console.log('  ✅ HelpManager successfully initialized');
            } else {
                console.error('  ❌ HelpManager initialization failed');
                if (!window.app) console.error('    - window.app is missing');
                if (window.app && !window.app.helpManager) console.error('    - app.helpManager is missing');
            }
        }, 2000); // Give everything time to initialize
    </script>

    <!-- Help Bubble Script -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            
            // Mobile slogan click handler
            const mobileSloganClick = document.getElementById('mobileSloganClick');
            if (mobileSloganClick) {
                // Always add cursor pointer on mobile element
                mobileSloganClick.style.cursor = 'pointer';
                console.log('Mobile slogan element found, adding click handler');
                mobileSloganClick.addEventListener('click', function(e) {
                    console.log('Mobile slogan clicked!');
                    e.preventDefault();
                    e.stopPropagation();
                    
                    // Create modal overlay
                    const modalOverlay = document.createElement('div');
                    modalOverlay.style.cssText = `
                        position: fixed;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background: rgba(0, 0, 0, 0.5);
                        z-index: 10000;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 20px;
                        box-sizing: border-box;
                    `;
                    
                    // Create modal content
                    const modal = document.createElement('div');
                    modal.style.cssText = `
                        background: white;
                        border-radius: 12px;
                        padding: 24px;
                        max-width: 400px;
                        width: 100%;
                        box-shadow: 0 8px 24px rgba(0,0,0,0.3);
                        position: relative;
                    `;
                    
                    // Create close button
                    const closeButton = document.createElement('button');
                    closeButton.innerHTML = '×';
                    closeButton.style.cssText = `
                        position: absolute;
                        top: 12px;
                        right: 16px;
                        background: none;
                        border: none;
                        font-size: 24px;
                        cursor: pointer;
                        color: #666;
                        padding: 0;
                        width: 24px;
                        height: 24px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    `;
                    
                    // Create modal content
                    const title = document.createElement('h3');
                    title.textContent = 'Kristallklare Sätze';
                    title.style.cssText = `
                        margin: 0 0 16px 0;
                        color: #1565c0;
                        font-size: 1.2em;
                    `;
                    
                    const content = document.createElement('p');
                    // Use i18n for content if available, otherwise fallback to English
                    const sloganContent = window.i18n ? 
                        window.i18n.t('tooltips.slogan') : 
                        "English: 'Crystal clear sentences' - Our approach to making German grammar transparent and understandable.";
                    content.innerHTML = sloganContent;
                    content.style.cssText = `
                        margin: 0;
                        line-height: 1.5;
                        color: #333;
                    `;
                    
                    // Assemble modal
                    modal.appendChild(closeButton);
                    modal.appendChild(title);
                    modal.appendChild(content);
                    modalOverlay.appendChild(modal);
                    document.body.appendChild(modalOverlay);
                    
                    // Close modal function
                    const closeModal = () => {
                        if (modalOverlay.parentNode) {
                            document.body.removeChild(modalOverlay);
                        }
                    };
                    
                    // Event listeners
                    closeButton.addEventListener('click', closeModal);
                    modalOverlay.addEventListener('click', (e) => {
                        if (e.target === modalOverlay) closeModal();
                    });
                    
                    // ESC key handler
                    const handleEsc = (e) => {
                        if (e.key === 'Escape') {
                            closeModal();
                            document.removeEventListener('keydown', handleEsc);
                        }
                    };
                    document.addEventListener('keydown', handleEsc);
                });
            }
            
            // Desktop logo slogan click handler
            const logoSlogan = document.querySelector('.logo-slogan[data-tooltip]');
            if (logoSlogan) {
                logoSlogan.style.cursor = 'pointer';
                console.log('Desktop logo slogan element found, adding click handler');
                logoSlogan.addEventListener('click', function(e) {
                    console.log('Desktop logo slogan clicked!');
                    e.preventDefault();
                    e.stopPropagation();
                    
                    // Create modal overlay (same as mobile)
                    const modalOverlay = document.createElement('div');
                    modalOverlay.style.cssText = `
                        position: fixed;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background: rgba(0, 0, 0, 0.5);
                        z-index: 10000;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 20px;
                        box-sizing: border-box;
                    `;
                    
                    // Create modal content
                    const modal = document.createElement('div');
                    modal.style.cssText = `
                        background: white;
                        border-radius: 12px;
                        padding: 24px;
                        max-width: 400px;
                        width: 100%;
                        box-shadow: 0 8px 24px rgba(0,0,0,0.3);
                        position: relative;
                    `;
                    
                    // Create close button
                    const closeButton = document.createElement('button');
                    closeButton.innerHTML = '×';
                    closeButton.style.cssText = `
                        position: absolute;
                        top: 12px;
                        right: 16px;
                        background: none;
                        border: none;
                        font-size: 24px;
                        cursor: pointer;
                        color: #666;
                        padding: 0;
                        width: 24px;
                        height: 24px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    `;
                    
                    // Create modal content
                    const title = document.createElement('h3');
                    title.textContent = 'Kristallklare Sätze';
                    title.style.cssText = `
                        margin: 0 0 16px 0;
                        color: #1565c0;
                        font-size: 1.2em;
                    `;
                    
                    const content = document.createElement('p');
                    // Use i18n for content if available, otherwise fallback to English
                    const sloganContent = window.i18n ? 
                        window.i18n.t('tooltips.slogan') : 
                        "English: 'Crystal clear sentences' - Our approach to making German grammar transparent and understandable.";
                    content.innerHTML = sloganContent;
                    content.style.cssText = `
                        margin: 0;
                        line-height: 1.5;
                        color: #333;
                    `;
                    
                    // Assemble modal
                    modal.appendChild(closeButton);
                    modal.appendChild(title);
                    modal.appendChild(content);
                    modalOverlay.appendChild(modal);
                    document.body.appendChild(modalOverlay);
                    
                    // Close modal function
                    const closeModal = () => {
                        if (modalOverlay.parentNode) {
                            document.body.removeChild(modalOverlay);
                        }
                    };
                    
                    // Event listeners
                    closeButton.addEventListener('click', closeModal);
                    modalOverlay.addEventListener('click', (e) => {
                        if (e.target === modalOverlay) {
                            closeModal();
                        }
                    });
                    
                    // ESC key handler
                    const handleEsc = (e) => {
                        if (e.key === 'Escape') {
                            closeModal();
                            document.removeEventListener('keydown', handleEsc);
                        }
                    };
                    document.addEventListener('keydown', handleEsc);
                });
            }
        });
    </script>
    
    <!-- Show SEO content only for crawlers and no-JS browsers -->
    <noscript>
        <style>
            .seo-only {
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
                height: auto !important;
                overflow: visible !important;
                position: static !important;
                left: auto !important;
            }
            
            .features-overview.seo-only {
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
                height: auto !important;
                overflow: visible !important;
                position: static !important;
                left: auto !important;
                max-width: 800px;
                margin: 2rem auto;
                padding: 2rem;
                background: #f8f9fa;
                border-radius: 8px;
                line-height: 1.6;
                border: 1px solid #e0e0e0;
            }
            
            .main-title.seo-only {
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
                height: auto !important;
                overflow: visible !important;
                position: static !important;
                left: auto !important;
                text-align: center;
                color: #1565c0;
                margin-bottom: 2rem;
                font-size: 2.5rem;
            }
            
            /* Override inline styles for no-JS browsers */
            h1.seo-only[style] {
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
                height: auto !important;
                overflow: visible !important;
                position: static !important;
                left: auto !important;
            }
            
            section.seo-only[style] {
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
                height: auto !important;
                overflow: visible !important;
                position: static !important;
                left: auto !important;
            }
        </style>
    </noscript>
    
    <!-- Vercel Web Analytics -->
    <script>
        window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
    </script>
    <script defer src="/_vercel/insights/script.js"></script>
</body>
</html>