fix: billableaua — 'nicht nur ein Job'

Calculation now looks like an invoice with left-aligned labels and
right-aligned values. Verdict thresholds lowered: >8h lifestyle,
>6h warning, >4h "klingt machbar".

sites/billableaua.de/index.html

@@ -157,6 +157,91 @@
       font-weight: 300;
     }
 
+    /* Rechner */
+    .rechner {
+      padding: 120px 0;
+    }
+
+    .rechner h2 {
+      font-size: clamp(2.5rem, 7vw, 4rem);
+      font-weight: 900;
+      letter-spacing: -0.02em;
+      text-transform: uppercase;
+      margin-bottom: 48px;
+    }
+
+    .rechner h2 .dot { color: var(--red); }
+
+    .rechner-grid {
+      display: flex;
+      gap: 32px;
+      margin-bottom: 48px;
+    }
+
+    .rechner-input {
+      flex: 1;
+    }
+
+    .rechner-input label {
+      display: block;
+      font-size: 0.9rem;
+      color: var(--text-dim);
+      font-weight: 300;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      margin-bottom: 8px;
+    }
+
+    .rechner-input input {
+      width: 100%;
+      background: transparent;
+      border: 1px solid var(--text-muted);
+      color: var(--text);
+      font-family: inherit;
+      font-size: 2.4rem;
+      font-weight: 700;
+      padding: 12px 16px;
+      text-align: center;
+      outline: none;
+      transition: border-color 0.3s;
+      -moz-appearance: textfield;
+    }
+
+    .rechner-input input::-webkit-inner-spin-button,
+    .rechner-input input::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+    }
+
+    .rechner-input input:focus {
+      border-color: var(--red);
+    }
+
+    .rechner-result {
+      font-size: clamp(1.3rem, 3vw, 1.8rem);
+      font-weight: 300;
+      color: var(--text-dim);
+      line-height: 2;
+    }
+
+    .rechner-result .num {
+      color: var(--red);
+      font-weight: 700;
+      font-size: 1.15em;
+    }
+
+    .rechner-result .verdict {
+      display: block;
+      margin-top: 24px;
+      font-size: clamp(1.5rem, 4vw, 2.2rem);
+      font-weight: 600;
+      color: var(--text);
+    }
+
+    @media (max-width: 640px) {
+      .rechner { padding: 80px 0; }
+      .rechner-grid { flex-direction: column; gap: 24px; }
+    }
+
     /* Silence */
     .silence {
       padding: 160px 0;
@@ -171,6 +256,34 @@
       text-transform: uppercase;
     }
 
+    /* Rechnung */
+    .rechnung {
+      max-width: 400px;
+      margin: 0 auto;
+    }
+
+    .rechnung-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      font-size: clamp(1.1rem, 2.5vw, 1.5rem);
+      font-weight: 300;
+      color: var(--text-dim);
+      padding: 4px 0;
+    }
+
+    .rechnung-row .label { text-align: left; }
+    .rechnung-row .value { text-align: right; font-weight: 700; color: var(--red); }
+
+    .rechnung-divider {
+      border: none;
+      border-top: 1px solid var(--text-muted);
+      margin: 12px 0;
+    }
+
+    .rechnung-total .label { font-weight: 600; color: var(--text); }
+    .rechnung-total .value { font-size: 1.15em; }
+
     /* Footer */
     footer {
       padding: 40px 0;
@@ -217,8 +330,9 @@
   <section class="numbers">
     <div class="wrap">
       <p class="reveal">
-        <span class="num">2.400</span> Stunden pro Jahr.<br>
+        Eine Zahl bestimmt deinen Wert.<br>
-        <span class="num">6,5</span> Stunden pro Tag, die du &bdquo;verkaufst&ldquo;.<br>
+        Nicht dein Ergebnis. Nicht dein Wissen.<br>
+        <span class="num">Billable Hours</span> &mdash; der einzige KPI, der z&auml;hlt.<br>
         Jede Minute dokumentiert.<br>
         Jede Pause ein Verlust.
       </p>
@@ -230,26 +344,53 @@
   <section class="kritik">
     <div class="wrap">
 
-      <div class="kritik-item reveal">
-        <p>Du wirst nach Zeit bezahlt, <span class="dim">nicht nach Ergebnis.</span></p>
-      </div>
-
       <div class="kritik-item reveal">
         <p>Effizienz wird bestraft. <span class="dim">Wer schneller arbeitet, verdient weniger.</span></p>
       </div>
 
       <div class="kritik-item reveal">
-        <p>Der Mandant zahlt <span class="dim">für deine Lernkurve.</span></p>
+        <p>Ineffizienz wird belohnt. <span class="dim">L&auml;nger brauchen hei&szlig;t mehr verdienen.</span></p>
       </div>
 
       <div class="kritik-item reveal">
-        <p><span class="num">8</span> Stunden Arbeit = <span class="num">6,5</span> billable. <span class="dim">Die restlichen 1,5? Dein Problem.</span></p>
+        <p>Verkauft wird nur, was auf der Rechnung steht. <span class="dim">Der Rest deiner Arbeit existiert nicht.</span></p>
       </div>
 
       <div class="kritik-item reveal">
-        <p>Partnertrack heißt: <span class="dim"><span class="num">10</span> Jahre beweisen, dass du leidensfähig bist.</span></p>
+        <p>Und die anderen Stunden im B&uuml;ro? <span class="dim">Egal.</span></p>
       </div>
 
+      <div class="kritik-item reveal">
+        <p>Die besten Ideen kommen nicht, <span class="dim">w&auml;hrend die Stoppuhr l&auml;uft.</span></p>
+      </div>
+
+      <div class="kritik-item reveal">
+        <p>Ein Leben im Sechs-Minuten-Takt <span class="dim">macht etwas mit deinem Bewusstsein.</span></p>
+      </div>
+
+      <div class="kritik-item reveal">
+        <p>Innovation ist ein Risiko. <span class="dim">Jedes Tool, das Zeit spart, bedroht den Umsatz.</span></p>
+      </div>
+
+    </div>
+  </section>
+
+  <div class="line"></div>
+
+  <section class="rechner">
+    <div class="wrap">
+      <h2 class="reveal">Rechne selbst<span class="dot">.</span></h2>
+      <div class="rechner-grid reveal">
+        <div class="rechner-input">
+          <label>Billable-Stunden / Jahr</label>
+          <input type="number" id="hours" value="1800" min="0" max="5000">
+        </div>
+        <div class="rechner-input">
+          <label>Urlaubstage</label>
+          <input type="number" id="vacation" value="25" min="0" max="60">
+        </div>
+      </div>
+      <div class="rechner-result reveal" id="result"></div>
     </div>
   </section>
 
@@ -277,6 +418,60 @@
     }, { threshold: 0.15 });
 
     document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
