/* T.A. Plattform – ruhig, klar, ohne Fremdschriften */
:root {
  --grund: #f5f4f0; --flaeche: #ffffff; --tinte: #1b1f23; --leise: #5d6266; --linie: #e4e1da; --linie-stark: #cfcac0;
  --akzent: #7a5b1c; --akzent-hell: #f6efe0; --saeule: #a06c10;
  --gut: #2f6b3f; --gut-bg: #e8f2ea; --warn: #8a5a00; --warn-bg: #fdf3dc; --schlecht: #9b2c2c; --schlecht-bg: #fbe9e7;
  --info: #24557a; --info-bg: #e7f0f7; --neutral-bg: #efede8;
  --radius: 10px; --schatten: 0 1px 2px rgba(27,31,35,.05), 0 1px 1px rgba(27,31,35,.03);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--tinte); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
a { color: var(--akzent); text-underline-offset: 2px; }
h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 .25rem; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
h3 { font-size: .95rem; margin: 1rem 0 .5rem; }
p { margin: 0 0 .75rem; }
code { font: .9em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--neutral-bg); padding: .1em .35em; border-radius: 4px; overflow-wrap: anywhere; }
.leise { color: var(--leise); }
.klein { font-size: .85rem; }
.vorformatiert { white-space: pre-wrap; }

