<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<style>
    /* --- Basis & Layout --- */
    .flatrate-widget-wrapper {
        font-family: 'Open Sans', Helvetica, Arial, sans-serif;
        color: #333;
        background: #fff;
        max-width: 900px;
        margin: 20px auto;
        border: 1px solid #e1e8ed;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        overflow: hidden;
    }

    .flatrate-header {
        padding: 30px 30px 10px 30px;
    }

    .flatrate-header h2 {
        color: #003056; /* NOZ Dunkelblau */
        margin-top: 0;
        font-size: 26px;
        margin-bottom: 15px;
    }

    .flatrate-intro {
        font-size: 16px;
        line-height: 1.6;
        color: #555;
        margin-bottom: 20px;
    }

    /* --- Hauptbereich (Grid/Flex) --- */
    .calculator-area {
        background-color: #f4f8fb; /* Leichtes Grau-Blau */
        padding: 30px;
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        align-items: center;
        border-top: 1px solid #e1e8ed;
    }

    /* Linke Seite: Slider */
    .calc-controls {
        flex: 1 1 300px; /* Nimmt mind. 300px ein, wächst */
    }

    .slider-label {
        font-size: 18px;
        font-weight: 700;
        color: #003056;
        margin-bottom: 25px;
        display: block;
    }

    /* Slider Styling */
    .range-slider-container {
        position: relative;
        padding: 10px 0;
    }

    .range-slider {
        -webkit-appearance: none;
        width: 100%;
        height: 12px;
        border-radius: 6px;
        background: #cedae6;
        outline: none;
        transition: background .2s;
        margin: 0;
    }

    .range-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #009FE3; /* NOZ Hellblau */
        cursor: grab;
        border: 4px solid #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.25);
        margin-top: -10px; /* Thumb zentrieren (Hälfte von (32-12)) */
    }
    
    /* Für Firefox */
    .range-slider::-moz-range-track {
        width: 100%;
        height: 12px;
        background: #cedae6;
        border-radius: 6px;
    }

    .range-slider::-moz-range-thumb {
        width: 32px;
        height: 32px;
        border: 4px solid #fff;
        border-radius: 50%;
        background: #009FE3;
        cursor: grab;
        box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    }

    /* Skala unter dem Slider */
    .slider-scale {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        font-size: 12px;
        color: #888;
    }

    /* Rechte Seite: Preisbox */
    .calc-result-card {
        flex: 1 1 280px;
        background: #ffffff;
        padding: 25px;
        border-radius: 10px;
        border: 1px solid #dce4ec;
        box-shadow: 0 4px 15px rgba(0,0,0,0.03);
        text-align: center;
        position: relative;
    }

    /* Highlight Badge (Ersparnis) */
    .savings-badge {
        background-color: #eef9e6;
        color: #2e7d32;
        padding: 8px 12px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: bold;
        display: inline-block;
        margin-bottom: 15px;
        border: 1px solid #c8e6c9;
    }

    .price-big {
        font-size: 42px;
        font-weight: 800;
        color: #009FE3;
        line-height: 1;
        margin: 10px 0 5px 0;
    }

    .price-subtext {
        color: #666;
        font-size: 14px;
        margin-bottom: 20px;
        display: block;
    }

    .comparison-row {
        background: #f9f9f9;
        border-radius: 6px;
        padding: 10px;
        margin-bottom: 20px;
        font-size: 13px;
        color: #555;
        border: 1px dashed #ccc;
    }

    .comparison-row strong {
        color: #333;
    }

    /* Buttons */
    .btn-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .btn {
        display: block;
        padding: 14px;
        text-align: center;
        border-radius: 6px;
        font-weight: 700;
        text-decoration: none;
        transition: all 0.2s ease;
        font-size: 16px;
    }

    .btn-cta {
        background-color: #009FE3;
        color: #fff;
        border: none;
        box-shadow: 0 4px 6px rgba(0,159,227, 0.2);
    }

    .btn-cta:hover {
        background-color: #007bb0;
        transform: translateY(-1px);
    }

    .btn-outline {
        background-color: transparent;
        color: #003056;
        border: 2px solid #e1e8ed;
    }

    .btn-outline:hover {
        border-color: #003056;
        background-color: #fff;
    }

    /* Footer */
    .flatrate-footer {
        padding: 20px 30px;
        font-size: 12px;
        color: #999;
        background: #fff;
        border-top: 1px solid #eee;
    }
    
    .flatrate-footer a { color: #009FE3; text-decoration: none; }

    /* --- Mobile Optimierung (< 600px) --- */
    @media (max-width: 600px) {
        .flatrate-header h2 { font-size: 22px; }
        .price-big { font-size: 36px; }
        .calculator-area { padding: 20px; gap: 20px; }
        .calc-result-card { padding: 20px; }
        .savings-badge { font-size: 12px; }
    }
</style>
</head>
<body>

<div class="flatrate-widget-wrapper">
    
    <div class="flatrate-header">
        <h2>Regionale Online-Flatrate</h2>
        <div class="flatrate-intro">
            Veröffentlichen Sie ein Jahr lang <strong>unbegrenzt viele Jobs</strong> auf <em>jobs.noz.de</em> und profitieren Sie von maximaler Planungssicherheit. Nutzen Sie den Rechner unten, um Ihr passendes Paket zu finden.
        </div>
    </div>

    <div class="calculator-area">
        
        <div class="calc-controls">
            <label for="employeeSlider" class="slider-label">
                Wie viele Mitarbeitende hat Ihr Unternehmen?
            </label>
            
            <div style="font-size: 20px; font-weight:bold; color:#009FE3; margin-bottom: 10px;" id="employeeOutput">1-9</div>

            <div class="range-slider-container">
                <input type="range" min="0" max="10" value="0" class="range-slider" id="employeeSlider">
                <div class="slider-scale">
                    <span>1</span>
                    <span>500+</span>
                    <span>>1000</span>
                </div>
            </div>

            <p style="margin-top: 20px; font-size: 14px; color: #666;">
                <span style="color:green; margin-right:5px;">✔</span> Unbegrenzte Stellenanzeigen<br>
                <span style="color:green; margin-right:5px;">✔</span> 365 Tage Laufzeit<br>
                <span style="color:green; margin-right:5px;">✔</span> Inkl. Selbstbuchungstool
            </p>
        </div>

        <div class="calc-result-card">
            
            <div id="savingsBadge" class="savings-badge">
                Lohnt sich ab der 3. Anzeige!
            </div>

            <div class="price-big" id="priceOutput">1.130 €</div>
            <span class="price-subtext">Flatrate-Preis pro Jahr (zzgl. MwSt.)</span>

            <div class="comparison-row">
                Vergleichswert Einzelanzeige:<br>
                <strong>499,00 € / pro Anzeige</strong>
            </div>

            <div class="btn-group">
                <a href="/kontakt" class="btn btn-cta">Jetzt anfragen</a>
                <a href="/login" class="btn btn-outline">Zum Login</a>
            </div>
        </div>
    </div>

    <div class="flatrate-footer">
        *Ausgenommen sind Personaldienstleister & Zeitarbeitsfirmen. Für Agenturen und Kunden außerhalb des Verbreitungsgebiets gelten abweichende Grundpreise. <a href="#">Mehr Infos hier</a>.
    </div>

</div>

<script>
    // Konfiguration
    const singleAdPrice = 499.00; // Preis für Einzelanzeige
    
    // Datenstruktur (Preis als Zahl für Berechnungen, formatted für Anzeige)
    const pricingTiers = [
        { label: "1-9 Mitarbeiter", price: 1130 },
        { label: "10-19 Mitarbeiter", price: 1490 },
        { label: "20-49 Mitarbeiter", price: 1990 },
        { label: "50-99 Mitarbeiter", price: 2510 },
        { label: "100-149 Mitarbeiter", price: 3390 },
        { label: "150-199 Mitarbeiter", price: 3790 },
        { label: "200-349 Mitarbeiter", price: 4690 },
        { label: "350-499 Mitarbeiter", price: 5490 },
        { label: "500-749 Mitarbeiter", price: 6790 },
        { label: "750-999 Mitarbeiter", price: 7990 },
        { label: "> 1.000 Mitarbeiter", price: 9990 }
    ];

    const slider = document.getElementById("employeeSlider");
    const employeeOutput = document.getElementById("employeeOutput");
    const priceOutput = document.getElementById("priceOutput");
    const savingsBadge = document.getElementById("savingsBadge");

    // Formatierungshilfe für Euro
    const formatCurrency = (num) => {
        return num.toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + " €";
    };

    function updatePricing() {
        const index = parseInt(slider.value);
        const tier = pricingTiers[index];
        
        // 1. Text und Preis aktualisieren
        employeeOutput.innerText = tier.label;
        priceOutput.innerText = formatCurrency(tier.price);
        
        // 2. Break-Even Berechnung (Ab wann lohnt es sich?)
        // Formel: FlatratePreis / Einzelpreis, dann aufrunden
        // Beispiel: 1130 / 499 = 2.26 -> Lohnt sich ab der 3. Anzeige
        const breakEvenCount = Math.ceil(tier.price / singleAdPrice);
        
        // Nur anzeigen, wenn es Sinn macht (bei sehr hohen Preisen ggf. Text anpassen)
        if (breakEvenCount <= 1) {
             savingsBadge.innerText = "Lohnt sich sofort!";
             savingsBadge.style.backgroundColor = "#eef9e6"; // Grün
             savingsBadge.style.color = "#2e7d32";
        } else {
             savingsBadge.innerText = `Lohnt sich ab der ${breakEvenCount}. Anzeige!`;
             // Leichte farbliche Anpassung je nach Höhe, damit es nicht zu aggressiv wirkt
             if(breakEvenCount > 10) {
                 savingsBadge.style.backgroundColor = "#fff3e0"; // Orange-Ton für höhere Stufen
                 savingsBadge.style.color = "#e65100";
             } else {
                 savingsBadge.style.backgroundColor = "#eef9e6";
                 savingsBadge.style.color = "#2e7d32";
             }
        }

        // 3. Slider Background visuell füllen
        const percentage = (index / 10) * 100;
        // Wir passen den Gradient an, damit er links blau und rechts grau ist
        slider.style.background = `linear-gradient(to right, #009FE3 ${percentage}%, #cedae6 ${percentage}%)`;
    }

    // Event Listener
    slider.addEventListener("input", updatePricing);

    // Start-Initialisierung
    updatePricing();
</script>

</body>
</html>

DIES IST EIN TEST

Regionale Online-Flatrate