/* One hand-written stylesheet, still: no build step, no framework, no CDN.
   The dashboard has to render on a phone in a stairwell, and every byte here
   arrives in the same request as the page that needs it.

   Two colour rules worth knowing before editing:

   * `--akzent` is a mark colour. At 3.3:1 on white it is fine for a ring, a
     border or a filled pill, and not enough for text. Text and filled buttons
     use `--akzent-text` (6.6:1) instead. Numbers and labels wear `--text` and
     `--leise`; colour never carries a meaning on its own.
   * The unfilled part of a ring is a lighter step of the same hue, so the
     whole ring reads as one scale rather than a shape on a grey disc. */

:root {
  --grund: #f5f6f8;
  --karte: #ffffff;
  --rand: #e6e8ec;
  --text: #1f2933;
  --leise: #6b7280;
  --akzent: #1f9e8e;          /* marks: rings, active pills, focus */
  --akzent-text: #14685e;     /* text and filled buttons */
  --akzent-hell: #e3f4f1;
  /* The second series on the cash-flow chart. Checked against --akzent for
     colour-vision deficiency, not chosen by eye: deutan dE 17.8, tritan
     12.8, normal 24.6, all above the floor. --violett-hell is the skeleton
     tint, which is why the placeholder bars cannot be mistaken for data. */
  --violett: #7c5cd6;
  --violett-hell: #ece7fa;
  --orange: #f2a541;
  --orange-text: #8a5a06;
  --orange-hell: #fdf1de;
  --rot: #9c2b2b;
  --gelb: #8a6d1a;
  --gruen: #2f6b3a;
  --schatten: 0 1px 2px rgba(31, 41, 51, .05);
  --rundung: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--akzent-text); }

.sym { width: 1.3rem; height: 1.3rem; flex: none; }

/* --- app frame --------------------------------------------------------- */

body.app {
  display: grid;
  grid-template-columns: 16rem 1fr;
  min-height: 100vh;
}

.seitenleiste {
  display: flex; flex-direction: column; gap: .3rem;
  background: var(--karte); border-right: 1px solid var(--rand);
  padding: 1.1rem .8rem;
  position: sticky; top: 0; align-self: start; height: 100vh;
}

/* Its own name, not `.marke`. `.marke` further down is the badge pill used in
   table cells, and every one of its properties that the old scoped rule did
   not happen to override - the .7rem type, the 999px radius, the grey fill,
   the border - leaked into the logo. That is why it looked like a tag. */
