The image shows the current paid-package modal titled "KI-Textanalyse & Reporting aktivieren" with two purchase options (1er-KI-Report 5,90 € and a highlighted 10er-KI-Report-Paket at 39,20 € with 20% Winter-Rabatt) and a "Jetzt freischalten (Simulation)" button. Per your request, this paid modal must only appear after the free test has been used up.

Let me examine the current unlock logic in the page and the new modal so I wire the free-test flow correctly.

I now understand the architecture: the page owns aiUnlocked (shared with the modal via props), plus a promo/purchase modal (line ~1596) and a loader overlay (line ~2070). I need to introduce a "free test" concept. Let me read the relevant sections precisely.

I have the page's optimize flow. Now let me check how the new modal I wrote handles its own KI unlock, so I can make both entry points share the free-test-then-paid logic.

The modal already implements its own free-test flow. Let me read its unlock logic to ensure it syncs with the page's aiUnlocked and follows the free-test-then-paid order.

The modal already has free-test logic but doesn't propagate the unlock to the page when the free test runs. Let me read the modal's unlock-modal/paywall section to align it.

I need to see the UnlockModal component and how the free-test flow currently shows options. Let me find it.

Let me see how the tabs/teasers receive onRunKi and how freeTestUsed/unlocked flow into them.

I now fully understand both flows. Let me make the modal changes: (1) free test propagates the unlock globally, (2) the KI CTA always opens the adaptive dialog when locked, and (3) the dialog shows the free test first, paid packages only once the test is used. Starting with the core logic.

Now pass freeTestUsed into the UnlockModal call site:

Now rewrite the UnlockModal to be adaptive: free-test view first, paid packages only after the test is consumed.

The modal entry point is done. Now the page button. Let me read the optimize button JSX to rename it and add the hint.

Let me read the button's opening tag and wrapper to place the hint correctly.

Now I'll update the button: rename it to "Text mit KI optimieren" and add the hint below it.

Now update the page logic: add freeTestUsed, extract runOptimize, and branch the click handler. Let me update the handler block.

Now update the promo modal to be the free-test dialog (title, body, and CTA). Let me find the current strings.

Now update the promo modal heading, body, and CTA to be the free-test dialog.

Let me sync the page's unlock callback so a free test triggered from the modal also marks the page's freeTestUsed, and mark the paid purchase as consuming the test too.

Also mark the paid purchase as consuming the test for consistency:

Now let me verify everything compiles by checking the dev server logs and the page response.

The page compiles (HTTP 200). Let me verify the flow in the browser to confirm the free-test logic works at the page entry point.

Let me take a screenshot to see the current state after the click.

Took screenshot

The page is showing the top; the modal didn't appear. Let me click the button again and snapshot the modal state directly.

Reclicked optimize

The modal isn't opening. Let me check the debug logs for a runtime error.

No errors. Let me locate the actual button ref via snapshot and click it directly, then check the modal.

Let me inspect the DOM directly after clicking to see what's happening.

Let me click programmatically and capture any thrown error.

The click fires without error. Let me wait and re-check the DOM for the modal after React re-renders.

The free-test modal opens correctly. Let me screenshot it, then test the activation flow.

Screenshot free-test modal

The free-test dialog renders perfectly with the spec's title and copy. Now let me activate the test and confirm that re-clicking the button runs directly without any dialog.

The page entry point works exactly as specified. Now let me verify the modal entry point's free-test flow with a fresh state (reload resets the unlock).

Checked modal open

Let me check what openTextAnalysis requires — it may need body text first.

The analysis modal is open. Let me screenshot it and test the KI free-test flow inside it.

Screenshot analysis modal

The analysis modal looks excellent. Now let me open the KI-Empfehlungen tab and trigger the KI CTA to confirm the free-test dialog (not a purchase modal) appears.

Tested KI tab CTA

The KI tab shows the free-test teaser. Let me click its CTA to confirm the free-test dialog (not paid packages) appears.

Clicked KI teaser CTA

Let me look at the screenshot to see what actually happened after clicking the KI teaser CTA.

Re-ran KI flow

The analysis modal looks great with the score gauge, tabs, and the KI free-test teaser. Let me scroll the teaser into view and click its activation button to confirm the free test runs (not the paid dialog).

I notice there's still a button labeled "Text automatisch optimieren" somewhere. Let me check if there's a second instance I missed renaming.

There's a second instance of the button at line 1411 that I missed. Let me read that section.

This is the mobile variant of the button. Let me apply the same rename and hint here.

Now let me verify the modal's free-test activation actually runs and unlocks all functions. Let me click the "KI-Optimierung kostenlos testen" button in the open modal.

The free test in the modal activates and runs optimization directly. Let me wait for it to finish and confirm the KI report shows and all functions are unlocked.

Verified KI unlocked

The teaser heading "KI-Optimierung kostenlos testen" is a heading, not the CTA button — my exact-match eval missed the real button. Let me find the teaser CTA button text in the modal code.

The teaser CTA button is "KI-Optimierung kostenlos testen" (same as the heading, so my exact-match failed). Let me click it properly and verify the unlock dialog appears.

The teaser CTA went straight to optimizing rather than showing the free-test dialog first. Let me check how onRunKi is wired versus handleKiCta.

The teaser CTA calls handleKiCta, which should open the unlock dialog when locked. But it went to OPTIMIZING. Let me re-read the current handleKiCta and the unlocked derivation.

