/* UI Update 2 — Desktop. Alles hier gilt NUR ab 701 px Breite und legt sich
   über style.css; das Handy (handy.css, ≤ 700 px) bleibt unangetastet.
   Leitidee: der PC ist das Verwaltungswerkzeug — Seitenleiste links wie bei
   Expensify/Concur/Circula, helle Arbeitsfläche in den Farben des
   Handy-Entwurfs (Beige-Karten, schwarze Schrift, Gold nur als Akzent).

   Größen gleiten statt zu springen (Entscheidung MH 09.09.2026, „jeder hat
   andere Größen"): die Grundschrift wächst mit der Fensterbreite zwischen
   15 und 17 px (clamp), alle Maße hängen in rem daran; Leistenbreite,
   Inhaltsbreite und Ränder sind Anteile der Fläche mit Unter-/Obergrenze;
   Raster teilen sich per Container-Abfrage nach dem tatsächlich
   verfügbaren Platz ein (1, 2 oder 3 Spalten), Tabellen rollen in ihrer
   Karte. Die einzige harte Grenze bleibt Handy ↔ PC (700 px).
   Kein JavaScript, keine Inline-Styles (CSP). */
@media (min-width: 701px) {
  :root {
    --d-gold: #d6aa4e;        /* Hauptknopf, aktiver Eintrag */
    --d-gold-dunkel: #c2963d; /* Hover */
    --d-gold-hell: #f0dfae;   /* Chips, Markierungen */
    --d-beige: #f4f1ea;       /* Karten */
    --d-linie: #e6e0d2;       /* Trennlinien auf Beige */
    --d-flaeche: #fbfaf7;     /* Seitenhintergrund */
    --d-schwarz: #111111;
    --d-grau: #6b6355;
    --d-gelb: #f7d84a;
    --d-gruen: #39c04f;
    --d-rot: #e8342f;
    /* Gleitende Maße: 1024 px → 15 px Schrift, 1920 px → 17 px, dazwischen linear */
    --d-leiste: clamp(14rem, 12vw, 17.5rem);
    --d-inhalt: clamp(56rem, 78vw, 100rem);
    --d-rand: clamp(1.2rem, 2.5vw, 3rem);
  }
  html { font-size: clamp(15px, 12.7px + 0.223vw, 17px); }
  body { background: var(--d-flaeche); color: var(--d-schwarz); font-size: 1rem; line-height: 1.45; }
  body.angemeldet { display: grid; grid-template-columns: var(--d-leiste) minmax(0, 1fr); min-height: 100vh; }
  body.angemeldet .topbar { display: none; }     /* die Seitenleiste übernimmt */
  .inhalt { min-width: 0; }
  a { color: var(--d-schwarz); text-decoration: underline; text-decoration-color: rgba(17, 17, 17, .3); text-underline-offset: 2px; }
  a:hover { text-decoration-color: var(--d-gold-dunkel); }
  h2, h3 { color: var(--d-schwarz); }
  .muted { color: var(--d-grau); }
  .small { font-size: .82rem; }
  .flash { font-size: .93rem; }

  /* --- Seitenleiste --- */
  .seitenleiste { background: var(--nacht); color: #d9d3c3; position: sticky; top: 0;
                  height: 100vh; display: flex; flex-direction: column;
                  padding: 1.1rem .9rem 1rem; box-sizing: border-box; }
  .leiste-logo { display: block; padding: .2rem .5rem .9rem; text-decoration: none; }
  .leiste-logo img { height: 3rem; display: block; }
  .leiste-logo .brand-text { font-size: 1.9rem; }
  .leiste-hochladen { display: flex; align-items: center; justify-content: center; gap: .55rem;
                  margin: .3rem 0 1rem; padding: .6rem .9rem; border-radius: 999px;
                  background: var(--d-gold); color: var(--d-schwarz); font-weight: 700;
                  font-size: .95rem; text-decoration: none; border: 2px solid var(--d-gold); }
  .leiste-hochladen:hover { background: var(--d-gold-dunkel); border-color: var(--d-gold-dunkel); }
  .leiste-hochladen.aktiv { background: transparent; color: var(--d-gold-hell); border-color: var(--d-gold); }
  .leiste-nav, .leiste-fuss { display: flex; flex-direction: column; gap: .15rem; }
  .leiste-nav a, .leiste-fuss a, .leiste-abmelden {
                  display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem;
                  border-radius: 8px; color: #d9d3c3; font-size: 1rem; text-decoration: none;
                  background: none; border: 0; width: 100%; text-align: left; font: inherit;
                  cursor: pointer; }
  .leiste-nav a:hover, .leiste-fuss a:hover, .leiste-abmelden:hover {
                  background: rgba(255, 255, 255, .06); color: #fff; }
  .leiste-nav a.aktiv, .leiste-fuss a.aktiv { background: rgba(201, 165, 87, .16);
                  color: var(--gold-hell); font-weight: 600;
                  box-shadow: inset 3px 0 0 var(--d-gold); }
  .symbol { width: 1.3rem; height: 1.3rem; flex: 0 0 1.3rem; opacity: .9; }
  .leiste-fuss { margin-top: auto; padding-top: .8rem; border-top: 1px solid rgba(255, 255, 255, .1); }
  .leiste-user { display: flex; flex-direction: column; padding: .6rem .75rem .3rem; line-height: 1.25; }
  .leiste-name { color: #fff; font-weight: 600; font-size: .93rem; }
  .leiste-rolle { color: #8f8874; font-size: .8rem; }
  .leiste-fuss form { margin: 0; }
  .leiste-abmelden { font-size: .93rem; color: #b8b09c; }

  /* --- Seitenkopf und Inhalt: mittig in der Fläche neben der Leiste, Breite
     als Anteil der Fläche (nichts klebt links, nichts wird endlos breit) --- */
  .seitenkopf { padding: 1.5rem var(--d-rand) 0; max-width: var(--d-inhalt); margin: 0 auto; box-sizing: content-box; }
  .seitenkopf h1 { display: flex; align-items: center; gap: .7rem; margin: 0;
                   font-size: 1.75rem; font-weight: 700; letter-spacing: -.01em; }
  .seitenkopf .zurueck { display: inline-flex; width: 2rem; height: 2rem; border-radius: 50%;
                   background: var(--d-schwarz); color: #fff; align-items: center;
                   justify-content: center; font-size: 1.05rem; text-decoration: none; flex: 0 0 2rem; }
  .seitenkopf .zurueck:hover { background: var(--d-gold-dunkel); }
  body.angemeldet main { padding: 1.1rem var(--d-rand) 3rem; max-width: var(--d-inhalt); margin: 0 auto;
                         box-sizing: content-box; container-type: inline-size; }
  .section-title { font-size: 1.2rem; font-weight: 700; margin: 1.4rem .1rem .6rem; }

  /* --- Karten --- */
  .card { background: var(--d-beige); border: 0; border-radius: 10px; padding: 1.1rem 1.25rem;
          margin-bottom: 1rem; }
  .card:has(> table.data) { overflow-x: auto; }   /* breite Tabellen rollen in der Karte */
  .card.grand { border: 2px solid var(--d-gold); background: #fff; }
  .card.narrow-wide { margin: 0 auto 1rem; max-width: 58rem; }
  .tabs.upload-tabs { display: flex; width: max-content; margin: 0 auto 1rem; }
  .card h2, .card h3 { font-size: 1.05rem; margin: 0 0 .7rem; }
  .reise-title, details.reise-group > summary { font-size: 1.05rem; }
  .reise-karte.laeuft { background: #fbf6e9; border: 1.5px solid var(--d-gold); }
  a.card.reise-karte:hover { background: #fff; border-color: var(--d-gold); }
  .reise-name { font-size: 1.13rem; }
  .punkt { background: var(--d-gruen); }

  /* --- Chips und Status (Gelb / Grün / Rot wie am Handy) --- */
  .chip { border: 1.2px solid var(--d-schwarz); color: var(--d-schwarz); background: #fff;
          font-size: .8rem; padding: .1rem .55rem; font-weight: 500; }
  .chip.chip-eingereicht { background: var(--d-gelb); border-color: var(--d-gelb); font-weight: 700; }
  .chip.chip-abzurechnen { background: #e5e5e5; border-color: #e5e5e5; font-weight: 600; }
  .status { font-size: .8rem; font-weight: 600; padding: .15rem .55rem; }
  .status-extracted { background: #dcf5e1; color: #14532d; }
  .status-needs_review { background: #fdf0b0; color: #6b4e00; }
  .status-error { background: #fde0de; color: #8a1c15; }
  .status-received { background: #e8e5dc; color: #4a4437; }
  .status-bin { background: #eeece6; color: #8a8475; }
  .note { background: #fdf3c4; border-radius: 8px; }
  .warn { background: #fde4e2; border-left-color: var(--d-rot); border-radius: 8px; }
  .flash { border-radius: 8px; }
  .flash-ok { background: #e8f7ea; color: #14532d; border-color: #bfe8c6; }
  .flash-error { background: #fde4e2; color: #8a1c15; border-color: #f5bcb8; }

  /* --- Knöpfe: Pillen, ein goldener Hauptknopf je Seite --- */
  a.button, button {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    border-radius: 999px; border: 1.5px solid var(--d-schwarz); padding: .45rem 1rem;
    font-size: .93rem; font-weight: 600; color: var(--d-schwarz); background: #fff;
    text-decoration: none; line-height: 1.25; cursor: pointer; }
  a.button:hover, button:hover { background: var(--d-gold-hell); text-decoration: none; }
  button.primary, a.button.primary-link { background: var(--d-gold); border-color: var(--d-gold);
    color: var(--d-schwarz); font-weight: 700; padding: .5rem 1.2rem; }
  button.primary:hover, a.button.primary-link:hover { background: var(--d-gold-dunkel); border-color: var(--d-gold-dunkel); }
  button.danger { color: var(--d-rot); border-color: var(--d-rot); background: #fff; }
  button.danger:hover { background: #fde4e2; }
  button.small, a.button.small-link { padding: .25rem .7rem; font-size: .83rem; border-width: 1.2px; }
  button.small { background: #fff; color: var(--d-schwarz); }
  button.small:hover { background: var(--d-gold-hell); }
  button:disabled { background: #efece5; color: #a39d90; border-color: #e0dbcf; }
  .actions { gap: .6rem; }

  /* --- Tabellen: leichter, Kopf klein und gedeckt --- */
  table.data th { color: var(--d-grau); font-weight: 600; border-bottom: 1px solid var(--d-linie);
                  padding: .45rem .6rem; }
  table.data thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
                  border-bottom: 1.5px solid var(--d-linie); }
  table.data td { border-bottom: 1px solid var(--d-linie); padding: .5rem .6rem; }
  table.data tbody tr:last-child td { border-bottom: 0; }
  table.data tbody tr:hover { background: rgba(255, 255, 255, .55); }
  td.status { background: transparent; border-radius: 0; padding: .5rem .6rem; font-size: inherit; }
  tr.row-needs_review td { background: #fdf6d5; }
  tr.row-error td { background: #fde9e7; }
  .totals-table thead th { background: transparent; }
  .totals-table td.total-cell { font-weight: 700; }
  table.kv th { color: var(--d-grau); font-weight: 500; }
  .rechenblock th { color: var(--d-grau); }
  .rechenblock tr.ergebnis th, .rechenblock tr.ergebnis td { border-top: 2px solid var(--d-gold); color: var(--d-schwarz); }
  table.verpflegung tfoot th, table.verpflegung tfoot td { border-top-color: var(--d-gold); }
  .tage .ergebnis { border-top-color: var(--d-gold); }
  .tage .tag-zeile { border-bottom-color: var(--d-linie); }
  .checkliste li { border-bottom-color: var(--d-linie); }
  .checkliste .zeichen { font-size: .85rem; }
  .checkliste li.ok .zeichen { background: var(--d-gruen); color: #fff; }
  .checkliste li.offen .zeichen { background: var(--d-gelb); color: var(--d-schwarz); }

  /* --- Formulare --- */
  .grid label, .grid .feld { font-size: .87rem; color: var(--d-grau); }
  input, select, textarea { border: 1.2px solid #cfc9bb; border-radius: 8px; padding: .45rem .7rem;
                            background: #fff; color: var(--d-schwarz); font-size: .93rem; }
  input:focus, select:focus, textarea:focus { border-color: var(--d-gold); box-shadow: 0 0 0 3px rgba(214, 170, 78, .25); }
  .chip-wahl input + span { border-color: #cfc9bb; color: var(--d-schwarz); background: #fff; font-size: .87rem; }
  .chip-wahl input:checked + span { background: var(--d-gold); color: var(--d-schwarz); border-color: var(--d-gold); font-weight: 600; }
  .chip-wahl.leise input + span { color: var(--d-grau); border-color: #ddd8cc; }
  .grid label.camera input[type="file"] { border: 2px dashed var(--d-gold); background: #fff; border-radius: 10px; }
  details.mehr > summary { color: var(--d-grau); }
  details.mehr > summary:hover { color: var(--d-schwarz); }

  /* --- Reiter als Pille (wie am Handy, kleiner) --- */
  .tabs { display: inline-flex; background: var(--d-beige); border-radius: 999px; padding: 3px;
          border: 0; gap: 0; margin-bottom: 1rem; }
  .tabs .tab { padding: .35rem .95rem; border-radius: 999px; font-size: .9rem; font-weight: 600;
               color: var(--d-schwarz); border-bottom: 0; text-decoration: none; }
  .tabs .tab.active { background: var(--d-schwarz); color: #fff; }
  .tabs .tab:hover { color: var(--d-schwarz); }

  /* --- Raster: teilen sich nach dem verfügbaren Platz ein (Container = main),
     nicht nach der Fenstergröße. Ohne Container-Abfragen (alte Browser):
     eine Spalte, alles bleibt lesbar. --- */
  .start-raster, .karte-raster, .umsatz-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .karte-raster { align-items: stretch; margin-bottom: 1rem; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .pdf-pane { position: static; height: 60vh; }
  @container (min-width: 50rem) {
    .start-raster, .karte-raster, .umsatz-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .pdf-pane { position: sticky; top: 1rem; height: calc(100vh - 6rem); }
  }
  @container (min-width: 84rem) {
    .umsatz-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  /* --- Startseite „Zu erledigen" --- */
  .start-raster .card { margin: 0; display: flex; flex-direction: column; }
  .karten-kopf { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .6rem; }
  .karten-kopf h3 { margin: 0; }
  .karten-fuss { margin: auto 0 0; padding-top: .7rem; font-size: .87rem; }
  .leer-hinweis { color: var(--d-grau); margin: .2rem 0 .4rem; }
  .todo-liste { list-style: none; margin: 0; padding: 0; }
  .todo-liste li { border-bottom: 1px solid var(--d-linie); }
  .todo-liste li:last-child { border-bottom: 0; }
  .todo-liste a { display: flex; align-items: center; gap: .7rem; padding: .55rem .1rem;
                  text-decoration: none; font-size: 1rem; }
  .todo-liste a:hover { text-decoration: underline; }
  .zahl { display: inline-flex; min-width: 1.9rem; height: 1.9rem; padding: 0 .45rem; border-radius: 999px;
          align-items: center; justify-content: center; font-weight: 700; font-size: .87rem; }
  .zahl.gelb { background: var(--d-gelb); }  .zahl.rot { background: var(--d-rot); color: #fff; }
  .zahl.grau { background: #e5e5e5; }
  .mini-liste { list-style: none; margin: 0; padding: 0; }
  .mini-liste li { display: flex; align-items: center; gap: .8rem; padding: .45rem .1rem;
                   border-bottom: 1px solid var(--d-linie); font-size: .93rem; flex-wrap: wrap; }
  .mini-liste li:last-child { border-bottom: 0; }
  .mini-liste li > a { font-weight: 600; text-decoration: none; }
  .mini-liste li > a:hover { text-decoration: underline; }
  .mini-liste .rechts { margin-left: auto; white-space: nowrap; }
  .monat-zeile { display: flex; justify-content: space-between; font-weight: 600; margin: .2rem 0 .5rem; }
  .monat-zeile a { text-decoration: none; }
  .fortschritt { height: 8px; background: #e6e2d8; border-radius: 999px; overflow: hidden; }
  .fortschritt .balken { height: 100%; width: 0; background: var(--d-gold); border-radius: 999px; }
  .fortschritt.voll .balken { background: #0f9d3f; }
  .fortschritt.w-5 .balken { width: 5%; }   .fortschritt.w-10 .balken { width: 10%; }
  .fortschritt.w-15 .balken { width: 15%; } .fortschritt.w-20 .balken { width: 20%; }
  .fortschritt.w-25 .balken { width: 25%; } .fortschritt.w-30 .balken { width: 30%; }
  .fortschritt.w-35 .balken { width: 35%; } .fortschritt.w-40 .balken { width: 40%; }
  .fortschritt.w-45 .balken { width: 45%; } .fortschritt.w-50 .balken { width: 50%; }
  .fortschritt.w-55 .balken { width: 55%; } .fortschritt.w-60 .balken { width: 60%; }
  .fortschritt.w-65 .balken { width: 65%; } .fortschritt.w-70 .balken { width: 70%; }
  .fortschritt.w-75 .balken { width: 75%; } .fortschritt.w-80 .balken { width: 80%; }
  .fortschritt.w-85 .balken { width: 85%; } .fortschritt.w-90 .balken { width: 90%; }
  .fortschritt.w-95 .balken { width: 95%; } .fortschritt.w-100 .balken { width: 100%; }
  .fehlen { color: var(--d-rot); font-size: .83rem; font-weight: 700; margin: .4rem 0 0; text-align: right; }

  /* --- Reisen und Karte --- */
  table.reisen-tabelle .nowrap { white-space: nowrap; }
  a.chip { text-decoration: none; }
  a.chip:hover { text-decoration: underline; }
  .karte-raster .card { margin: 0; max-width: none; }
  .karte-schwarz { background: var(--nacht); color: #fff; border-radius: 12px; padding: 1.3rem 1.5rem; }
  .karte-schwarz .kartenname { font-size: 1.45rem; font-weight: 700; letter-spacing: .01em; }
  .karte-schwarz .inhaber { font-size: 1rem; color: #d9d3c3; margin-top: .1rem; }
  .karte-schwarz .karte-text { color: #9d967f; font-size: .87rem; margin: 1rem 0 0; }
  a.card.monat { display: block; }
  a.card.monat .fortschritt { margin-top: .6rem; }
  .reise-karte .fortschritt { margin-top: .7rem; }
  .umsatz-raster .card { margin: 0; }

  /* --- Meine Spesen: Hinweise, Filterleiste, Tabelle --- */
  .hinweise { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .9rem; }
  .hinweis { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .85rem;
             border-radius: 999px; font-weight: 600; font-size: .87rem; text-decoration: none; }
  .hinweis::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; }
  .hinweis.gelb { background: #fdf0b0; color: #6b4e00; }  .hinweis.gelb::before { background: var(--d-gelb); }
  .hinweis.rot { background: #fde0de; color: #8a1c15; }   .hinweis.rot::before { background: var(--d-rot); }
  .hinweis:hover { text-decoration: underline; }
  .filterleiste { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .9rem; }
  .filterleiste select, .filterleiste input { width: auto; font-size: .9rem; padding: .4rem .6rem; }
  .filterleiste input[type="search"] { min-width: 17rem; }
  .filterleiste .zeitraum { display: inline-flex; align-items: center; gap: .35rem; color: var(--d-grau); font-size: .87rem; }
  .card.belege-karte-pc { padding: .4rem .6rem .2rem; }
  table.belege-tabelle th a { text-decoration: none; color: inherit; }
  table.belege-tabelle th a:hover, table.belege-tabelle th a.sortiert { color: var(--d-schwarz); }
  table.belege-tabelle .pfeil { font-size: .6rem; }
  table.belege-tabelle td.desc { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  table.belege-tabelle .nowrap { white-space: nowrap; }
  table.belege-tabelle .nr { display: block; font-size: .8rem; color: var(--d-grau); }
  table.belege-tabelle tfoot th, table.belege-tabelle tfoot td { border-top: 2px solid var(--d-gold);
             border-bottom: 0; font-weight: 700; color: var(--d-schwarz); padding-top: .55rem; }
  table.belege-tabelle td.leer { text-align: center; color: var(--d-grau); padding: 1.6rem; border-bottom: 0; }
  .summe-karte table.data { width: auto; min-width: 70%; }

  /* --- Hochladen am PC: Datei-Feld als große Ablagefläche, Kamera-Feld aus --- */
  .scan-seite label.camera { display: none; }
  .scan-seite label.datei-wahl input[type="file"] { border: 2px dashed var(--d-gold); background: #fff;
              border-radius: 10px; padding: 1.4rem 1rem; cursor: pointer; }
  .scan-seite label.datei-wahl input[type="file"]:hover { background: #fffaf0; }
  .scan-seite .file-count { font-size: .83rem; }

  /* --- Beleg-Seite: Bild links, Formular rechts (Aufteilung siehe Raster oben) --- */
  .pdf-pane { border-radius: 10px; }
  .datei-link { display: none; }
  .save-bar { background: var(--d-flaeche); border-top: 1px solid var(--d-linie); padding: .8rem 0;
              align-items: center; }
  .save-bar button.small { margin-left: .2rem; }

  /* --- Dialog wie am Handy --- */
  .dialog-karte { background: var(--d-beige); border-radius: 16px; text-align: center; padding: 1.5rem 1.4rem; }
  .dialog-karte p { font-size: 1.13rem; margin: 0 0 1rem; }
  .dialog-karte .actions { justify-content: center; }
  .dialog-karte a.button, .dialog-karte button { background: var(--d-schwarz); color: #fff; border-color: var(--d-schwarz); }
  .dialog-karte a.button:hover, .dialog-karte button:hover { background: #333; }

  /* --- Login (nicht angemeldet): Kopfleiste bleibt, Knopf als Pille --- */
  body.dark-page .login-card { border-radius: 16px; }
  body.dark-page .topbar { padding: 1rem 1.5rem; }

  /* Kartenabgleich: Umsatz-Karte über der Upload-Seite, Kartenumsatz und
     Automatik-Chip am Beleg. */
  .umsatz-karte { max-width: 58rem; margin: 0 auto 1rem; }
  .umsatz-karte .inhaber { color: #d9d3c3; }
  .umsatz-karte .zeile { display: flex; justify-content: space-between; margin-top: .3rem; font-size: 1rem; }
  .karten-link { margin: .1rem 0 .7rem; }
  .karten-link .status { margin-left: .4rem; }
  .auto-chip { display: inline-block; width: auto; align-self: flex-start; margin-top: .3rem; font-size: .75rem; }
}