.wortmarke {
  display: flex; align-items: center; gap: .65rem;
  padding: .35rem .35rem 1.3rem; color: var(--text); text-decoration: none;
}
.wortmarke .zeichen {
  display: grid; place-items: center; flex: none;
  width: 2.4rem; height: 2.4rem; border-radius: 12px;
  background: var(--akzent-text); color: #fff;
  box-shadow: 0 2px 6px rgba(20, 104, 94, .25);
}
.wortmarke .zeichen .sym { width: 1.45rem; height: 1.45rem; }
.wortmarke .schrift { display: flex; flex-direction: column; line-height: 1.15; }
.wortmarke strong { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.wortmarke small {
  color: var(--akzent-text); font-size: .68rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}

.seitenleiste nav { display: flex; flex-direction: column; gap: .15rem; }

.nav-eintrag {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .7rem; border-radius: 10px;
  color: var(--text); text-decoration: none; font-size: .93rem;
}
.nav-eintrag:hover { background: var(--grund); }
.nav-eintrag.aktiv {
  background: var(--akzent-hell); color: var(--akzent-text); font-weight: 600;
}
.nav-eintrag.bald { color: #a3a8b0; cursor: default; }
.nav-eintrag.bald:hover { background: none; }

.pille {
  margin-left: auto; font-size: .65rem; letter-spacing: .02em;
  padding: .1em .5em; border-radius: 999px;
  background: var(--grund); color: var(--leise); border: 1px solid var(--rand);
}
.zaehler {
  margin-left: auto; min-width: 1.4rem; text-align: center;
  font-size: .72rem; font-weight: 700; padding: .1em .45em;
  border-radius: 999px; background: var(--orange); color: #3d2a02;
}

.fussnote {
  margin-top: auto; padding: .5rem;
  color: var(--leise); font-size: .74rem; line-height: 1.45;
}

.inhalt { display: flex; flex-direction: column; min-width: 0; }

.kopfzeile {
  display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: center;
  padding: .8rem 1.4rem; background: var(--karte);
  border-bottom: 1px solid var(--rand);
}

.suche {
  flex: 1 1 18rem; display: flex; align-items: center; gap: .5rem;
  background: var(--grund); border: 1px solid var(--rand);
  border-radius: 999px; padding: .35rem .9rem; max-width: 34rem;
  color: var(--leise);
}
.suche input {
  flex: 1; border: none; background: none; padding: .2rem 0;
  font-size: .93rem; color: var(--text); min-width: 0;
}
.suche input:focus { outline: none; }
.suche:focus-within { border-color: var(--akzent); }

.konto { display: flex; align-items: center; gap: .7rem; margin-left: auto; }
.konto .wer { color: var(--leise); font-size: .88rem; }
.konto .abmelden { margin: 0; }
.konto button { display: flex; align-items: center; gap: .35rem; }

main { padding: 1.4rem; max-width: 82rem; width: 100%; }

.seitenkopf { margin-bottom: 1rem; }
.seitenkopf .erlaeuterung { margin: .1rem 0 0; }

h1 { font-size: 1.45rem; margin: 0 0 .2rem; letter-spacing: -.01em; }
/* A section heading needs air above it, or it reads as the last line of the
   thing before it instead of the first line of the thing after. On
   `/unklar/<id>` three headings sit directly under a card, a table and a
   form. Inside a card the first heading is the card's own title and keeps
   its flush top. */
h2 { font-size: 1rem; margin: 1.7rem 0 .7rem; }
h2:first-child, .karte h2:first-child { margin-top: 0; }
code { background: var(--grund); padding: .05em .35em; border-radius: 4px;
  font-size: .88em; }
.erlaeuterung { color: var(--leise); margin: .2rem 0 1rem; font-size: .9rem; }

.zurueck {
  display: inline-flex; align-items: center; gap: .2rem;
  color: var(--leise); text-decoration: none; font-size: .85rem;
  margin-bottom: .5rem;
}
.zurueck:hover { color: var(--akzent-text); }
.zurueck .sym { width: 1rem; height: 1rem; }

/* --- tabs --------------------------------------------------------------- */

/* The two halves of the dashboard. Same colours as `.nav-eintrag.aktiv`, so
   the tab and the sidebar entry it sits under agree about what is current. */
.reiter {
  display: flex; gap: .3rem; margin-bottom: 1.1rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.reiter a {
  padding: .45rem .9rem; border-radius: 999px; white-space: nowrap;
  color: var(--leise); text-decoration: none; font-size: .92rem;
}
.reiter a:hover { background: var(--karte); color: var(--text); }
.reiter a.aktiv {
  background: var(--akzent-hell); color: var(--akzent-text); font-weight: 600;
}

/* --- cards ------------------------------------------------------------- */

.karte {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--rundung); box-shadow: var(--schatten);
  padding: 1.1rem 1.2rem;
}

.karten {
  display: grid; gap: 1rem; margin-bottom: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.kennzahl { display: grid; grid-template-columns: auto 1fr; gap: .2rem .9rem; }
.kennzahl .wert { display: flex; flex-direction: column; justify-content: center; }
.kennzahl .wert strong { font-size: 2rem; line-height: 1.1; letter-spacing: -.02em; }
.kennzahl .wert strong.klein { font-size: 1.3rem; }
/* Not a number: a dash where one will go. At the weight of a real figure it
   reads as a redaction bar, so it wears the colour of something absent. */
.kennzahl .wert strong.ohne { color: #b6bbc2; font-weight: 500; }
.kennzahl .etikett { font-size: .9rem; }
.kennzahl .dazu { color: var(--leise); font-size: .78rem; margin-top: .1rem; }
.kennzahl .weiter { grid-column: 1 / -1; margin-top: .9rem; }

.weiter {
  display: inline-flex; align-items: center; gap: .25rem;
  color: var(--leise); text-decoration: none; font-size: .85rem;
}
.weiter:hover { color: var(--akzent-text); }
.weiter .sym { width: 1rem; height: 1rem; color: var(--akzent); }
/* A footer that names the page it will lead to and does not lead there yet.
   A dead <a> would be a link that quietly does nothing; this is a span that
   looks like what it is. */
.weiter.gesperrt { color: #a3a8b0; cursor: default; }
.weiter.gesperrt .sym { color: #c3c7cd; }

/* The badge on everything that has no data behind it yet. `.pille` was built
   for the sidebar row and pushes itself right with `margin-left: auto`; in a
   card it has to stay where it is put. */
.pille.demnaechst {
  margin-left: 0; align-self: flex-start; margin-top: .45rem;
  background: var(--akzent-hell); color: var(--akzent-text);
  border-color: transparent; font-weight: 600;
}

/* The one ring: `--anteil` (0..1) is set inline from a real ratio, and the
   same ratio is always written out in words next to it. */
.ring {
  --anteil: 0;
  width: 4rem; height: 4rem; border-radius: 50%; display: grid;
  place-items: center; place-content: center; flex: none;
  background: conic-gradient(var(--akzent) calc(var(--anteil) * 360deg),
                             var(--akzent-hell) 0);
}
.ring::before {
  content: ""; grid-area: 1 / 1; width: 3rem; height: 3rem;
  border-radius: 50%; background: var(--karte);
}
.ring span {
  grid-area: 1 / 1; font-size: .78rem; font-weight: 600;
  color: var(--akzent-text); font-variant-numeric: tabular-nums;
}
/* A share with no numerator yet. Flat rather than a conic gradient at zero,
   so it is plainly an empty gauge and not a gauge that is reading nought. */
.ring.leer { background: var(--akzent-hell); }

/* Not a ring: these numbers are counts, not shares, and a gauge without a
   denominator would be a picture of nothing. */
.scheibe {
  width: 4rem; height: 4rem; border-radius: 50%; display: grid;
  place-items: center; flex: none;
  background: var(--grund); color: var(--leise);
}
.scheibe .sym { width: 1.6rem; height: 1.6rem; }
.scheibe.achtung { background: var(--orange-hell); color: var(--orange-text); }

.zweispaltig {
  display: grid; gap: 1rem; align-items: start;   /* cards keep their own height */
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
}

/* --- messages ---------------------------------------------------------- */

.hinweis {
  padding: .7rem .9rem; border-radius: 10px; margin: 0 0 .8rem;
  border-left: 4px solid var(--leise); background: var(--karte);
  border-top: 1px solid var(--rand); border-right: 1px solid var(--rand);
  border-bottom: 1px solid var(--rand);
  font-size: .92rem;
}
.hinweis ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.hinweis p { margin: 0; }
.hinweis.fehler  { border-left-color: var(--rot);   background: #fdf3f3; }
.hinweis.warnung { border-left-color: var(--gelb);  background: #fdf9ee; }
.hinweis.erfolg  { border-left-color: var(--gruen); background: #eff7f1; }

/* --- tables ------------------------------------------------------------ */

.daten {
  width: 100%; border-collapse: collapse; background: var(--karte);
  border: 1px solid var(--rand); border-radius: var(--rundung);
  overflow: hidden; box-shadow: var(--schatten);
}
.daten th, .daten td {
  text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--rand);
  vertical-align: top; font-size: .9rem;
}
.daten th { font-weight: 600; color: var(--leise); white-space: nowrap;
  font-size: .78rem; letter-spacing: .02em; text-transform: uppercase; }
.daten tr:last-child td { border-bottom: none; }
/* A Dropbox path is one long word as far as line breaking is concerned -- a
   slash is no break opportunity. In a 390px viewport the 'Liegt in Dropbox'
   row pushed the whole table 63px past the right edge, so the page scrolled
   sideways. Let the path break instead; it is there to be read, not
   selected in one piece. */
.daten code { overflow-wrap: anywhere; }
/* A cell that says why it is empty rather than showing a dash. The muted grey
   is the same one the column headers use, so the sentence reads as a note about
   the row and not as a value in it. */
.daten .fehlt { color: var(--leise); font-size: .85em; }
/* Inside a card the table brings no chrome of its own. */
.karte .daten.schlicht { border: none; box-shadow: none; border-radius: 0; }
.karte .daten.schlicht th { text-transform: none; font-size: .82rem; }
/* Four columns in half a page: without a fixed layout the browser gives the
   long target folder whatever it asks for and clips it at the card edge. */
.karte .daten.letzte { table-layout: fixed; }
.karte .daten.letzte .knapp { width: 8.5rem; }
.karte .daten.letzte .objekt { width: 3.5rem; }
.karte .daten.letzte .pfad {
  width: 9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Scan names have no spaces to break at, so a fixed layout lets them run
   straight over the next column unless they are told they may break anywhere. */
.karte .daten.letzte .datei { overflow-wrap: anywhere; }
/* Wide tables: the wrapper scrolls, and the table is allowed to be wider than
   it. With `width: 100%` on the table instead, the browser squeezes the target
   path down to a column one letter wide rather than letting the row scroll. */
.tabelle { overflow-x: auto; }
.breit { width: auto; min-width: 100%; }
.breit .pfad { min-width: 9rem; }
.breit .grund { min-width: 14rem; }
.knapp { white-space: nowrap; color: var(--leise);
  font-variant-numeric: tabular-nums; }
.pfad, .grund { font-size: .82rem; color: var(--leise); overflow-wrap: anywhere; }
tr.ergebnis-unklar td, tr.ergebnis-fehler td { background: #fdf9ee; }
tr.erledigt td { opacity: .55; }

.marke {
  display: inline-block; font-size: .7rem; padding: .1em .5em;
  border-radius: 999px; background: var(--grund); color: var(--leise);
  border: 1px solid var(--rand);
}
.marke.gut { background: var(--akzent-hell); color: var(--akzent-text);
  border-color: transparent; }

/* --- forms ------------------------------------------------------------- */

button, .knopf {
  font: inherit; font-size: .88rem; padding: .38rem .8rem; cursor: pointer;
  border: 1px solid var(--rand); border-radius: 9px;
  background: var(--karte); color: var(--text); text-decoration: none;
  display: inline-flex; align-items: center; gap: .3rem;
}
button:hover, .knopf:hover { border-color: var(--akzent); color: var(--akzent-text); }
button.haupt, .knopf.haupt {
  background: var(--akzent-text); color: #fff; border-color: var(--akzent-text);
}
button.haupt:hover { background: #0f564e; color: #fff; }
button .sym, .knopf .sym { width: 1rem; height: 1rem; }

input, select {
  font: inherit; font-size: .9rem; padding: .4rem .55rem;
  border: 1px solid var(--rand); border-radius: 9px; background: #fff;
  max-width: 100%; color: var(--text);
}
input:focus, select:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
label { display: block; margin: .5rem 0; font-size: .8rem; color: var(--leise); }
label input, label select { display: block; width: 100%; margin-top: .2rem;
  color: var(--text); font-size: .95rem; }
label small { color: var(--leise); font-size: .78rem; }

.filter {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end;
  margin-bottom: 1rem; background: var(--karte); padding: .8rem 1rem;
  border: 1px solid var(--rand); border-radius: var(--rundung);
}
.filter label { margin: 0; }
.filter .anzahl { color: var(--leise); font-size: .85rem; }

.raster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  /* `start`, not `end`: the unit field carries a `<small>` under its select,
     and aligning the row at its bottom edge pushed that one select upward
     while the others stayed down -- the row looked broken. Aligned at the
     top, every label starts on the same line and every input with it. */
  gap: 0 1rem; align-items: start; background: var(--karte); padding: 1.1rem 1.2rem;
  border: 1px solid var(--rand); border-radius: var(--rundung);
  box-shadow: var(--schatten);
}
.raster .voll { grid-column: 1 / -1; }
.raster button { grid-column: 1 / -1; justify-self: start; margin-top: .9rem; }

/* The only interactive column on the protocol page, and the widest content in
   it. Capped so it stays on screen next to seven other columns. */
/* A width, not a max-width. With only a maximum the auto table layout gave
   this column whatever was left after the target path had taken its share,
   and `width: 100%` on the select then shrank it below its own longest
   option -- 'richtig abgelegt' rendered as 'richtig abgele'. A fixed width
   makes the table ask for the space instead, and `.tabelle` scrolls. Wide
   enough for the longest entry in `RUECKMELDUNGEN`, which is
   'falscher Dokumenttyp'. */
.rueckmeldung { display: flex; flex-wrap: wrap; gap: .3rem; width: 13rem; }
.rueckmeldung select, .rueckmeldung input { width: 100%; min-width: 0; }

.blaettern { display: flex; gap: .6rem; margin-top: 1rem; }
.berichte { line-height: 2.1; }

/* --- Dokumente --------------------------------------------------------- */

.brotkrumen {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  font-size: .88rem; margin-bottom: .8rem; color: var(--leise);
}
.brotkrumen a { text-decoration: none; }
.brotkrumen a:hover { text-decoration: underline; }
.brotkrumen .trenner { color: #c3c7cd; }
.brotkrumen strong { color: var(--text); font-weight: 600; }

.dateiliste { list-style: none; margin: 0; padding: 0; }
.dateiliste li { border-bottom: 1px solid var(--rand); }
.dateiliste li:last-child { border-bottom: none; }
.dateiliste .zeile {
  display: flex; align-items: center; gap: .7rem; padding: .6rem .3rem;
  color: var(--text); text-decoration: none;
}
.dateiliste .zeile:hover { background: var(--grund); border-radius: 8px; }
.dateiliste .zeile .sym { color: var(--leise); }
.dateiliste .zeile.ist-ordner .sym { color: var(--akzent); }
.dateiliste .name { flex: 1; min-width: 0; word-break: break-word; }
.dateiliste .name small { display: block; color: var(--leise); font-size: .76rem; }
.dateiliste .meta {
  color: var(--leise); font-size: .8rem; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dateiliste .laden { font-size: .8rem; white-space: nowrap; }

.leer { color: var(--leise); font-size: .9rem; padding: 1.2rem .3rem; }


.objektzeile {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .8rem;
  padding: .55rem .3rem; border-bottom: 1px solid var(--rand);
}
.objektzeile:last-child { border-bottom: none; }
.objektzeile .wo { flex: 1 1 14rem; min-width: 0; }
.objektzeile .wo small { display: block; color: var(--leise); font-size: .78rem; }

.schnell { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .3rem; }

/* --- cash-flow skeleton -------------------------------------------------- */

/* A chart with no data behind it. Three things keep it from being read as one:
   the bars wear the *hell* tints of the two series hues rather than the hues
   themselves, there is no value axis - an axis is a promise that the heights
   mean something - and a badge sits in the middle of the plot. The legend
   swatches do carry the full hues, because the legend is the one part that is
   already true: this is what Einnahmen and Ausgaben will look like. */

.cashflow .kartenkopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem;
  margin-bottom: 1rem;
}
.cashflow .legende {
  display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0 0 0 auto;
  color: var(--leise); font-size: .82rem;
}
.cashflow .legende span { display: inline-flex; align-items: center; gap: .4rem; }
.cashflow .legende span::before {
  content: ""; width: .7rem; height: .7rem; border-radius: 3px; flex: none;
}
.cashflow .legende .einnahmen::before { background: var(--akzent); }
.cashflow .legende .ausgaben::before { background: var(--violett); }

.diagramm { position: relative; }

/* `minmax(0, 1fr)`, not `1fr`: `1fr` is `minmax(auto, 1fr)`, so the month
   labels set a min-content floor and twelve of them push the card past a
   390px screen. That is exactly what the browser overflow test catches. */
.balken {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .4rem;
}
.balken .monat { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
/* 2px between the two fills, per the mark spec: adjacent bars need a surface
   gap or they read as one shape. */
.balken .saeulen { height: 9rem; display: flex; align-items: flex-end; gap: 2px; }
.balken .saeulen span {
  flex: 1; min-width: 0; border-radius: 4px 4px 0 0;   /* anchored to the baseline */
}
/* The full hues, not the `-hell` skeleton tints. That swap is the whole
   difference between "this is a picture of nothing" and "these heights mean
   something": the tints existed so the placeholder could not be mistaken for
   data, and the bars now carry real counts. `.ohne-daten` puts the tints back
   for an empty database, where the badge says so too. */
.balken .ein { background: var(--akzent); }
.balken .aus { background: var(--violett); }
.balken.ohne-daten .ein { background: var(--akzent-hell); }
.balken.ohne-daten .aus { background: var(--violett-hell); }
.balken small {
  text-align: center; color: var(--leise); font-size: .68rem;
  overflow: hidden;
}

.pille.demnaechst.ueberlagert {
  position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%);
  margin: 0; font-size: .78rem; padding: .3em 1em;
  background: var(--karte); border-color: var(--akzent-hell);
  box-shadow: 0 2px 10px rgba(31, 41, 51, .12);
}

.cashflow button[disabled] {
  margin-top: .2rem; color: var(--leise); cursor: default;
}
.cashflow button[disabled]:hover { border-color: var(--rand); color: var(--leise); }

/* --- login ------------------------------------------------------------- */

body.anmeldeseite {
  display: flex; min-height: 100vh; align-items: center; justify-content: center;
  padding: 1.5rem;
  /* Was .55/.75, which showed a dark green wall with a hint of a house in
     it. The card carries its own near-opaque white, so the page does not
     need the photo dimmed to stay readable. */
  background: linear-gradient(rgba(16, 32, 30, .22), rgba(16, 32, 30, .40)),
              url("/static/haus.jpg") center / cover no-repeat;
}
/* `fixed` sizes the image to the document rather than the viewport on iOS
   Safari, which blows the photo up to a blur. Desktop only. */
@media (min-width: 48rem) {
  body.anmeldeseite { background-attachment: scroll, fixed; }
}
.anmeldung {
  width: 100%; max-width: 26rem;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(6px);
  padding: 2.4rem 2rem 2rem;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 1px 2px rgba(10, 22, 20, .12), 0 24px 60px rgba(10, 22, 20, .28);
}
/* The same mark as the sidebar, so the front door and the hallway agree. */
.anmeldung .zeichen {
  display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 14px; margin-bottom: 1.1rem;
  background: var(--akzent-text); color: #fff;
  box-shadow: 0 3px 10px rgba(20, 104, 94, .3);
}
.anmeldung .zeichen .sym { width: 1.8rem; height: 1.8rem; }
.anmeldung .augenbraue {
  display: block; color: var(--leise); font-size: .74rem;
  letter-spacing: .09em; text-transform: uppercase; font-weight: 600;
}
.anmeldung h1 { font-size: 1.6rem; margin: .25rem 0 .3rem; letter-spacing: -.015em; }
.anmeldung .unterzeile { color: var(--leise); font-size: .88rem; margin: 0 0 1.4rem; }
.anmeldung label { margin: .9rem 0; }
.anmeldung label input {
  padding: .65rem .8rem; border-radius: 12px; font-size: .95rem;
}
.anmeldung label input:focus {
  outline: 2px solid var(--akzent); outline-offset: 1px;
  box-shadow: 0 0 0 4px var(--akzent-hell);
}
.anmeldung button {
  width: 100%; margin-top: 1.5rem; justify-content: center;
  background: linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, 0)),
              var(--akzent-text);
  color: #fff; border-color: var(--akzent-text);
  padding: .7rem; font-size: 1rem; font-weight: 600; border-radius: 12px;
}
.anmeldung button:hover { background: #0f564e; color: #fff; }
.anmeldung .fusszeile {
  margin: 1.4rem 0 0; color: var(--leise); font-size: .74rem; text-align: center;
}

/* --- rendered report --------------------------------------------------- */

.bericht {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--rundung); box-shadow: var(--schatten);
  padding: 1.2rem 1.5rem;
}
.bericht table { border-collapse: collapse; margin: .6rem 0; }
.bericht th, .bericht td { border: 1px solid var(--rand); padding: .35rem .65rem;
  text-align: left; }
.bericht blockquote { margin: .6rem 0; padding-left: .9rem;
  border-left: 3px solid var(--rand); color: var(--leise); }

/* --- phone ------------------------------------------------------------- */

@media (max-width: 48rem) {
  /* `auto 1fr`, or `min-height: 100vh` is shared out between the two rows and
     leaves a dead band under the nav. */
  body.app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .seitenleiste {
    height: auto; position: static; flex-direction: row; align-items: center;
    gap: .2rem; overflow-x: auto; padding: .5rem .6rem;
    border-right: none; border-bottom: 1px solid var(--rand);
  }
  .wortmarke { padding: 0 .5rem 0 .1rem; }
  .wortmarke .schrift { display: none; }
  .wortmarke .zeichen { width: 2rem; height: 2rem; border-radius: 10px; }
  .wortmarke .zeichen .sym { width: 1.25rem; height: 1.25rem; }
  .seitenleiste nav { flex-direction: row; }
  /* Six entries that do nothing yet are not worth a phone's screen width. */
  .nav-eintrag.bald, .fussnote { display: none; }
  .nav-eintrag span:not(.zaehler) { display: none; }
  .nav-eintrag.aktiv span:not(.zaehler) { display: inline; }
  .kopfzeile { padding: .6rem .9rem; }
  .suche { flex: 1 1 100%; max-width: none; order: 2; }
  .konto { order: 1; margin-left: 0; width: 100%; }
  main { padding: .9rem; }
  .kennzahl .weiter { margin-top: .6rem; }
  /* Four columns do not fit a phone. Which document, and when, is the part
     worth keeping; object and target folder are one tap away in the protocol. */
  .karte .daten.letzte .objekt, .karte .daten.letzte .pfad { display: none; }
  /* Twelve months stay twelve months - a chart that drops half the year is a
     different chart. The gap and the labels give up the room instead. */
  .balken { gap: .2rem; }
  .balken .saeulen { height: 7rem; }
  .balken small { font-size: .6rem; }
  .cashflow .legende { margin-left: 0; }
}


/* --- Bestand, Objekte, Suche ------------------------------------------- */

/* The table view under a chart, and the provenance list under a figure. Both
   are `<details>`: the numbers must be reachable (a hover tooltip does not
   exist on a phone, which is where this dashboard is read), and both would
   crowd the card if they were always open. */
.zahlentabelle { margin-top: 1rem; }
.zahlentabelle > summary {
  cursor: pointer; color: var(--leise); font-size: .85rem; padding: .3rem 0;
}
.zahlentabelle > summary:hover { color: var(--akzent-text); }
.zahlentabelle .tabelle { margin-top: .6rem; }

.pruefzeile, .treffer { margin-bottom: 1rem; }

/* Wo das Dokument jetzt liegt. Hier standen zwei Pfade nebeneinander, solange
   es zwei Bäume gab; jetzt ist es eine Zeile, und sie bricht mitten im Wort,
   weil ein Dropbox-Pfad keine Leerzeichen zum Umbrechen hat. */
.liegt {
  display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline;
  margin: .8rem 0; color: var(--leise); font-size: .82rem;
}
.liegt code { word-break: break-all; min-width: 0; font-size: .82rem; }

.aktionen {
  display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: flex-end;
  padding-top: .8rem; border-top: 1px solid var(--rand);
}
.aktionen form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }
.aktionen label, .filter label {
  display: flex; flex-direction: column; gap: .25rem;
  color: var(--leise); font-size: .8rem;
}
.aktionen select, .filter select, .filter input {
  font: inherit; font-size: .9rem; color: var(--text);
  padding: .4rem .5rem; border: 1px solid var(--rand);
  border-radius: 8px; background: var(--karte); max-width: 100%;
}

.filter {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end;
  margin-bottom: 1.4rem;
}
/* One filter row above everything it scopes, and the search term is the widest
   thing in it because it is what people actually change. */
.filter .weit { flex: 1 1 18rem; }
.filter .weit input { width: 100%; }

h2.abschnitt {
  display: flex; align-items: center; gap: .6rem;
  margin: 1.8rem 0 .8rem; font-size: 1.05rem;
}
h2.abschnitt .pille { font-size: .75rem; }

.treffer h3 { margin: 0 0 .3rem; font-size: 1rem; }
.ausschnitt {
  margin: .5rem 0; color: var(--text); font-size: .9rem; line-height: 1.5;
}
/* The hit marker. A background tint rather than a colour change, so the word
   is still ordinary text - colour never carries meaning on its own here. */
.ausschnitt mark {
  background: var(--orange-hell); color: var(--text);
  padding: 0 .15em; border-radius: 3px;
}
.treffer .pfad { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.grund {
  margin: .4rem 0; color: var(--orange-text); font-size: .9rem;
}

@media (max-width: 640px) {
  .aktionen, .aktionen form, .filter { flex-direction: column; align-items: stretch; }
}