+
+    // Rechner
+    function calculate() {
+      const hours = parseInt(document.getElementById('hours').value) || 0;
+      const vacation = parseInt(document.getElementById('vacation').value) || 0;
+      const weekends = 104;
+      const feiertage = 10;
+      const workingDays = 365 - weekends - vacation - feiertage;
+      const perDay = workingDays > 0 ? (hours / workingDays) : 0;
+      const perDayStr = perDay.toFixed(1).replace('.', ',');
+
+      let verdict = '';
+      if (perDay >= 7.96) {
+        verdict = '<span class="verdict">Das ist nicht nur ein Job. <span class="dim">Das ist ein Lifestyle.</span></span>';
+      } else if (perDay > 7) {
+        verdict = '<span class="verdict">Das ist die Theorie. <span class="dim">In der Praxis bist du l&auml;nger da.</span></span>';
+      } else if (perDay > 6) {
+        verdict = '<span class="verdict">Das sind nur die billable hours. <span class="dim">Dazu kommen Admin, Meetings, Mails &mdash; unbezahlt.</span></span>';
+      }
+
+      var r = function(l, v) {
+        return '<div class="rechnung-row"><span class="label">' + l + '</span><span class="value">' + v + '</span></div>';
+      };
+
+      document.getElementById('result').innerHTML =
+        '<div class="rechnung">' +
+        r('Tage im Jahr', '365') +
+        r('Wochenendtage (52 &times; 2)', '&minus; 104') +
+        r('Urlaubstage', '&minus; ' + vacation) +
+        r('Feiertage', '&minus; ' + feiertage) +
+        '<hr class="rechnung-divider">' +
+        '<div class="rechnung-row rechnung-total">' +
+        '<span class="label">Arbeitstage</span><span class="value">' + workingDays + '</span></div>' +
+        '</div><br>' +
+        '<span class="num">' + hours.toLocaleString('de-DE') + '</span> Stunden &divide; <span class="num">' + workingDays + '</span> Tage = ' +
+        '<span class="num">' + perDayStr + '</span> Stunden billable pro Tag.' +
+        verdict +
+        '<span class="verdict" style="margin-top:32px;font-size:0.85em;font-weight:300;color:var(--text-dim);display:block;">' +
+        (function() {
+          var base = hours / workingDays * 60;
+          var d1 = workingDays > 1 ? Math.round(hours / (workingDays - 1) * 60 - base) : 0;
+          var d2 = workingDays > 2 ? Math.round(hours / (workingDays - 2) * 60 - base) : 0;
+          var d5 = workingDays > 5 ? Math.round(hours / (workingDays - 5) * 60 - base) : 0;
+          return 'Ein Tag krank? +<span class="num">' + d1 + '</span> Minuten mehr an jedem anderen Tag. Jeden.' +
+            ' Zwei Tage? +<span class="num">' + d2 + '</span>.' +
+            ' Eine Woche? +<span class="num">' + d5 + '</span>.' +
+            '<br>Jeder verpasste Tag erh&ouml;ht den Druck auf alle anderen.';
+        })() +
+        '</span>';
+    }
+
+    document.getElementById('hours').addEventListener('input', calculate);
+    document.getElementById('vacation').addEventListener('input', calculate);
+    calculate();
   </script>
 
 </body>