Created
February 23, 2026 22:15
-
-
Save ibrahimyilmaz7/fc4e1d96d20c3805532d2ae689b84d34 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="de"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Abakus: Lohn & Finanzen | Marketing</title> | |
| <meta | |
| name="description" | |
| content="Abakus ist eine deutsche Finanzrechner-App fuer Brutto-Netto, Steuerklassen, Sozialabgaben und transparente Aufschluesselungen." | |
| > | |
| <style> | |
| :root { | |
| color-scheme: light dark; | |
| --bg: #f7f9fc; | |
| --card: #ffffff; | |
| --text: #101828; | |
| --muted: #475467; | |
| --accent: #0f766e; | |
| --accent-weak: #d1fae5; | |
| --border: #e4e7ec; | |
| --max-width: 860px; | |
| --radius: 14px; | |
| --shadow: 0 10px 30px rgba(16, 24, 40, 0.08); | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --bg: #0b1220; | |
| --card: #111a2b; | |
| --text: #e6edf8; | |
| --muted: #b7c4d9; | |
| --accent: #34d399; | |
| --accent-weak: rgba(52, 211, 153, 0.18); | |
| --border: #233250; | |
| --shadow: 0 10px 30px rgba(0, 0, 0, 0.34); | |
| } | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; | |
| background: radial-gradient(circle at 10% -5%, #c7f9f0 0%, var(--bg) 40%); | |
| color: var(--text); | |
| line-height: 1.55; | |
| } | |
| .container { | |
| width: min(92%, var(--max-width)); | |
| margin: 0 auto; | |
| padding: 28px 0 48px; | |
| } | |
| .hero, | |
| .section { | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow); | |
| padding: 24px; | |
| margin-bottom: 16px; | |
| } | |
| h1 { | |
| margin: 0 0 8px; | |
| font-size: clamp(1.65rem, 3vw, 2.25rem); | |
| line-height: 1.2; | |
| } | |
| h2 { | |
| margin: 0 0 10px; | |
| font-size: 1.1rem; | |
| } | |
| p { | |
| margin: 0 0 12px; | |
| color: var(--muted); | |
| } | |
| .tag { | |
| display: inline-block; | |
| margin-bottom: 10px; | |
| padding: 4px 10px; | |
| border-radius: 999px; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| color: var(--accent); | |
| background: var(--accent-weak); | |
| } | |
| ul { | |
| margin: 0; | |
| padding-left: 18px; | |
| color: var(--muted); | |
| } | |
| li + li { | |
| margin-top: 8px; | |
| } | |
| .grid { | |
| display: grid; | |
| gap: 12px; | |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |
| } | |
| .panel { | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 14px; | |
| background: color-mix(in oklab, var(--card) 84%, var(--accent-weak)); | |
| } | |
| .panel strong { | |
| display: block; | |
| margin-bottom: 4px; | |
| color: var(--text); | |
| } | |
| a { | |
| color: var(--accent); | |
| text-decoration-thickness: 2px; | |
| text-underline-offset: 2px; | |
| } | |
| footer { | |
| margin-top: 12px; | |
| color: var(--muted); | |
| font-size: 0.92rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main class="container"> | |
| <section class="hero"> | |
| <span class="tag">iOS App</span> | |
| <h1>Abakus: Lohn & Finanzen</h1> | |
| <p>Brutto-Netto und mehr.</p> | |
| <p> | |
| Abakus hilft in Deutschland dabei, das Nettogehalt aus dem Bruttolohn schnell und | |
| transparent zu berechnen inklusive Steuern und Sozialabgaben. | |
| </p> | |
| </section> | |
| <section class="section"> | |
| <h2>Was die App bietet</h2> | |
| <div class="grid"> | |
| <div class="panel"> | |
| <strong>Brutto-Netto in Echtzeit</strong> | |
| Das Ergebnis aktualisiert sich sofort bei jeder Eingabe. | |
| </div> | |
| <div class="panel"> | |
| <strong>Deutsche Steuerlogik</strong> | |
| Mit Lohnsteuer, Solidaritaetszuschlag und Kirchensteuer. | |
| </div> | |
| <div class="panel"> | |
| <strong>Sozialabgaben enthalten</strong> | |
| Kranken-, Renten-, Arbeitslosen- und Pflegeversicherung. | |
| </div> | |
| <div class="panel"> | |
| <strong>Fuer den Alltag gemacht</strong> | |
| Alle Steuerklassen, alle 16 Bundeslaender und mehrsprachige Nutzung. | |
| </div> | |
| </div> | |
| </section> | |
| <section class="section"> | |
| <h2>Auf einen Blick</h2> | |
| <ul> | |
| <li>Unterstuetzt alle sechs Steuerklassen (1-6)</li> | |
| <li>Gesetzliche und private Krankenversicherung</li> | |
| <li>Kirchensteuer-Unterschiede je Bundesland</li> | |
| <li>Optimiert fuer iPhone und iPad in Hell- und Dunkelmodus</li> | |
| </ul> | |
| </section> | |
| <section class="section"> | |
| <h2>Wichtiger Hinweis</h2> | |
| <p> | |
| Dieser Rechner dient nur zur Information und ersetzt keine Steuer- oder Rechtsberatung. | |
| Fuer verbindliche Ergebnisse konsultiere bitte eine Steuerberatung oder offizielle Stellen. | |
| </p> | |
| </section> | |
| <section class="section"> | |
| <h2>Support und Rechtliches</h2> | |
| <p>E-Mail: <a href="mailto:abakus.app@proton.me">abakus.app@proton.me</a></p> | |
| <p> | |
| Support-Seite: <a href="./support.html">support.html</a><br> | |
| Datenschutz: <a href="./privacy.html">privacy.html</a> | |
| </p> | |
| <footer>Stand: 2026-02-23</footer> | |
| </section> | |
| </main> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment