:root {
      --bg: #eef3f8;
      --card: #ffffff;
      --card-soft: #f8fafc;
      --text: #0f172a;
      --muted: #64748b;
      --line: #dbe4ee;
      --primary: #2563eb;
      --primary-dark: #1d4ed8;
      --green: #16a34a;
      --amber: #f59e0b;
      --red: #dc2626;
      --dark: #0f172a;
      --shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
      --radius: 18px;
      --safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    * { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; }
    body {
      margin: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
      padding-bottom: calc(88px + var(--safe-bottom));
    }

    button, input, textarea, select { font: inherit; }
    button { cursor: pointer; }

    .app-header {
      position: sticky;
      top: 0;
      z-index: 30;
      background: rgba(15, 23, 42, 0.96);
      color: white;
      backdrop-filter: blur(10px);
      box-shadow: 0 4px 18px rgba(15, 23, 42, 0.18);
    }

    .header-inner {
      max-width: 980px;
      margin: 0 auto;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .brand {
      min-width: 0;
    }

    .brand h1 {
      margin: 0;
      font-size: 1.12rem;
      letter-spacing: -0.02em;
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
    }

    .brand small {
      display: block;
      margin-top: 2px;
      color: rgba(255,255,255,0.68);
      font-size: 0.75rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .top-actions {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .back-link {
      color: rgba(255,255,255,0.82);
      text-decoration: none;
      border: 1px solid rgba(255,255,255,0.18);
      padding: 7px 10px;
      border-radius: 999px;
      font-size: 0.8rem;
      white-space: nowrap;
    }

    .back-link:hover { background: rgba(255,255,255,0.08); }

    .wrap {
      max-width: 980px;
      margin: 0 auto;
      padding: 14px;
    }

    .card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 16px;
      margin-bottom: 14px;
    }

    .hero {
      background: linear-gradient(135deg, #ffffff, #eef6ff);
      border-color: #cfe2ff;
      overflow: hidden;
      position: relative;
    }

    .hero:after {
      content: "";
      position: absolute;
      width: 180px;
      height: 180px;
      right: -70px;
      top: -90px;
      border-radius: 999px;
      background: rgba(37, 99, 235, 0.10);
      pointer-events: none;
    }

    .month-row {
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 14px;
      position: relative;
      z-index: 1;
    }

    .month-title {
      min-width: 0;
    }

    .month-title h2 {
      margin: 0;
      font-size: 1.35rem;
      letter-spacing: -0.03em;
    }

    .month-title p {
      margin: 3px 0 0;
      color: var(--muted);
      font-size: 0.9rem;
    }

    .month-picker {
      min-width: 160px;
      width: auto;
      background: white;
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      position: relative;
      z-index: 1;
    }

    .stat {
      background: rgba(255,255,255,0.82);
      border: 1px solid #dbeafe;
      border-radius: 14px;
      padding: 12px;
    }

    .stat label {
      display: block;
      color: var(--primary-dark);
      font-size: 0.72rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 4px;
    }

    .stat strong {
      font-size: 1.25rem;
      letter-spacing: -0.02em;
    }

    .quick-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 14px;
      position: relative;
      z-index: 1;
    }

    .btn {
      border: 0;
      border-radius: 12px;
      padding: 12px 14px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      transition: transform 0.08s ease, background 0.18s ease, box-shadow 0.18s ease;
      text-decoration: none;
    }

    .btn:active { transform: translateY(1px); }
    .btn-primary { background: var(--primary); color: white; box-shadow: 0 8px 18px rgba(37,99,235,0.22); }
    .btn-primary:hover { background: var(--primary-dark); }
    .btn-green { background: var(--green); color: white; }
    .btn-dark { background: var(--dark); color: white; }
    .btn-light { background: #fff; border: 1px solid var(--line); color: var(--text); }
    .btn-red { background: var(--red); color: white; }
    .btn-amber { background: var(--amber); color: white; }
    .btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
    .btn-small { padding: 8px 10px; min-height: 36px; border-radius: 10px; font-size: 0.86rem; }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .full { grid-column: 1 / -1; }

    .field label {
      display: block;
      margin-bottom: 5px;
      color: var(--muted);
      font-weight: 800;
      font-size: 0.83rem;
    }

    .field input, .field textarea, .field select {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px;
      background: #f8fafc;
      color: var(--text);
      outline: none;
      min-height: 44px;
    }

    .field textarea { min-height: 74px; resize: vertical; }
    .field input:focus, .field textarea:focus, .field select:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
      background: #fff;
    }

    .form-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 12px;
    }

    .section-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }

    .section-title h2, .section-title h3 {
      margin: 0;
      font-size: 1.05rem;
      letter-spacing: -0.02em;
    }

    .muted { color: var(--muted); }
    .tiny { font-size: 0.82rem; }

    .entry-list {
      display: grid;
      gap: 10px;
    }

    .entry {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 13px;
      box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
    }

    .entry-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }

    .entry-date {
      font-weight: 900;
      font-size: 1rem;
    }

    .entry-time {
      color: var(--muted);
      margin-top: 3px;
      font-size: 0.92rem;
    }

    .entry-duration {
      color: var(--primary);
      font-weight: 950;
      font-size: 1.15rem;
      white-space: nowrap;
    }

    .entry-note {
      margin-top: 8px;
      display: inline-block;
      background: #fff7ed;
      color: #9a3412;
      border: 1px solid #fed7aa;
      border-radius: 999px;
      padding: 3px 8px;
      font-size: 0.82rem;
    }

    .entry-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      margin-top: 10px;
    }

    .empty {
      text-align: center;
      color: var(--muted);
      padding: 34px 14px;
      border: 1px dashed #cbd5e1;
      border-radius: 16px;
      background: rgba(255,255,255,0.7);
    }

    .desktop-table-wrap {
      overflow-x: auto;
      border-radius: 14px;
      border: 1px solid var(--line);
      display: none;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      background: white;
      min-width: 720px;
    }

    th, td {
      padding: 11px 10px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      vertical-align: top;
    }

    th {
      background: #f8fafc;
      color: var(--muted);
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    td.num, th.num { text-align: right; }
    .sum-row td { font-weight: 900; background: #f1f5f9; }

    .tools-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }

    .notice {
      padding: 12px;
      border-radius: 14px;
      background: #eef2ff;
      border: 1px solid #c7d2fe;
      color: #3730a3;
      font-size: 0.9rem;
      margin-top: 12px;
    }

    .check-row {
      display: flex;
      align-items: center;
      gap: 10px;
      background: #f8fafc;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px;
      font-weight: 850;
      color: var(--text);
      min-height: 46px;
    }

    .check-row input {
      width: 20px;
      height: 20px;
      accent-color: var(--primary);
    }

    .footer-links {
      text-align: center;
      margin: 28px 0 8px;
      color: var(--muted);
      font-size: 0.85rem;
    }

    .footer-links a { color: var(--muted); text-decoration: none; margin: 0 6px; }
    .footer-links a:hover { text-decoration: underline; }

    .bottom-bar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 40;
      background: rgba(255,255,255,0.94);
      border-top: 1px solid var(--line);
      backdrop-filter: blur(10px);
      padding: 10px 14px calc(10px + var(--safe-bottom));
    }

    .bottom-inner {
      max-width: 980px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 10px;
    }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 80;
      background: rgba(15, 23, 42, 0.58);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 14px;
      backdrop-filter: blur(5px);
    }

    .modal {
      width: min(560px, 100%);
      background: white;
      border-radius: 22px;
      padding: 18px;
      box-shadow: 0 20px 60px rgba(15, 23, 42, 0.30);
      max-height: 92vh;
      overflow: auto;
    }

    .modal-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }

    .modal-head h2 { margin: 0; font-size: 1.18rem; }
    .hidden { display: none !important; }
    .print-only { display: none; }

    .print-page { display: none; }

    @media (min-width: 760px) {
      body { padding-bottom: 20px; }
      .bottom-bar { display: none; }
      .wrap { padding: 20px; }
      .stats { grid-template-columns: repeat(4, 1fr); }
      .desktop-table-wrap { display: block; }
      .entry-list { display: none; }
      .modal-backdrop { align-items: center; }
      .quick-row { grid-template-columns: repeat(4, 1fr); }
      .tools-grid { grid-template-columns: repeat(4, 1fr); }
    }

    @media (max-width: 520px) {
      .back-link { padding: 7px 8px; font-size: 0.76rem; }
      .brand small { max-width: 190px; }
      .stats { grid-template-columns: 1fr 1fr; }
      .quick-row, .form-grid, .form-actions, .tools-grid { grid-template-columns: 1fr; }
      .month-picker { width: 100%; }
      .month-row { align-items: stretch; }
      .stat strong { font-size: 1.12rem; }
    }

    @media print {
      @page { size: A4 portrait; margin: 12mm; }
      html, body { background: #fff !important; color: #000; padding: 0; }
      .no-print, .app-header, .wrap, .bottom-bar, .modal-backdrop { display: none !important; }
      .print-only, .print-page { display: block !important; }
      .print-page {
        font-family: Arial, sans-serif;
        font-size: 10.5pt;
        color: #000;
      }
      .print-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 20px;
        border-bottom: 2px solid #000;
        padding-bottom: 8px;
        margin-bottom: 12px;
      }
      .print-header h1 { margin: 0; font-size: 18pt; }
      .print-header p { margin: 4px 0 0; }
      .print-meta {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin: 12px 0;
      }
      .print-meta div {
        border: 1px solid #000;
        padding: 6px;
        min-height: 34px;
      }
      .print-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
        font-size: 9.5pt;
      }
      .print-table th, .print-table td {
        border: 1px solid #000;
        padding: 5px;
      }
      .print-table th { background: #eee !important; }
      .print-table .num { text-align: right; }
      .print-sum td { font-weight: bold; background: #eee !important; }
      .signature-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 28px;
        margin-top: 42px;
        break-inside: avoid;
      }
      .signature-line {
        border-top: 1px solid #000;
        padding-top: 6px;
        min-height: 34px;
      }
      .print-note {
        margin-top: 18px;
        font-size: 8.5pt;
        color: #444;
        text-align: center;
      }
      tr { break-inside: avoid; }
      thead { display: table-header-group; }
    }

/* Helle Warenschmiede-Werkzeugoberfläche */
body { overflow-x: hidden; }
.app-header { background: rgba(255,255,255,.96); color: var(--text); border-bottom: 1px solid var(--line); box-shadow: 0 4px 18px rgba(15,23,42,.08); }
.header-inner, .wrap { max-width: 1120px; }
.header-inner { min-height: 76px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand h1 { white-space:normal; }
.brand small { color:var(--muted); }
.web-version { font-size:.68rem; color:var(--muted); font-weight:700; margin-left:.4rem; }
.brand .ws-tool-identity-icon { flex:0 0 auto; }
.ws-tool-menu-btn { margin-left:auto; }
.menu-icon { font-size:1.15rem; }
.hero { border-top:3px solid #f59e0b; }
.local-data-notice { display:flex; gap:.4rem 1rem; flex-wrap:wrap; align-items:center; background:#eff6ff; box-shadow:none; }
.local-data-notice span { color:var(--muted); }
.time-settings-dialog { width:min(860px,calc(100vw - 32px)); max-height:min(820px,calc(100dvh - 32px)); min-height:min(620px,calc(100dvh - 32px)); display:flex; flex-direction:column; overflow:hidden; background:#fff; border-radius:20px; box-shadow:0 24px 70px rgba(15,23,42,.25); }
.time-settings-head { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; padding:22px 24px 16px; border-bottom:1px solid var(--line); }
.time-settings-head h2,.time-settings-head p { margin:0; }
.time-settings-head p { color:var(--muted); font-size:.85rem; margin-top:.25rem; }
.time-settings-content { padding:22px 24px; overflow-y:auto; flex:1; }
.time-settings-actions { display:flex; gap:10px; padding:16px 24px; border-top:1px solid var(--line); background:#f8fafc; }
.time-toast { position:fixed; left:50%; bottom:calc(92px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:#0f172a; color:#fff; padding:10px 14px; border-radius:999px; z-index:200; box-shadow:0 12px 30px rgba(0,0,0,.22); font-weight:800; font-size:.88rem; }
@media (max-width:600px) { .header-inner { min-height:66px; } .brand small { white-space:normal; line-height:1.25; } .web-version,.menu-label { display:none; } .ws-tool-menu-btn { min-width:44px; padding:9px; } .time-settings-dialog { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); min-height:calc(100dvh - 16px); } .time-settings-head,.time-settings-content,.time-settings-actions { padding-left:16px; padding-right:16px; } .time-settings-actions { flex-wrap:wrap; } }
@media print { .time-toast { display:none!important; } }

.empty-month-notice { margin:0 0 14px; padding:14px; border:1px solid #bfdbfe; border-radius:14px; background:#eff6ff; color:#1e3a8a; }
.empty-month-notice p { margin:0 0 10px; }
.week-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.week-item { display:grid; gap:5px; padding:13px; border:1px solid var(--line); border-radius:14px; background:var(--card-soft); }
.week-item span { color:var(--muted); }
.settings-tabs { display:flex; overflow-x:auto; gap:6px; padding:10px 24px; border-bottom:1px solid var(--line); scrollbar-width:thin; }
.settings-tabs button { flex:0 0 auto; min-height:44px; padding:8px 12px; border:0; border-radius:10px; background:transparent; color:var(--muted); font-weight:800; }
.settings-tabs button[aria-selected="true"] { background:#dbeafe; color:var(--primary-dark); }
.settings-tabs button:focus-visible { outline:3px solid rgba(37,99,235,.35); outline-offset:2px; }
.settings-section h3 { margin:0 0 6px; font-size:1.2rem; }
.settings-section > .check-row { margin-top:10px; }
.section-actions,.settings-action-grid,.settings-link-list { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.settings-action-grid,.settings-link-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.weekly-target-field { margin-top:12px; max-width:320px; }
.weekly-target-field.is-disabled { opacity:.55; }
body.time-compact .card { padding:11px; margin-bottom:9px; }
body.time-compact .stat,body.time-compact .entry { padding:9px; }
body.time-compact th,body.time-compact td { padding:7px 8px; }
body.time-large-text { font-size:1.08rem; }
body.time-large-text .stat strong { font-size:1.4rem; }
body.time-large-text .entry-date,body.time-large-text .entry-duration { font-size:1.22rem; }
body.time-large-text .btn { min-height:48px; }
@media (max-width:600px) { .settings-tabs { padding-left:16px; padding-right:16px; } .week-grid,.settings-action-grid,.settings-link-list { grid-template-columns:1fr; } .section-actions { flex-direction:column; } }
@media print { .week-overview,.empty-month-notice,.settings-tabs { display:none!important; } }

/* Direkter, gespeicherter Ansichtswechsel */
.entry-section-title > div:first-child { min-width:0; }
.entry-section-title #entryHint { display:block; margin-top:2px; }
.entry-view-switch { display:inline-flex; flex:0 0 auto; padding:3px; border:1px solid #bfdbfe; border-radius:12px; background:#f8fafc; }
.entry-view-switch button { min-height:40px; padding:7px 12px; border:0; border-radius:9px; background:transparent; color:var(--muted); font-weight:800; }
.entry-view-switch button span { visibility:hidden; display:inline-block; width:1em; }
.entry-view-switch button[aria-pressed="true"] { background:#dbeafe; color:#1e3a8a; box-shadow:0 1px 3px rgba(15,23,42,.12); }
.entry-view-switch button[aria-pressed="true"] span { visibility:visible; }
.entry-view-switch button:focus-visible { outline:3px solid rgba(37,99,235,.38); outline-offset:2px; }

/* Die Eintragsflächen machen den Unterschied deutlich, ohne Inhalte auszublenden. */
body.time-compact .entry-list { gap:6px; }
body.time-compact .entry { padding:7px 9px; border-radius:11px; box-shadow:none; }
body.time-compact .entry-head { align-items:center; }
body.time-compact .entry-date { font-size:.9rem; }
body.time-compact .entry-time { margin-top:1px; font-size:.79rem; }
body.time-compact .entry-duration { font-size:1rem; }
body.time-compact .entry-note { margin-top:3px; padding:0; border:0; border-radius:0; background:transparent; color:var(--muted); font-size:.78rem; }
body.time-compact .entry-actions { gap:4px; margin-top:3px; }
body.time-compact .entry-actions .btn { min-height:40px; padding:5px 9px; font-size:.78rem; }
body.time-compact .desktop-table-wrap table { font-size:.88rem; }
body.time-compact .desktop-table-wrap th,
body.time-compact .desktop-table-wrap td { padding:5px 7px; line-height:1.25; }
body.time-compact .desktop-table-wrap .btn { min-height:32px; padding:4px 7px; font-size:.76rem; }

@media (max-width:520px) {
  .entry-section-title { align-items:stretch; flex-direction:column; }
  .entry-view-switch { width:100%; }
  .entry-view-switch button { flex:1 1 50%; }
}

@media print {
  .print-header { align-items:center; gap:8mm; border-bottom:1.2pt solid #2563eb; padding-bottom:3mm; margin-bottom:4mm; position:relative; }
  .print-header::after { content:""; position:absolute; left:0; bottom:-1.2pt; width:24mm; border-bottom:1.2pt solid #f59e0b; }
  .print-brand { display:flex; align-items:center; gap:4mm; min-width:0; }
  .print-brand img { width:16mm; height:16mm; object-fit:contain; flex:0 0 16mm; }
  .print-header h1 { font-size:17pt; line-height:1.1; }
  .print-header p { color:#334155; }
  .print-header > div:last-child { font-size:8.5pt; line-height:1.45; white-space:nowrap; }
  .print-meta { grid-template-columns:minmax(0,1.45fr) minmax(0,1.45fr) minmax(23mm,.6fr) minmax(25mm,.7fr); gap:2mm; margin:4mm 0; }
  .print-meta div { min-width:0; min-height:14mm; padding:2.2mm; border:.5pt solid #cbd5e1; overflow-wrap:anywhere; }
  .print-meta strong { color:#475569; font-size:7.3pt; text-transform:uppercase; letter-spacing:.035em; }
  .print-meta div:nth-child(3) strong,
  .print-meta div:nth-child(4) strong { white-space:nowrap; }
  .print-meta span { display:inline-block; margin-top:1.2mm; font-weight:700; font-size:10pt; }
  body.time-compact .print-table, body.time-large-text .print-table, .print-table { table-layout:fixed; margin-top:3mm; font-size:9pt; }
  body.time-compact .print-table th, body.time-compact .print-table td,
  body.time-large-text .print-table th, body.time-large-text .print-table td,
  .print-table th, .print-table td { padding:1.6mm 1.4mm; border:.5pt solid #94a3b8; line-height:1.25; overflow-wrap:anywhere; }
  .print-table th { background:#eef4f8 !important; color:#1e293b; }
  .print-table th:nth-child(1) { width:23%; }
  .print-table th:nth-child(2), .print-table th:nth-child(3) { width:10.5%; }
  .print-table th:nth-child(4) { width:12.5%; }
  .print-table th:nth-child(5) { width:14.5%; }
  .print-table th:nth-child(6) { width:29%; }
  .print-sum td { border-top:1.2pt solid #475569; background:#f1f5f9 !important; }
  .signature-row { gap:16mm; margin-top:11mm; break-inside:avoid-page; page-break-inside:avoid; }
  .signature-line { min-height:11mm; padding-top:2mm; font-size:8.5pt; }
  .print-note { margin:8mm 0 0; color:#64748b; font-size:7.5pt; line-height:1.35; }
  .print-table tr { break-inside:avoid-page; page-break-inside:avoid; }
}