refactor: billableaua — invoice-style layout, lower thresholds

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

@@ -256,6 +256,33 @@
       text-transform: uppercase;
     }
 
+    /* Rechnung */
+    .rechnung {
+      max-width: 400px;
+    }
+
+    .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;
@@ -402,21 +429,28 @@
       const perDayStr = perDay.toFixed(1).replace('.', ',');
 
       let verdict = '';
-      if (perDay > 10) {
+      if (perDay > 8) {
         verdict = '<span class="verdict">Das ist kein Job. <span class="dim">Das ist ein Lifestyle.</span></span>';
-      } else if (perDay > 8) {
-        verdict = '<span class="verdict">Jeden Tag &uuml;ber <span class="num">8</span> Stunden billable. <span class="dim">Ohne Mittagspause, ohne Admin.</span></span>';
       } else if (perDay > 6) {
+        verdict = '<span class="verdict">Jeden Tag &uuml;ber <span class="num">6</span> Stunden billable. <span class="dim">Und der Rest ist unbezahlte Arbeit.</span></span>';
+      } else if (perDay > 4) {
         verdict = '<span class="verdict">Klingt machbar? <span class="dim">Vergiss nicht: billable &ne; Arbeitszeit.</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 =
-        '<span class="num">365</span> Tage im Jahr<br>' +
+        '<div class="rechnung">' +
-        '&minus; <span class="num">52</span> &times; 2 = <span class="num">104</span> Wochenendtage<br>' +
+        r('Tage im Jahr', '365') +
-        '&minus; <span class="num">' + vacation + '</span> Urlaubstage<br>' +
+        r('Wochenendtage (52 &times; 2)', '&minus; 104') +
-        '&minus; <span class="num">' + feiertage + '</span> Feiertage<br>' +
+        r('Urlaubstage', '&minus; ' + vacation) +
-        '<span style="display:inline-block;width:160px;border-top:1px solid var(--text-muted);margin:12px 0;"></span><br>' +
+        r('Feiertage', '&minus; ' + feiertage) +
-        '= <span class="num">' + workingDays + '</span> Arbeitstage<br><br>' +
+        '<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 +