/* Kopf */
.kopf { background: var(--flaeche); border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 5; }
.kopf-in { max-width: 1240px; margin: 0 auto; padding: .8rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.marke { color: var(--tinte); text-decoration: none; font-size: 1rem; }
.marke strong { font-weight: 700; letter-spacing: .01em; }
.marke span { color: var(--leise); }
.konto { display: flex; align-items: center; gap: .75rem; }
.konto form { margin: 0; }
.konto-name { color: var(--tinte); text-decoration: none; text-align: right; line-height: 1.2; font-size: .9rem; }
.konto-name small { display: block; color: var(--leise); font-size: .75rem; }
.nav { border-top: 1px solid var(--linie); }
.nav-in { max-width: 1240px; margin: 0 auto; padding: 0 .75rem; display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
.nav-in::-webkit-scrollbar { display: none; }
.nav a { padding: .65rem .7rem; color: var(--leise); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; font-size: .93rem; }
.nav a:hover { color: var(--tinte); }
.nav a[aria-current="page"] { color: var(--tinte); border-bottom-color: var(--akzent); font-weight: 600; }

/* Seite */
.seite { max-width: 1240px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.seitenkopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.seitenkopf > div { min-width: 0; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.15rem 1.25rem; margin-bottom: 1rem; box-shadow: var(--schatten); min-width: 0; }
.karte.schmal { max-width: 720px; }
.karte.sd { border-color: var(--linie-stark); background: #fbfaf7; }
.karte-kopf { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .75rem; flex-wrap: wrap; }
.karte-kopf h2 { margin: 0; }
.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.zweispaltig > * { min-width: 0; }
.zweispaltig.breit-links { grid-template-columns: 3fr 2fr; }
.fuss { max-width: 1240px; margin: 0 auto; padding: 1rem 1.25rem 2rem; color: var(--leise); font-size: .8rem; }

/* Kennzahlen */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1rem; }
.kpis > * { min-width: 0; }
.kpi { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem 1.15rem; box-shadow: var(--schatten); }
.kpi-t { color: var(--leise); font-size: .82rem; margin-bottom: .25rem; }
.kpi-w { font-size: 1.65rem; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.kpi-w small { font-size: .8rem; font-weight: 500; color: var(--leise); }
.kpi-u { color: var(--leise); font-size: .82rem; margin-top: .35rem; }
.kpi-warn { border-color: #e9cf96; background: var(--warn-bg); }
.kpi-stopp { border-color: #e4b4ad; background: var(--schlecht-bg); }
.balken { height: 6px; background: var(--neutral-bg); border-radius: 3px; overflow: hidden; margin: .5rem 0 .35rem; }
.balken span { display: block; height: 100%; background: var(--akzent); border-radius: 3px; }
.balken-warn span { background: var(--warn); }

/* Hinweise */
.banner { border-radius: var(--radius); padding: .85rem 1.1rem; margin-bottom: 1rem; border: 1px solid; }
.banner-warn { background: var(--warn-bg); border-color: #e9cf96; color: #5c3d00; }
.banner-stopp { background: var(--schlecht-bg); border-color: #e4b4ad; color: #6b1d1d; }
.meldung { border-radius: var(--radius); padding: .75rem 1rem; margin-bottom: 1rem; border: 1px solid; }
.meldung-ok { background: var(--gut-bg); border-color: #bcd8c2; color: #1f4a2b; }
.meldung-fehler { background: var(--schlecht-bg); border-color: #e4b4ad; color: #6b1d1d; }
.pille { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 550; white-space: nowrap; line-height: 1.5; }
.pille-gut { background: var(--gut-bg); color: var(--gut); }
.pille-warn { background: var(--warn-bg); color: var(--warn); }
.pille-schlecht { background: var(--schlecht-bg); color: var(--schlecht); }
.pille-info { background: var(--info-bg); color: var(--info); }
.pille-neutral { background: var(--neutral-bg); color: var(--leise); }

/* Tabellen */
.tabelle-wrap { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabelle th { text-align: left; font-weight: 600; color: var(--leise); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; padding: .5rem .6rem; border-bottom: 1px solid var(--linie-stark); white-space: nowrap; }
.tabelle td { padding: .6rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabelle tr.summe td { font-weight: 650; border-top: 1px solid var(--linie-stark); }
.tabelle .anliegen { min-width: 16rem; max-width: 34rem; overflow-wrap: anywhere; }
.tabelle .aktion { white-space: nowrap; text-align: right; }
.tabelle .aktion form { display: inline-block; margin: 0 0 .25rem .25rem; }
.tabelle details summary { cursor: pointer; color: var(--akzent); font-size: .85rem; list-style: none; }
.tabelle details summary::-webkit-details-marker { display: none; }
.tabelle details[open] { white-space: normal; text-align: left; min-width: 18rem; }
.mehr-zeile > td { background: #fbfaf7; }
.mehr-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; padding: .25rem 0 .5rem; }
.mehr-in .roh { margin-top: 0; }
.roh { background: var(--neutral-bg); border-radius: 6px; padding: .6rem .7rem; margin: .5rem 0; font-size: .8rem; overflow-wrap: anywhere; }
.tabelle-auf { margin-top: .5rem; }
.tabelle-auf summary { cursor: pointer; color: var(--akzent); font-size: .85rem; }
.liste { margin: 0; padding-left: 1.1rem; }
.liste li { margin: .25rem 0; overflow-wrap: anywhere; }
.schritte { margin: 0; padding-left: 1.2rem; }
.schritte li { margin: 0 0 .6rem; }

/* Diagramm (Säulen je Tag) */
.chart-rahmen { position: relative; }
.tc { padding: .25rem 0 0 2.6rem; }
.tc-flaeche { position: relative; height: 180px; border-bottom: 1px solid var(--linie-stark); }
.tc-linie { position: absolute; left: 0; right: 0; border-top: 1px solid #ece9e3; }
.tc-linie span { position: absolute; right: calc(100% + .45rem); top: -.55rem; font-size: .72rem; color: var(--leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tc-saeulen { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.tc-tag { flex: 1 1 0; min-width: 0; height: 100%; display: flex; justify-content: center; align-items: flex-end; position: relative; }
.tc-tag:hover { background: rgba(160,108,16,.06); }
.tc-saeule { display: block; width: 62%; max-width: 18px; background: var(--saeule); border-radius: 4px 4px 0 0; }
.tc-x { position: absolute; top: calc(100% + .3rem); font-size: .72rem; color: var(--leise); white-space: nowrap; }
.tc-saeulen { margin-bottom: 0; }
.chart-rahmen { padding-bottom: 1.4rem; }
.tip { position: absolute; background: var(--tinte); color: #fff; font-size: .8rem; padding: .3rem .55rem; border-radius: 6px; pointer-events: none; transform: translate(-50%, -115%); white-space: nowrap; z-index: 2; }

/* Projekte */
.projekte { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .85rem; }
.projekt { border: 1px solid var(--linie); border-radius: 8px; padding: .9rem 1rem; display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.projekt-kopf { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; }
.projekt h3 { margin: 0; font-size: 1rem; }
.projekt p { margin: .2rem 0; color: var(--leise); }
.projekt-fuss { margin-top: auto; display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; font-size: .88rem; overflow-wrap: anywhere; }

/* Formulare */
.formular { display: grid; gap: .85rem; }
.formular.eng { gap: .5rem; margin-top: .5rem; }
.formular label { display: grid; gap: .3rem; font-size: .88rem; font-weight: 550; }
.formular .reihe { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.formular .reihe > * { min-width: 0; }
.formular label.haken { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
.inline-form { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; margin: .5rem 0 0; }
.inline-form label { display: grid; gap: .3rem; font-size: .85rem; font-weight: 550; }
input, select, textarea { font: inherit; color: inherit; background: #fff; border: 1px solid var(--linie-stark); border-radius: 7px; padding: .55rem .65rem; width: 100%; min-width: 0; }
input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: var(--akzent); }
input[type="file"] { padding: .45rem; background: var(--grund); }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
textarea { resize: vertical; }
.knopf, .knopf-zweit, .knopf-leise { font: inherit; font-weight: 600; border-radius: 7px; cursor: pointer; text-decoration: none; display: inline-block; text-align: center; line-height: 1.2; }
.knopf { background: var(--tinte); color: #fff; border: 1px solid var(--tinte); padding: .65rem 1.1rem; }
.knopf:hover { background: #33393f; }
.knopf-zweit { background: var(--flaeche); color: var(--tinte); border: 1px solid var(--linie-stark); padding: .5rem .85rem; font-size: .88rem; }
.knopf-zweit:hover { border-color: var(--tinte); }
.knopf-leise { background: none; border: 0; color: var(--akzent); padding: .4rem .5rem; font-size: .88rem; font-weight: 550; }
.knopf-leise.gefahr { color: var(--schlecht); }
.formular .knopf { justify-self: start; }
.einmal { border-color: #e9cf96; background: var(--warn-bg); }
.pw { font-size: 1.05rem; padding: .25rem .5rem; background: #fff; }

/* Anmeldung */
.login { max-width: 420px; margin: 3rem auto; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--schatten); }
.login .knopf { width: 100%; }
.kopf-schmal .kopf-in { justify-content: center; }

/* Tablet */
@media (max-width: 1024px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .zweispaltig, .zweispaltig.breit-links { grid-template-columns: 1fr; }
}
/* Handy */
@media (max-width: 640px) {
  body { font-size: 15px; }
  .kopf { position: static; }
  .kopf-in { padding: .7rem 1rem; }
  .nav-in { flex-wrap: wrap; padding: 0 .5rem; gap: 0; }
  .nav a { padding: .5rem .55rem; font-size: .9rem; }
  .marke span { display: block; font-size: .78rem; }
  .konto-name { display: none; }
  .seite { padding: 1rem .85rem 2.5rem; }
  h1 { font-size: 1.35rem; }
  .karte { padding: 1rem; }
  .kpis { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .kpi { padding: .8rem .85rem; }
  .kpi-w { font-size: 1.3rem; }
  .formular .reihe { grid-template-columns: 1fr; }
  .seitenkopf .knopf { width: 100%; }
  /* Tabellen als gestapelte Zeilen */
  .tabelle-wrap { overflow: visible; }
  .tabelle thead { display: none; }
  .tabelle, .tabelle tbody, .tabelle tr, .tabelle td { display: block; width: 100%; }
  .tabelle tr { border-bottom: 1px solid var(--linie); padding: .55rem 0; }
  .tabelle tr:last-child { border-bottom: 0; }
  .tabelle td { border: 0; padding: .15rem 0 .15rem 7.25rem; position: relative; text-align: left; min-height: 1.6rem; }
  .tabelle td[data-l]::before { content: attr(data-l); position: absolute; left: 0; top: .2rem; width: 6.75rem; color: var(--leise); font-size: .78rem; }
  .tabelle td[data-l=""], .tabelle td:not([data-l]) { padding-left: 0; }
  .tabelle td[data-l=""]::before, .tabelle td:not([data-l])::before { content: none; }
  .tabelle .r { text-align: left; white-space: normal; }
  .tabelle .anliegen { min-width: 0; max-width: none; }
  .tabelle .aktion { text-align: left; white-space: normal; }
  .tabelle .aktion form { margin: .25rem .5rem 0 0; }
  .tabelle details[open] { min-width: 0; }
  .mehr-in { grid-template-columns: 1fr; }
  .tabelle tr.mehr-zeile { border-top: 0; padding-top: 0; }
  .tabelle tr.summe td { border-top: 0; }
}
.formular .knopf-zweit { justify-self: start; }
.inline-form select, .inline-form input { width: auto; }