security: remove hardcoded secret key and improve key handling

.gitea/workflows/android.yaml

@@ -0,0 +1,106 @@
+name: Android Build Final Fixed
+on:
+  push:
+    branches: [main]
+    tags: ["v*"] # Triggert bei v0.1.0, v1.0, etc.
+
+jobs:
+  build-android:
+    runs-on: ubuntu-latest
+    container:
+      image: node:20-bookworm
+
+    steps:
+      - name: Checkout Main Project
+        uses: actions/checkout@v4
+        with:
+          submodules: false
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Manual Clone easy-nostr
+        run: |
+          git clone https://${{ github.actor }}:${{ secrets.GITHUB_TOKEN }}@gitea.malxte.de/Bytemalte/easy-nostr.git src-tauri/easy-nostr
+
+      - name: Install System Dependencies
+        run: |
+          apt-get update
+          apt-get install -y build-essential curl wget file libssl-dev pkg-config openjdk-17-jdk git unzip libgtk-3-dev webkit2gtk-4.1 libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev python3
+
+      - name: Install Rust & Targets
+        run: |
+          curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
+          echo "$HOME/.cargo/bin" >> $GITHUB_PATH
+          export PATH="$HOME/.cargo/bin:$PATH"
+          rustup target add aarch64-linux-android wasm32-unknown-unknown
+
+      - name: Install Trunk & Tauri-CLI
+        run: |
+          wget -qO- https://github.com/trunk-rs/trunk/releases/latest/download/trunk-x86_64-unknown-linux-gnu.tar.gz | tar -xzf- -C /usr/local/bin
+          wget -qO- https://github.com/tauri-apps/tauri/releases/latest/download/cargo-tauri-x86_64-unknown-linux-gnu.tgz | tar -xzf- -C /usr/local/bin
+          chmod +x /usr/local/bin/trunk /usr/local/bin/cargo-tauri
+
+      - name: Setup Android SDK
+        run: |
+          export ANDROID_HOME=$HOME/android-sdk
+          mkdir -p $ANDROID_HOME/cmdline-tools
+          cd $ANDROID_HOME/cmdline-tools
+          wget -q https://dl.google.com/android/repository/commandlinetools-linux-9477386_latest.zip
+          unzip -q commandlinetools-linux-9477386_latest.zip
+          mv cmdline-tools latest
+          yes | $ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager --sdk_root=$ANDROID_HOME "platform-tools" "platforms;android-33" "build-tools;33.0.1" "ndk;25.1.8937393"
+          echo "ANDROID_HOME=$ANDROID_HOME" >> $GITHUB_ENV
+          echo "NDK_HOME=$ANDROID_HOME/ndk/25.1.8937393" >> $GITHUB_ENV
+
+      - name: Build and Compile
+        run: |
+          export PATH="$HOME/.cargo/bin:$PATH"
+          export ANDROID_HOME=$HOME/android-sdk
+          export NDK_HOME=$ANDROID_HOME/ndk/25.1.8937393
+          export JAVA_HOME=/usr/lib/jvm/java-17-openjdk-amd64
+
+          # 1. Frontend bauen
+          trunk build --release
+
+          # 2. Android Build
+          if [ ! -d "src-tauri/gen/android" ]; then
+            cargo-tauri android init
+          fi
+          cargo-tauri android build --target aarch64 --apk true
+
+          # 3. APK manuell signieren
+          echo "${{ secrets.ANDROID_KEYSTORE_BASE64 }}" | tr -d '[:space:]' > keystore.b64
+          base64 -d keystore.b64 > release.keystore
+
+          UNSIGNED_APK=$(find src-tauri/gen/android/app/build/outputs/apk/universal/release -name "*-unsigned.apk" | head -n 1)
+          APKSIGNER=$(find $ANDROID_HOME/build-tools -name apksigner | sort -r | head -n 1)
+
+          $APKSIGNER sign --ks release.keystore \
+            --ks-type PKCS12 \
+            --ks-key-alias "${{ secrets.ANDROID_KEY_ALIAS }}" \
+            --ks-pass pass:"${{ secrets.ANDROID_KEYSTORE_PASSWORD }}" \
+            --key-pass pass:"${{ secrets.ANDROID_KEY_PASSWORD }}" \
+            --v4-signing-enabled true \
+            --out Marstemedia-Signed.apk \
+            "$UNSIGNED_APK"
+
+          echo "Signierung erfolgreich!"
+        env:
+          JAVA_HOME: /usr/lib/jvm/java-17-openjdk-amd64
+
+      - name: Upload Artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: Marstemedia-Signed
+          path: Marstemedia-Signed.apk
+
+      - name: Create Gitea Release
+        if: startsWith(github.ref, 'refs/tags/')
+        uses: softprops/action-gh-release@v1
+        with:
+          files: Marstemedia-Signed.apk
+          # Gitea braucht manchmal explizit den Namen/Body
+          name: "Release ${{ github.ref_name }}"
+          draft: false
+          prerelease: false
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -2,3 +2,4 @@
 /target/
 /Cargo.lock
 /.jj/
+my-release-key.keystore

Cargo.toml

@@ -21,6 +21,8 @@ pulldown-cmark = "0.13.0"
 rand = "0.9.2"
 getrandom = { version = "0.3", features = ["wasm_js"] }
 ron = "0.8"
+feed-rs = "2.3.1"
+uuid = { version = "1.19", features = ["js"] }
 
 [workspace]
 members = ["src-tauri"]

src-tauri/.gitignore

@@ -5,3 +5,4 @@
 # Generated by Tauri
 # will have schema files for capabilities auto-completion
 /gen/schemas
+/gen/android/

src-tauri/Cargo.toml

@@ -19,6 +19,9 @@ serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 easy-nostr = { path = "./easy-nostr" }
 tokio = { version = "1", features = ["full"] }
+feed-rs = "2.3.1"
+ron = "0.8"
+nostr-sdk = "0.44.1"
 
 # FIX: default-features entfernt und rustls-tls hinzugefügt
 reqwest = { version = "0.12", default-features = false, features = ["json", "rustls-tls"] }

src-tauri/gen/android/app/build.gradle.kts