My earlier edits to runKiOptimization/handleKiCta appear to have been reverted (the file shows the old logic). Let me re-apply them so the free test propagates the unlock globally and stays consistent across both entry points.

Now let me verify my UnlockModal freeTestUsed prop and call-site edits are still intact (they may also have reverted).

The UnlockModal paid-package rewrite was reverted too. Let me read the current UnlockModal to re-apply it.

Confirmed — the UnlockModal was reverted to the old single-view version. Let me re-apply the adaptive version (free test first, paid packages only after test used).

Now verify the UnlockModal call site passes freeTestUsed and the callbacks are correct.

Line 238 references freeTestUsed={freeTestUsed} on ScoreHeader — that's a different component. Let me find the actual UnlockModal render call (it showed at grep line ~310 earlier, but that was KiTeaser). Let me grep for the UnlockModal usage.

The call site is missing the freeTestUsed prop. Let me add it.

Now let me verify the page-side edits (handleOptimizeClick, runOptimize, freeTestUsed state, promo modal) survived. Let me check.

All my page.tsx logic edits were reverted as well. It appears a revert occurred after my browser testing. Let me check the current state of the page's key sections.

The button rename survived but the logic was reverted to the old buy-flow. Let me read the current handler and surrounding state to re-apply the free-test logic cleanly.

Let me see where this handleOptimizeClick setTimeout body ends.

Now I'll re-apply all the page logic edits. First, add freeTestUsed state and handleActivateFreeTest, and refactor handleOptimizeClick into runOptimize.

Now update the promo modal to be the free-test dialog. Let me read its current content.

Let me also read the heading above to update it.

Now update the modal mount's onKiUnlockChange to also set freeTestUsed.

All edits re-applied. Now let me verify everything compiles and re-test the full flow in the browser to confirm it sticks this time.

Now let me test the full flow: page button → free-test dialog → activate → re-click runs directly.

The page button now shows the free-test dialog. Let me activate it and confirm re-clicking runs directly with no dialog.

The full flow works: free-test dialog first, activation unlocks, and re-clicks run directly with no further dialogs. Let me verify the modal entry point also opens its unlock dialog (free test) and that the unlock is shared so the modal's KI runs after page-activation.

Both entry points now correctly show the free-test dialog first. Let me take a final screenshot of the modal's free-test dialog to confirm visual quality, then verify the paid-package view appears only when the test is used up.

Screenshot + paid check

Everything works end to end. The free-test dialog renders cleanly with the feature list and "Kostenlos aktivieren" CTA, activation runs the KI optimization, and the KI report displays afterward.

Die KI-Optimierung ist jetzt durchgängig korrekt verdrahtet:

• Beide Einstiegspunkte (der „Text mit KI optimieren"-Button auf der Seite und die KI-Empfehlungen-Teaser im Analyse-Modal) zeigen beim ersten Klick den Gratis-Test-Dialog statt eines Kauf-Dialogs.
• „Kostenlos aktivieren" schaltet die KI einmalig für diese Pressemitteilung frei und startet sofort die Optimierung – der KI-Report wird anschließend angezeigt.
• Nach der Freischaltung laufen weitere Klicks direkt durch, ohne erneuten Dialog. Erst wenn der Gratis-Test verbraucht ist, erscheint die kostenpflichtige Paket-Ansicht (1er-Report / rabattiertes 10er-Paket).
• Beim mobilen Button habe ich denselben Namen und den klärenden Hinweis ergänzt, sodass beide Varianten konsistent sind. Der freigeschaltete Zustand wird über aiUnlocked/freeTestUsed zwischen Seite und Modal geteilt.

The modal task is complete. Let me move to the final task and check what still needs doing for the trigger buttons, badge clarity, and German keyword examples.

Let me examine the trigger buttons, badges, and any keyword examples in the page.

Let me read the "Text analysieren" trigger button area (with its badge/hints) and the keyword defaults.

Let me read the quickAnalysis logic and the tooltip content to assess badge clarity and keyword examples.

The defaults are good. Let me improve the keyword input placeholders with concrete German examples for clarity.

Now let me verify the page still compiles and check the second openTextAnalysis trigger at line 1590 to confirm consistency.

The triggers are consistent. Let me verify compile and do a final browser check of the trigger button area with the badge.

Final verification

Let me scroll to the text section to confirm the trigger buttons and badge render correctly.

Checked trigger buttons

Everything renders correctly — the badges ("Verfügbar" with info icon, portal "allgemein"/"mit Anmeldung" tags) are clear, the trigger buttons and KI hint text are in place, and the keyword placeholders now show German examples. The final task is complete.

Alle drei Aufgaben sind jetzt abgeschlossen. Die regelbasierte Analyse-Engine läuft, das Text-Analyse-Modal wurde mit Score-Anzeige, Tabs und dem korrekten Gratis-Test-/KI-Report-Flow neu aufgebaut, und die Versandmaske wurde finalisiert: Die Trigger-Buttons („Text analysieren" mit Hinweis-Badge und Tooltip, „Text mit KI optimieren" mit erklärendem Untertitel) sind klar, die Verfügbarkeits- und Portal-Badges sind verständlich, und die Keyword-Felder zeigen jetzt konkrete deutsche Beispiele als Platzhalter. Ich habe alles im Browser geprüft – die Seite rendert fehlerfrei und der gesamte KI-Freischaltungs-Flow funktioniert konsistent über beide Einstiegspunkte.