Release v0.41.1 Versionsanzeige als Footer

style.css

@@ -12,7 +12,7 @@ body {
 }
 
 .app {
-  width: min(1120px, calc(100% - 32px));
+  width: min(1180px, calc(100% - 32px));
   margin: 0 auto;
   padding: 40px 0;
 }
@@ -40,20 +40,45 @@ h1 {
 }
 
 .intro {
-  max-width: 700px;
+  max-width: 760px;
   color: #566277;
   line-height: 1.6;
 }
 
-.settings {
+.settings,
+.card,
+.results {
   background: white;
   border: 1px solid #dde5f2;
+  box-shadow: 0 12px 30px rgba(29, 45, 68, .08);
+}
+
+.version-card {
+  border-radius: 18px;
+  padding: 14px 18px;
+  min-width: 130px;
+  text-align: center;
+}
+
+.version-card span {
+  display: block;
+  color: #566277;
+  font-size: .82rem;
+}
+
+.version-card strong {
+  display: block;
+  margin-top: 4px;
+  font-size: 1.25rem;
+}
+
+.settings {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(220px, 1fr));
+  gap: 16px;
   border-radius: 18px;
   padding: 16px;
-  min-width: 280px;
-  display: grid;
-  gap: 14px;
-  box-shadow: 0 12px 30px rgba(29, 45, 68, .08);
+  margin-bottom: 24px;
 }
 
 .settings label {
@@ -70,11 +95,7 @@ h1 {
   padding: 10px 12px;
   font: inherit;
   color: #172033;
-}
-
-.settings small {
-  color: #566277;
-  line-height: 1.4;
+  background: white;
 }
 
 .drop-zone {
@@ -90,8 +111,8 @@ h1 {
 }
 
 .drop-zone.dragover {
-  border-color: #2f6fed;
-  background: #eef4ff;
+  border-color: #2f6feb;
+  background: #edf4ff;
 }
 
 .drop-zone input {
@@ -113,6 +134,22 @@ h1 {
   font-size: 1.25rem;
 }
 
+.error {
+  margin-top: 18px;
+  padding: 14px 16px;
+  border-radius: 14px;
+  background: #fff1f2;
+  color: #be123c;
+  border: 1px solid #fecdd3;
+}
+
+.hidden { display: none !important; }
+
+.format-hint {
+  color: #566277;
+  min-height: 22px;
+}
+
 .summary {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
@@ -121,35 +158,26 @@ h1 {
 }
 
 .card {
-  background: white;
-  border: 1px solid #dde5f2;
-  border-radius: 20px;
-  padding: 20px;
-  box-shadow: 0 12px 30px rgba(29, 45, 68, .08);
+  border-radius: 18px;
+  padding: 18px;
 }
 
 .card span {
   display: block;
   color: #566277;
-  font-size: .9rem;
   margin-bottom: 8px;
 }
 
 .card strong {
-  display: block;
   font-size: 1.8rem;
 }
 
-.positive { color: #137333; }
-.negative { color: #b3261e; }
-.neutral { color: #172033; }
+.saldo-card strong.positive { color: #15803d; }
+.saldo-card strong.negative { color: #b91c1c; }
 
 .results {
-  background: white;
-  border: 1px solid #dde5f2;
   border-radius: 24px;
-  padding: 24px;
-  box-shadow: 0 12px 30px rgba(29, 45, 68, .08);
+  padding: 22px;
 }
 
 .table-header {
@@ -160,18 +188,22 @@ h1 {
   margin-bottom: 16px;
 }
 
-.table-header h2 { margin: 0; }
+.table-header h2 {
+  margin: 0;
+}
 
 button {
-  border: 0;
+  border: none;
   border-radius: 12px;
+  padding: 10px 14px;
   background: #172033;
   color: white;
-  padding: 10px 14px;
   font: inherit;
   cursor: pointer;
 }
 
+button:hover { opacity: .9; }
+
 .table-wrap {
   overflow-x: auto;
 }
@@ -179,55 +211,79 @@ button {
 table {
   width: 100%;
   border-collapse: collapse;
-  min-width: 680px;
+  font-size: .95rem;
 }
 
-th, td {
+th,
+td {
   padding: 12px 10px;
-  border-bottom: 1px solid #e6edf7;
+  border-bottom: 1px solid #e5eaf3;
   text-align: left;
   white-space: nowrap;
 }
 
 th {
   color: #566277;
-  font-size: .85rem;
-  text-transform: uppercase;
-  letter-spacing: .04em;
+  font-weight: 700;
+  background: #f8fafc;
 }
 
+tr.holiday-row td {
+  background: #fff7ed;
+}
+
+tr.weekend-row td {
+  background: #f8fafc;
+}
+
+.positive { color: #15803d; font-weight: 700; }
+.negative { color: #b91c1c; font-weight: 700; }
+.neutral { color: #566277; font-weight: 700; }
+
 .details {
-  margin-top: 24px;
+  margin-top: 20px;
 }
 
 .details summary {
   cursor: pointer;
   font-weight: 700;
-  margin-bottom: 16px;
+  margin-bottom: 14px;
 }
 
-.error {
-  margin-top: 16px;
-  padding: 14px 16px;
-  border-radius: 14px;
-  background: #fff1f0;
-  border: 1px solid #ffccc7;
-  color: #8a1f11;
+
+.app-footer {
+  position: fixed;
+  right: 16px;
+  bottom: 10px;
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  font-size: 12px;
+  color: #6b7280;
+  background: rgba(255, 255, 255, .85);
+  border: 1px solid #e5eaf3;
+  border-radius: 999px;
+  padding: 5px 10px;
+  box-shadow: 0 6px 18px rgba(29, 45, 68, .08);
+  backdrop-filter: blur(6px);
 }
 
-.hidden { display: none; }
+.app-footer a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.app-footer a:hover {
+  text-decoration: underline;
+}
 
 @media (max-width: 820px) {
-  .hero { display: grid; align-items: start; }
+  .hero { align-items: start; flex-direction: column; }
+  .settings { grid-template-columns: 1fr; }
   .summary { grid-template-columns: 1fr 1fr; }
 }
 
-@media (max-width: 520px) {
+@media (max-width: 540px) {
   .summary { grid-template-columns: 1fr; }
-}
-
-.hint {
-  color: #566277;
-  margin: 16px 0 0;
-  font-size: .95rem;
+  .app-footer { right: 8px; bottom: 8px; font-size: 11px; }
 }