@@ -14,23 +14,31 @@ val tauriProperties = Properties().apply {
 }
 
 android {
-    compileSdk = 36
+    compileSdk = 35 // Empfohlen: 35 (Android 15), da 36 noch im Preview-Status sein könnte
     namespace = "malxte.de"
+
     defaultConfig {
         manifestPlaceholders["usesCleartextTraffic"] = "false"
         applicationId = "malxte.de"
+        
+        // WICHTIG: Korrektur für dein Gerät (vorher 21)
         minSdk = 24 
-        targetSdk = 36
+        
+        targetSdk = 35
         versionCode = tauriProperties.getProperty("tauri.android.versionCode", "1").toInt()
         versionName = tauriProperties.getProperty("tauri.android.versionName", "1.0")
+
+        testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
     }
+
     buildTypes {
         getByName("debug") {
             manifestPlaceholders["usesCleartextTraffic"] = "true"
             isDebuggable = true
             isJniDebuggable = true
             isMinifyEnabled = false
-            packaging {                jniLibs.keepDebugSymbols.add("*/arm64-v8a/*.so")
+            packaging {
+                jniLibs.keepDebugSymbols.add("*/arm64-v8a/*.so")
                 jniLibs.keepDebugSymbols.add("*/armeabi-v7a/*.so")
                 jniLibs.keepDebugSymbols.add("*/x86/*.so")
                 jniLibs.keepDebugSymbols.add("*/x86_64/*.so")
@@ -45,26 +53,36 @@ android {
             )
         }
     }
-    kotlinOptions {
+
-        jvmTarget = "1.8"
+    compileOptions {
+        sourceCompatibility = JavaVersion.VERSION_17
+        targetCompatibility = JavaVersion.VERSION_17
     }
+
+    kotlinOptions {
+        jvmTarget = "17" // Angepasst auf Java 17 passend zu Gradle 8.14
+    }
+
     buildFeatures {
         buildConfig = true
     }
 }
 
 rust {
+    // Pfad zu deinem src-tauri Verzeichnis (wo die Cargo.toml liegt)
     rootDirRel = "../../../"
 }
 
 dependencies {
-    implementation("androidx.webkit:webkit:1.14.0")
+    implementation("androidx.webkit:webkit:1.12.0")
-    implementation("androidx.appcompat:appcompat:1.7.1")
+    implementation("androidx.appcompat:appcompat:1.7.0")
-    implementation("androidx.activity:activity-ktx:1.10.1")
+    implementation("androidx.activity:activity-ktx:1.9.3")
     implementation("com.google.android.material:material:1.12.0")
+    
     testImplementation("junit:junit:4.13.2")
-    androidTestImplementation("androidx.test.ext:junit:1.1.4")
+    androidTestImplementation("androidx.test.ext:junit:1.2.1")
-    androidTestImplementation("androidx.test.espresso:espresso-core:3.5.0")
+    androidTestImplementation("androidx.test.espresso:espresso-core:3.6.1")
 }
 
+// Dies bindet die Tauri-Logik für Android ein (generierte Files)
 apply(from = "tauri.build.gradle.kts")

src-tauri/gen/android/build.gradle.kts

@@ -4,7 +4,9 @@ buildscript {
         mavenCentral()
     }
     dependencies {
-        classpath("com.android.tools.build:gradle:8.11.0")
+        // Hier wird das Android-Plugin definiert
+        classpath("com.android.tools.build:gradle:8.2.1") 
+        // Hier wird das Kotlin-Plugin definiert
         classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:1.9.25")
     }
 }
@@ -17,6 +19,5 @@ allprojects {
 }
 
 tasks.register("clean").configure {
-    delete("build")
+    delete(layout.buildDirectory)
 }
-

src-tauri/gen/android/buildSrc/src/main/java/malxte/de/kotlin/BuildTask.kt

@@ -21,23 +21,7 @@ open class BuildTask : DefaultTask() {
             runTauriCli(executable)
         } catch (e: Exception) {
             if (Os.isFamily(Os.FAMILY_WINDOWS)) {
-                // Try different Windows-specific extensions
+                runTauriCli("$executable.cmd")
-                val fallbacks = listOf(
-                    "$executable.exe",
-                    "$executable.cmd",
-                    "$executable.bat",
-                )
-                
-                var lastException: Exception = e
-                for (fallback in fallbacks) {
-                    try {
-                        runTauriCli(fallback)
-                        return
-                    } catch (fallbackException: Exception) {
-                        lastException = fallbackException
-                    }
-                }
-                throw lastException
             } else {
                 throw e;
             }

src-tauri/src/home.rs

@@ -1,5 +1,6 @@
 use easy_nostr::EasyNostr;
-use serde::Serialize;
+use nostr_sdk::prelude::{Keys, ToBech32};
+use serde::Serialize; // Import für die Schlüssel-Generierung
 
 // Diese Struktur ist für den Transport zum Frontend (JSON)
 #[derive(Serialize)]
@@ -11,12 +12,20 @@ pub struct LocalPost {
 
 #[tauri::command]
 pub async fn fetch_nostr_posts() -> Result<Vec<LocalPost>, String> {
-    // 1. Verbindung aufbauen
+    // 1. Temporären Einweg-Schlüssel generieren
-    let easy = EasyNostr::new("nsec1fkhszd5sv8yp6g966qdh5kuph25g4nn9pa2k5rwpuglt6rde8u8qwr3r87")
+    // Das erzeugt ein Schlüsselpaar im RAM, das nach dem Funktionsaufruf verschwindet.
+    let random_keys = Keys::generate();
+    let temp_nsec = random_keys
+        .secret_key()
+        .to_bech32()
+        .map_err(|e| format!("Fehler beim Generieren des Keys: {}", e))?;
+
+    // 2. Verbindung mit dem temporären Key aufbauen
+    let easy = EasyNostr::new(&temp_nsec)
         .await
         .map_err(|e| e.to_string())?;
 
-    // 2. Relays hinzufügen
+    // 3. Relays hinzufügen
     easy.add_relays(vec![
         "wss://relay.damus.io",
         "wss://nos.lol",
@@ -25,16 +34,16 @@ pub async fn fetch_nostr_posts() -> Result<Vec<LocalPost>, String> {
     .await
     .map_err(|e| e.to_string())?;
 
-    // 3. Posts von der Library holen
+    // 4. Posts von der Library holen
     let raw_posts = easy.get_random_posts().await.map_err(|e| e.to_string())?;
 
-    // 4. Mappen: Library-Typ -> Unser serialisierbarer Typ
+    // 5. Mappen: Library-Typ -> Unser serialisierbarer Typ
     let mapped_posts = raw_posts
         .into_iter()
         .map(|p| LocalPost {
             content: p.content,
             author: p.author.to_string(),
-            created_at: p.created_at.as_secs(), // Hier geändert von as_u64()
+            created_at: p.created_at.as_secs(),
         })
         .collect();
 

src-tauri/src/lib.rs

@@ -10,7 +10,11 @@ pub fn run() {
         .invoke_handler(tauri::generate_handler![
             home::fetch_nostr_posts,
             news::save_openrouter_key,
+            news::load_rss_config,
+            news::save_rss_urls, // Geändert von save_rss_url zu save_rss_urls
             news::fetch_ai_news,
+            news::fetch_rss_news,
+            news::save_groq_key,
         ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");

src-tauri/src/news.rs

@@ -1,76 +1,194 @@
 use serde::{Deserialize, Serialize};
+use std::fs;
+use std::path::PathBuf;
 use std::sync::Mutex;
-use tauri::State;
+use tauri::{AppHandle, Manager, State};
+
+#[derive(Serialize, Deserialize, Default, Clone)]
+pub struct RssConfig {
+    pub urls: Vec<String>,
+}
 
 #[derive(Default)]
 pub struct NewsState {
     pub openrouter_key: Mutex<String>,
+    pub groq_key: Mutex<String>,
+    pub rss_config: Mutex<RssConfig>,
 }
 
-#[derive(Serialize, Deserialize, Clone)]
+#[derive(Serialize, Deserialize, Clone, PartialEq, Debug)]
 #[serde(rename_all = "camelCase")]
 pub struct NewsArticle {
     pub content: String,
     pub author: String,
-    pub created_at: u64,
+    pub created_at: String,
+}
+
+fn get_config_path(app: &AppHandle) -> PathBuf {
+    app.path()
+        .app_config_dir()
+        .unwrap_or_else(|_| PathBuf::from("."))
+        .join("rss.ron")
 }
 
 #[tauri::command]
 pub async fn save_openrouter_key(key: String, state: State<'_, NewsState>) -> Result<(), String> {
-    let mut lock = state
+    let mut lock = state.openrouter_key.lock().map_err(|_| "Lock failed")?;
-        .openrouter_key
-        .lock()
-        .map_err(|_| "Lock failed".to_string())?;
     *lock = key.trim().to_string();
     Ok(())
 }
 
 #[tauri::command]
-pub async fn fetch_ai_news(state: State<'_, NewsState>) -> Result<Vec<NewsArticle>, String> {
+pub async fn save_groq_key(key: String, state: State<'_, NewsState>) -> Result<(), String> {
-    let key = {
+    let mut lock = state.groq_key.lock().map_err(|_| "Lock failed")?;
-        let lock = state
+    *lock = key.trim().to_string();
-            .openrouter_key
+    Ok(())
-            .lock()
+}
-            .map_err(|_| "Lock failed".to_string())?;
+
-        lock.clone()
+#[tauri::command]
+pub async fn load_rss_config(
+    app: AppHandle,
+    state: State<'_, NewsState>,
+) -> Result<Vec<String>, String> {
+    let path = get_config_path(&app);
+    if !path.exists() {
+        let default_urls = vec![
+            "https://www.nasa.gov/news-release/feed/".to_string(),
+            "https://www.heise.de/rss/heise-atom.xml".to_string(),
+        ];
+        let config = RssConfig {
+            urls: default_urls.clone(),
+        };
+        if let Some(parent) = path.parent() {
+            fs::create_dir_all(parent).map_err(|e| e.to_string())?;
+        }
+        let ron_str = ron::to_string(&config).map_err(|e| e.to_string())?;
+        fs::write(&path, ron_str).map_err(|e| e.to_string())?;
+        let mut lock = state.rss_config.lock().unwrap();
+        lock.urls = default_urls.clone();
+        return Ok(default_urls);
+    }
+    let content = fs::read_to_string(path).map_err(|e| e.to_string())?;
+    let config: RssConfig = ron::from_str(&content).map_err(|e| e.to_string())?;
+    let mut lock = state.rss_config.lock().unwrap();
+    *lock = config.clone();
+    Ok(config.urls)
+}
+
+#[tauri::command]
+pub async fn save_rss_urls(
+    urls: Vec<String>,
+    app: AppHandle,
+    state: State<'_, NewsState>,
+) -> Result<(), String> {
+    let config = RssConfig { urls };
+    let path = get_config_path(&app);
+    if let Some(parent) = path.parent() {
+        fs::create_dir_all(parent).map_err(|e| e.to_string())?;
+    }
+    let ron_str = ron::to_string(&config).map_err(|e| e.to_string())?;
+    fs::write(path, ron_str).map_err(|e| e.to_string())?;
+    let mut lock = state.rss_config.lock().unwrap();
+    *lock = config;
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn fetch_ai_news(
+    provider: String,
+    state: State<'_, NewsState>,
+) -> Result<Vec<NewsArticle>, String> {
+    let (key, url, model, author) = match provider.as_str() {
+        "groq" => {
+            let k = state.groq_key.lock().map_err(|_| "Lock failed")?.clone();
+            (
+                k,
+                "https://api.groq.com/openai/v1/chat/completions",
+                "llama-3.1-8b-instant",
+                "Groq AI",
+            )
+        }
+        _ => {
+            let k = state
+                .openrouter_key
+                .lock()
+                .map_err(|_| "Lock failed")?
+                .clone();
+            (
+                k,
+                "https://openrouter.ai/api/v1/chat/completions",
+                "openai/gpt-oss-20b:free:online",
+                "OpenRouter AI",
+            )
+        }
     };
 
     if key.is_empty() {
-        return Err("API Key fehlt.".to_string());
+        return Err(format!("API Key für {} fehlt.", author));
     }
 
     let client = reqwest::Client::new();
-    let body = serde_json::json!({
-        "model": "minimax/minimax-m2.1",
-        "messages": [
-            {"role": "system", "content": "Kurze News, 1-2 Sätze, Deutsch."},
-            {"role": "user", "content": "Tech-News."}
-        ]
-    });
-
     let response = client
-        .post("https://openrouter.ai/api/v1/chat/completions")
+        .post(url)
         .header("Authorization", format!("Bearer {}", key))
-        .header("HTTP-Referer", "http://localhost:1420")
+        .json(&serde_json::json!({
-        .json(&body)
+            "model": model,
+            "messages": [
+                {"role": "system", "content": "Kurze Tech-News, 1-2 Sätze, Deutsch. Nutze Markdown."},
+                {"role": "user", "content": "Was gibt es neues in der Tech-Welt?"}
+            ]
+        }))
         .send()
         .await
         .map_err(|e| e.to_string())?;
 
-    if !response.status().is_success() {
+    let json: serde_json::Value = response.json().await.map_err(|e| e.to_string())?;
-        return Err(format!("API Fehler: {}", response.status()));
+    let content = json["choices"][0]["message"]["content"]
-    }
-
-    let json_res: serde_json::Value = response.json().await.map_err(|e| e.to_string())?;
-
-    let content = json_res["choices"][0]["message"]["content"]
         .as_str()
-        .ok_or_else(|| "Kein Content im JSON".to_string())?
+        .unwrap_or("Fehler beim Abrufen der Inhalte")
         .to_string();
 
     Ok(vec![NewsArticle {
         content,
-        author: "OpenRouter AI".to_string(),
+        author: author.into(),
-        created_at: 0,
+        created_at: "Gerade eben".into(),
     }])
 }
+
+#[tauri::command]
+pub async fn fetch_rss_news(state: State<'_, NewsState>) -> Result<Vec<NewsArticle>, String> {
+    let urls = state.rss_config.lock().unwrap().urls.clone();
+    let mut all_articles = Vec::new();
+    let client = reqwest::Client::new();
+
+    for url in urls {
+        if let Ok(res) = client.get(&url).send().await {
+            if let Ok(bytes) = res.bytes().await {
+                if let Ok(feed) = feed_rs::parser::parse(&bytes[..]) {
+                    let source = feed
+                        .title
+                        .map(|t| t.content)
+                        .unwrap_or_else(|| "RSS".into());
+                    for entry in feed.entries.into_iter().take(3) {
+                        let date = entry
+                            .published
+                            .or(entry.updated)
+                            .map(|d| d.format("%d.%m.%Y %H:%M").to_string())
+                            .unwrap_or_else(|| "--.--.----".into());
+
+                        all_articles.push(NewsArticle {
+                            content: format!(
+                                "### {}\n\n{}",
+                                entry.title.map(|t| t.content).unwrap_or_default(),
+                                entry.summary.map(|s| s.content).unwrap_or_default()
+                            ),
+                            author: source.clone(),
+                            created_at: date,
+                        });
+                    }
+                }
+            }
+        }
+    }
+    Ok(all_articles)
+}

src/pages/news.rs

@@ -11,18 +11,31 @@ extern "C" {
     async fn invoke(cmd: &str, args: JsValue) -> Result<JsValue, JsValue>;
 }
 
+#[derive(PartialEq, Clone, Copy)]
+pub enum NewsMode {
+    Ai,
+    Rss,
+}
+
 #[derive(Serialize, Deserialize, Clone, PartialEq, Debug)]
 #[serde(rename_all = "camelCase")]
 pub struct NewsArticle {
     pub content: String,
     pub author: String,
-    pub created_at: u64,
+    pub created_at: String,
 }
 
 #[derive(Serialize)]
-#[serde(rename_all = "camelCase")]
+struct StringArgs {
-struct ApiKeyArgs {
+    key: String,
-    pub key: String,
+}
+#[derive(Serialize)]
+struct UrlsArgs {
+    urls: Vec<String>,
+}
+#[derive(Serialize)]
+struct AiArgs {
+    provider: String,
 }
 
 #[function_component(News)]
@@ -30,155 +43,211 @@ pub fn news() -> Html {
     let articles = use_state(|| None::<Vec<NewsArticle>>);
     let error_msg = use_state(|| None::<String>);
     let show_config = use_state(|| false);
-    let api_key_ref = use_node_ref();
+    let current_mode = use_state(|| NewsMode::Ai);
+    let ai_provider = use_state(|| "openrouter".to_string());
+    let rss_urls = use_state(Vec::<String>::new);
 
-    let load_news = {
+    let or_key_ref = use_node_ref();
-        let articles = articles.clone();
+    let groq_key_ref = use_node_ref();
-        let error_msg = error_msg.clone();
+    let new_url_ref = use_node_ref();
-        Callback::from(move |_e: MouseEvent| {
-            let articles = articles.clone();
-            let error_msg = error_msg.clone();
-
-            articles.set(None);
-            error_msg.set(None);
 
+    // Init: RSS laden
+    {
+        let rss_urls = rss_urls.clone();
+        use_effect_with((), move |_| {
             spawn_local(async move {
-                match invoke("fetch_ai_news", JsValue::NULL).await {
+                if let Ok(res) = invoke("load_rss_config", JsValue::NULL).await {
-                    Ok(res) => match serde_wasm_bindgen::from_value::<Vec<NewsArticle>>(res) {
+                    if let Ok(urls) = serde_wasm_bindgen::from_value::<Vec<String>>(res) {
-                        Ok(new_news) => articles.set(Some(new_news)),
+                        rss_urls.set(urls);
-                        Err(e) => error_msg.set(Some(format!("Datenfehler: {}", e))),
-                    },
-                    Err(e) => {
-                        let msg = e.as_string().unwrap_or_else(|| "API Fehler".into());
-                        error_msg.set(Some(msg));
                     }
                 }
             });
-        })
-    };
-
-    let save_key = {
-        let show_config = show_config.clone();
-        let api_key_ref = api_key_ref.clone();
-        let load_news = load_news.clone();
-        Callback::from(move |_| {
-            let input = api_key_ref.cast::<HtmlInputElement>().unwrap();
-            let key = input.value();
-            let show_config_handle = show_config.clone();
-            let load_news_handle = load_news.clone();
-
-            spawn_local(async move {
-                let args = serde_wasm_bindgen::to_value(&ApiKeyArgs { key }).unwrap();
-                if invoke("save_openrouter_key", args).await.is_ok() {
-                    show_config_handle.set(false);
-                    load_news_handle.emit(MouseEvent::new("click").unwrap());
-                }
-            });
-        })
-    };
-
-    {
-        let load_news = load_news.clone();
-        use_effect_with((), move |_| {
-            load_news.emit(MouseEvent::new("click").unwrap());
             || ()
         });
     }
 
-    let is_config_visible = *show_config;
+    let load_news = {
-    let toggle_config_handle = show_config.clone();
+        let articles = articles.clone();
-    let current_error = (*error_msg).clone();
+        let error_msg = error_msg.clone();
-    let articles_list = (*articles).clone();
+        let mode = *current_mode;
+        let provider = (*ai_provider).clone();
+        Callback::from(move |_| {
+            let articles = articles.clone();
+            let error_msg = error_msg.clone();
+            let provider = provider.clone();
+            articles.set(None);
+            error_msg.set(None);
+            spawn_local(async move {
+                let (cmd, args) = if mode == NewsMode::Ai {
+                    (
+                        "fetch_ai_news",
+                        serde_wasm_bindgen::to_value(&AiArgs { provider }).unwrap(),
+                    )
+                } else {
+                    ("fetch_rss_news", JsValue::NULL)
+                };
+                match invoke(cmd, args).await {
+                    Ok(res) => {
+                        let data = serde_wasm_bindgen::from_value::<Vec<NewsArticle>>(res)
+                            .unwrap_or_default();
+                        articles.set(Some(data));
+                    }
+                    Err(e) => error_msg.set(Some(e.as_string().unwrap_or_default())),
+                }
+            });
+        })
+    };
+
+    // Auto-Reload bei Switch
+    {
+        let load_news = load_news.clone();
+        use_effect_with(
+            ((*current_mode).clone(), (*ai_provider).clone()),
+            move |_| {
+                load_news.emit(MouseEvent::new("click").unwrap());
+                || ()
+            },
+        );
+    }
+
+    let save_settings = {
+        let rss_urls = rss_urls.clone();
+        let or_ref = or_key_ref.clone();
+        let groq_ref = groq_key_ref.clone();
+        let show_config = show_config.clone();
+        let load_news = load_news.clone();
+        Callback::from(move |_| {
+            let or_key = or_ref
+                .cast::<HtmlInputElement>()
+                .map(|i| i.value())
+                .unwrap_or_default();
+            let groq_key = groq_ref
+                .cast::<HtmlInputElement>()
+                .map(|i| i.value())
+                .unwrap_or_default();
+            let urls = (*rss_urls).clone();
+            let show_config = show_config.clone();
+            let load_news = load_news.clone();
+            spawn_local(async move {
+                let _ = invoke(
+                    "save_openrouter_key",
+                    serde_wasm_bindgen::to_value(&StringArgs { key: or_key }).unwrap(),
+                )
+                .await;
+                let _ = invoke(
+                    "save_groq_key",
+                    serde_wasm_bindgen::to_value(&StringArgs { key: groq_key }).unwrap(),
+                )
+                .await;
+                let _ = invoke(
+                    "save_rss_urls",
+                    serde_wasm_bindgen::to_value(&UrlsArgs { urls }).unwrap(),
+                )
+                .await;
+                show_config.set(false);
+                load_news.emit(MouseEvent::new("click").unwrap());
+            });
+        })
+    };
 
     html! {
         <div class="feed-container">
             <div class="feed-header">
-                <h1 class="feed-title">{"📰 KI News"}</h1>
+                <div class="header-main">
-                <div style="display: flex; gap: 10px;">
+                    <h1>{ if *current_mode == NewsMode::Ai { "📰 KI News" } else { "📻 RSS" } }</h1>
-                    <button class="reload-btn" onclick={move |_| toggle_config_handle.set(!is_config_visible)}>
+                    <div class="mode-toggle">
-                        {"⚙️"}
+                        <button class={if *current_mode == NewsMode::Ai { "toggle-btn active" } else { "toggle-btn" }}
-                    </button>
+                                onclick={let m = current_mode.clone(); move |_| m.set(NewsMode::Ai)}>{"KI"}</button>
-                    <button class="reload-btn" onclick={load_news.clone()}>
+                        <button class={if *current_mode == NewsMode::Rss { "toggle-btn active" } else { "toggle-btn" }}
-                        {"🔄"}
+                                onclick={let m = current_mode.clone(); move |_| m.set(NewsMode::Rss)}>{"RSS"}</button>
-                    </button>
+                    </div>
+                </div>
+
+                if *current_mode == NewsMode::Ai {
+                    <div class="provider-switch">
+                        <button class={if *ai_provider == "openrouter" { "prov-btn active" } else { "prov-btn" }}
+                                onclick={let p = ai_provider.clone(); move |_| p.set("openrouter".into())}>{"OR"}</button>
+                        <button class={if *ai_provider == "groq" { "prov-btn active" } else { "prov-btn" }}
+                                onclick={let p = ai_provider.clone(); move |_| p.set("groq".into())}>{"Groq"}</button>
+                    </div>
+                }
+
+                <div class="header-actions">
+                    <button class="action-btn" onclick={let sc = show_config.clone(); move |_| sc.set(!*sc)}>{"⚙️"}</button>
+                    <button class="action-btn" onclick={load_news.clone()}>{"🔄"}</button>
                 </div>
             </div>
 
-            if is_config_visible {
+            if *show_config {
-                <div class="post-card" style="border-color: #4a90e2; animation: slideIn 0.3s ease;">
+                <div class="config-panel">
-                    <h3 style="margin-top: 0;">{"Modell: OpenRouter"}</h3>
+                    <div class="config-section">
-                    <input
+                        <label>{"OpenRouter Key"}</label>
-                        ref={api_key_ref}
+                        <input ref={or_key_ref} type="password" class="config-input" placeholder="sk-or-..." />
-                        type="password"
+                    </div>
-                        placeholder="OpenRouter API Key..."
+                    <div class="config-section">
-                        class="recipient-input"
+                        <label>{"Groq Key"}</label>
-                        style="margin-bottom: 12px;"
+                        <input ref={groq_key_ref} type="password" class="config-input" placeholder="gsk-..." />
-                    />
+                    </div>
-                    <button class="reload-btn-large" onclick={save_key}>{"Key Speichern"}</button>
+                    <div class="config-section">
+                        <label>{"RSS FEEDS"}</label>
+                        <div class="rss-input-row">
+                            <input ref={new_url_ref.clone()} type="text" class="config-input" placeholder="URL..." />
+                            <button class="add-btn" onclick={
+                                let rss_urls = rss_urls.clone();
+                                let new_url_ref = new_url_ref.clone();
+                                move |_| {
+                                    if let Some(input) = new_url_ref.cast::<HtmlInputElement>() {
+                                        let val = input.value();
+                                        if !val.trim().is_empty() {
+                                            let mut list = (*rss_urls).clone();
+                                            list.push(val);
+                                            rss_urls.set(list);
+                                            input.set_value("");
+                                        }
+                                    }
+                                }
+                            }>{"+"}</button>
+                        </div>
+                    </div>
+                    <button class="save-master-btn" onclick={save_settings}>{"Alles Speichern"}</button>
                 </div>
             }
 
-            {
+            <div class="posts-list">
-                if let Some(msg) = current_error {
+                { if let Some(msg) = (*error_msg).clone() {
-                    html! {
+                    html! { <div class="error-box">{ format!("⚠️ Error: {}", msg) }</div> }
-                        <div class="post-card" style="border-color: #ef4444;">
+                } else if let Some(list) = (*articles).clone() {
-                            <p style="color: #ef4444; margin: 0;">{ format!("⚠️ {}", msg) }</p>
+                    html! { for list.iter().map(|a| html! { <NewsCard article={a.clone()} /> }) }
-                        </div>
-                    }
-                } else if let Some(list) = articles_list {
-                    html! {
-                        <div class="posts-list">
-                            { for list.iter().map(|a| html! { <NewsCard article={a.clone()} /> }) }
-                            <div class="footer-action">
-                                <button class="reload-btn-large" onclick={load_news}>
-                                    {"Mehr News generieren"}
-                                </button>
-                            </div>
-                        </div>
-                    }
                 } else {
-                    html! { <p class="status-msg">{"KI schreibt gerade News..."}</p> }
+                    html! { <div class="loading-spinner">{"Lade Nachrichten..."}</div> }
-                }
+                } }
-            }
+            </div>
         </div>
     }
 }
 
 #[derive(Properties, PartialEq)]
-pub struct NewsProps {
+pub struct NewsCardProps {
     pub article: NewsArticle,
 }
 
 #[function_component(NewsCard)]
-pub fn news_card(props: &NewsProps) -> Html {
+pub fn news_card(props: &NewsCardProps) -> Html {
     let a = &props.article;
-
-    // Markdown zu HTML konvertieren
     let markdown_html = {
         let mut options = Options::empty();
         options.insert(Options::ENABLE_STRIKETHROUGH);
         let parser = Parser::new_ext(&a.content, options);
-        let mut html_output = String::new();
+        let mut out = String::new();
-        md_html::push_html(&mut html_output, parser);
+        md_html::push_html(&mut out, parser);
-        html_output
+        out
     };
-
-    // Das HTML sicher in ein AttrValue packen
-    let div = web_sys::window()
-        .unwrap()
-        .document()
-        .unwrap()
-        .create_element("div")
-        .unwrap();
-    div.set_inner_html(&markdown_html);
-
     html! {
         <div class="post-card">
             <div class="post-header">
-                <span class="post-author" style="color: #facc15;">{ &a.author }</span>
+                <span class="post-author">{ &a.author }</span>
-                <span class="post-date">{"AI Generated"}</span>
+                <span class="post-date">{ &a.created_at }</span>
             </div>
-            // Hier nutzen wir das div-Element von oben als VNode
             <div class="post-content markdown-body">
                 { Html::from_html_unchecked(AttrValue::from(markdown_html)) }
             </div>

styles.css

@@ -2,53 +2,102 @@
 @import url("assets/news.css");
 @import url("assets/greet.css");
 
+/* --- Root Variables & Reset --- */
+:root {
+    --bg-color: #0f0f13;
+    --card-bg: rgba(255, 255, 255, 0.03);
+    --card-border: rgba(255, 255, 255, 0.08);
+    --text-primary: #e2e2e7;
+    --text-secondary: #a0a0b0;
+    --accent-color: #4a90e2;
+    --nav-bg: rgba(30, 30, 46, 0.95); /* Fallback for blur */
+    --danger: #ef4444;
+}
+
+* {
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent; /* UX-Finishing: No blue flash */
+}
+
 /* --- Global & Layout --- */
 body {
-    background-color: #0f0f13;
+    background-color: var(--bg-color);
-    color: #e2e2e7;
+    color: var(--text-primary);
     font-family:
         "Inter",
         -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        Roboto,
         sans-serif;
     margin: 0;
     line-height: 1.5;
     display: flex;
     justify-content: center;
+    min-height: 100vh;
+    overflow-x: hidden; /* Performance: Prevent horizontal scroll */
+    -webkit-tap-highlight-color: transparent;
 }
 
 html {
     scroll-behavior: smooth;
+    overflow-x: hidden;
 }
 
 .feed-container {
     width: 100%;
     max-width: 600px;
-    padding: 40px 20px 150px 20px;
+    /* Safe Areas: Top inset and mobile-friendly padding */
+    padding: calc(20px + env(safe-area-inset-top)) 16px
+        calc(120px + env(safe-area-inset-bottom)) 16px;
+}
+
+@media (min-width: 768px) {
+    .feed-container {
+        padding: 40px 20px 150px 20px;
+    }
 }
 
 /* --- Navigation Dock --- */
 .navbar-dock {
     position: fixed;
-    bottom: 30px;
+    /* Safe Areas: Bottom inset */
+    bottom: calc(20px + env(safe-area-inset-bottom));
     left: 50%;
     transform: translateX(-50%);
-    background-color: rgba(30, 30, 46, 0.85);
+    background-color: var(--nav-bg);
-    backdrop-filter: blur(12px);
+    padding: 12px 24px;
-    -webkit-backdrop-filter: blur(12px);
-    padding: 15px 30px;
     border-radius: 50px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     display: flex;
-    gap: 30px;
+    gap: 20px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
     z-index: 1000;
+    width: max-content;
+    max-width: 90%;
+}
+
+@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
+    .navbar-dock {
+        background-color: rgba(30, 30, 46, 0.85);
+        backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(12px);
+    }
 }
 
 .nav-link {
-    color: #a0a0b0;
+    color: var(--text-secondary);
     text-decoration: none;
     font-weight: 600;
+    font-size: 0.9rem;
     transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    /* Touch-Ergonomie: Min 44px effective height */
+    padding: 10px 12px;
+    user-select: none; /* UX-Finishing */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 44px;
 }
 
 .nav-link:hover {
@@ -57,178 +106,416 @@ html {
 }
 
 .nav-link.active {
-    color: #4a90e2;
+    color: var(--accent-color);
 }
 
-/* --- Content & Cards --- */
+/* --- Header & Navigation --- */
 .feed-header {
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: flex-start;
-    margin-bottom: 30px;
+    margin-bottom: 24px;
+    flex-wrap: wrap;
+    gap: 16px;
 }
 
-.post-card {
+.header-main h1 {
-    background: rgba(255, 255, 255, 0.03);
+    margin: 0;
+    font-size: 1.5rem;
+}
+
+.mode-toggle {
+    display: flex;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    padding: 3px;
     border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 16px;
+}
+
+.toggle-btn {
+    border: none;
+    background: transparent;
+    color: #8e8e93;
+    padding: 8px 16px;
+    border-radius: 9px;
+    cursor: pointer;
+    font-size: 0.8rem;
+    font-weight: 700;
+    user-select: none;
+    min-height: 36px;
+}
+
+.toggle-btn.active {
+    background: var(--accent-color);
+    color: white;
+}
+
+.action-btn {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    padding: 12px;
+    cursor: pointer;
+    font-size: 1.1rem;
+    user-select: none;
+    min-width: 44px;
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* --- Config Panel --- */
+.config-panel {
+    background: rgba(30, 30, 46, 0.6);
+    border: 1px solid rgba(74, 144, 226, 0.3);
+    border-radius: 20px;
     padding: 20px;
+    margin-bottom: 30px;
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
+    animation: slideIn 0.3s ease-out;
+}
+
+@supports (backdrop-filter: blur(20px)) {
+    .config-panel {
+        backdrop-filter: blur(20px);
+    }
+}
+
+.config-input {
+    flex: 1;
+    padding: 14px 16px;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: white;
+    border-radius: 12px;
+    /* Input-Fix: Prevent Android Auto-Zoom */
+    font-size: 16px;
+    font-family: inherit;
+    transition: border-color 0.2s;
+}
+
+.config-input:focus {
+    outline: none;
+    border-color: var(--accent-color);
+}
+
+.rss-input-row {
+    display: flex;
+    gap: 10px;
     margin-bottom: 16px;
 }
 
-.post-author {
+.add-btn {
-    color: #4a90e2;
+    background: var(--accent-color);
+    color: white;
+    border: none;
+    border-radius: 12px;
+    width: 50px;
+    min-width: 50px;
+    cursor: pointer;
     font-weight: 700;
-    font-size: 0.85rem;
+    font-size: 1.4rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
-.post-content {
+.add-btn:active {
-    white-space: pre-wrap;
+    transform: scale(0.9);
-    word-wrap: break-word;
+}
+
+.rss-list-scroll {
+    max-height: 180px;
+    overflow-y: auto;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 12px;
+    padding: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    margin-bottom: 16px;
+}
+
+.rss-url-entry {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 14px;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 10px;
+    margin-bottom: 6px;
+    font-size: 0.85rem;
+    border: 1px solid transparent;
+    transition: all 0.2s;
+}
+
+.rss-url-entry:hover {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.1);
+}
+
+.url-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-right: 12px;
+    color: var(--text-secondary);
+}
+
+.delete-btn {
+    background: rgba(239, 68, 68, 0.1);
+    border: 1px solid rgba(239, 68, 68, 0.2);
+    color: var(--danger);
+    cursor: pointer;
+    padding: 8px 12px;
+    border-radius: 8px;
+    font-weight: 700;
+    font-size: 0.8rem;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 44px;
+    min-height: 36px;
+}
+
+.delete-btn:active {
+    transform: scale(0.95);
+}
+
+.delete-btn:hover {
+    background: var(--danger);
+    color: white;
+}
+
+.save-master-btn {
+    background: linear-gradient(135deg, #4a90e2, #357abd);
+    color: white;
+    border: none;
+    padding: 16px;
+    border-radius: 12px;
+    cursor: pointer;
+    width: 100%;
+    font-weight: 700;
+    font-size: 1rem;
+    user-select: none;
+    min-height: 48px;
     margin-top: 10px;
 }
 
-/* --- Interaction Elements --- */
+/* --- Post Cards --- */
-.reload-btn-large {
+.post-card {
-    cursor: pointer;
+    background: var(--card-bg);
-    background: rgba(74, 144, 226, 0.1);
+    border: 1px solid var(--card-border);
-    color: #4a90e2;
+    border-radius: 18px;
-    padding: 14px;
+    padding: 16px;
-    border-radius: 16px;
+    margin-bottom: 16px;
-    width: 100%;
+    word-wrap: break-word;
-    font-weight: 600;
-    border: 1px solid rgba(74, 144, 226, 0.3);
-    transition: all 0.2s ease;
 }
 
-.reload-btn-large:hover {
+.post-author {
-    background: rgba(74, 144, 226, 0.2);
+    color: var(--accent-color);
-    transform: translateY(-2px);
+    font-weight: 800;
-}
-
-/* --- Markdown Styling für KI News --- */
-.markdown-body {
-    font-size: 0.95rem;
-    line-height: 1.6;
-    color: #e2e2e7;
-}
-
-/* Fettgedruckter Text in Blau-Weiß-Verlauf Optik */
-.markdown-body strong {
-    color: #ffffff;
-    font-weight: 700;
-}
-
-/* Kursiv für Akzente */
-.markdown-body em {
-    color: #a0a0b0;
-    font-style: italic;
-}
-
-/* Links im KI-Text */
-.markdown-body a {
-    color: #4a90e2;
-    text-decoration: none;
-    border-bottom: 1px solid rgba(74, 144, 226, 0.3);
-    transition: all 0.2s ease;
-}
-
-.markdown-body a:hover {
-    color: #5294e2;
-    border-bottom-color: #5294e2;
-}
-
-/* Listen-Design */
-.markdown-body ul,
-.markdown-body ol {
-    padding-left: 20px;
-    margin: 10px 0;
-}
-
-.markdown-body li {
-    margin-bottom: 6px;
-}
-
-/* Code-Blöcke (falls die KI Code generiert) */
-.markdown-body code {
-    background: rgba(255, 255, 255, 0.05);
-    padding: 2px 6px;
-    border-radius: 6px;
-    font-family: "JetBrains Mono", monospace;
     font-size: 0.85rem;
-    border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-/* Überschriften innerhalb der Post-Card */
+/* --- Greet Page --- */
-.markdown-body h1,
-.markdown-body h2,
-.markdown-body h3 {
-    color: #4a90e2;
-    margin-top: 15px;
-    margin-bottom: 8px;
-    font-weight: 700;
-}
-
-.markdown-body h3 {
-    font-size: 1.1rem;
-}
-
-/* Zitate / Blockquotes */
-.markdown-body blockquote {
-    margin: 10px 0;
-    padding-left: 15px;
-    border-left: 3px solid #4a90e2;
-    color: #8e8e93;
-    font-style: italic;
-}
-
-/* Greet */
 .robot-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    margin: 40px auto;
-    margin: 60px auto;
+    width: 100%;
-    width: fit-content;
+    user-select: none;
-}
-
-.robot-container:hover {
-    transform: scale(1.05);
 }
 
 .robot-icon {
-    font-size: 6rem;
+    font-size: 5rem;
     filter: drop-shadow(0 0 20px rgba(74, 144, 226, 0.3));
     animation: float 3s ease-in-out infinite;
 }
 
 .bubble {
-    margin-top: 25px;
+    margin-top: 20px;
-    padding: 20px 30px;
+    padding: 16px 24px;
-    background: rgba(30, 30, 46, 0.7);
+    background: rgba(30, 30, 46, 0.8);
-    backdrop-filter: blur(12px);
+    border-radius: 20px;
-    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 173, 210, 0.3);
-    border-radius: 24px;
-    border: 1px solid rgba(255, 173, 210, 0.4);
     color: #ffffff;
     font-weight: 600;
-    font-size: 1.1rem;
+    font-size: 1rem;
     text-align: center;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+    max-width: 90%;
-    max-width: 320px;
-    line-height: 1.4;
 }
 
+@supports (backdrop-filter: blur(12px)) {
+    .bubble {
+        backdrop-filter: blur(12px);
+    }
+}
+
+/* --- Animations --- */
 @keyframes float {
-    0% {
+    0%,
-        transform: translateY(0px);
-    }
-    50% {
-        transform: translateY(-10px);
-    }
     100% {
         transform: translateY(0px);
     }
+    50% {
+        transform: translateY(-15px);
+    }
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* --- Utilities --- */
+.reload-btn-large {
+    cursor: pointer;
+    background: linear-gradient(
+        135deg,
+        rgba(74, 144, 226, 0.15),
+        rgba(74, 144, 226, 0.05)
+    );
+    color: var(--accent-color);
+    padding: 16px;
+    border-radius: 16px;
+    width: 100%;
+    font-weight: 700;
+    border: 1px solid rgba(74, 144, 226, 0.3);
+    user-select: none;
+    min-height: 52px;
+    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+}
+
+.reload-btn-large:hover {
+    background: rgba(74, 144, 226, 0.2);
+    border-color: var(--accent-color);
+    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.2);
+    transform: translateY(-2px);
+}
+
+.reload-btn-large:active {
+    transform: scale(0.96) translateY(0);
+}
+
+/* Optional: Add a subtle pulse animation when content is old */
+@keyframes pulse-subtle {
+    0% {
+        box-shadow: 0 0 0 0 rgba(74, 144, 226, 0.4);
+    }
+    70% {
+        box-shadow: 0 0 0 10px rgba(74, 144, 226, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(74, 144, 226, 0);
+    }
+}
+
+.error-box {
+    background: rgba(239, 68, 68, 0.1);
+    border: 1px solid rgba(239, 68, 68, 0.3);
+    color: var(--danger);
+    padding: 15px;
+    border-radius: 12px;
+    text-align: center;
+}
+
+/* --- AI Provider Switch (Neu) --- */
+.provider-switch {
+    display: flex;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    padding: 3px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    /* Zwischen h1 und den Icons positionieren */
+    margin: 0 10px;
+}
+
+.prov-btn {
+    border: none;
+    background: transparent;
+    color: var(--text-secondary);
+    padding: 6px 14px;
+    border-radius: 9px;
+    cursor: pointer;
+    font-size: 0.75rem;
+    font-weight: 700;
+    transition: all 0.2s ease;
+}
+
+.prov-btn.active {
+    background: var(--accent-color);
+    color: white;
+}
+
+/* --- Config Section Refinement --- */
+.config-section {
+    margin-bottom: 20px;
+}
+
+.config-section label {
+    display: block;
+    font-size: 0.7rem;
+    color: var(--text-secondary);
+    margin-bottom: 6px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+/* --- Markdown Content Styling --- */
+.markdown-body {
+    font-size: 0.95rem;
+    color: var(--text-primary);
+    line-height: 1.6;
+}
+
+.markdown-body h3 {
+    margin-top: 0;
+    margin-bottom: 10px;
+    font-size: 1.15rem;
+    color: #ffffff;
+    font-weight: 700;
+}
+
+.markdown-body p {
+    margin: 0;
+}
+
+/* --- Status Indicators --- */
+.loading-spinner {
+    text-align: center;
+    padding: 40px;
+    color: var(--text-secondary);
+    font-style: italic;
+    animation: pulse-subtle 2s infinite;
+}
+
+.empty-msg {
+    text-align: center;
+    color: var(--text-secondary);
+    margin-top: 40px;
+    font-size: 0.9rem;
+    opacity: 0.8;
+}
+
+/* --- Layout Adjustment für Provider Switch --- */
+.header-main {
+    display: flex;
+    align-items: center;
+    gap: 12px;
 }