/* Basic styling of the office app. Colours come exclusively from marke.css. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The height of the header: the header itself, and everything that begins right below it. */
:root {
  --kopfband-hoehe: 64px;
}

html {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--flaeche-abgesetzt);
  /* What is scrolled into view (the heading after a change of page) stops below the fixed header. */
  scroll-padding-top: var(--kopfband-hoehe);
}

body {
  margin: 0;
}

.buero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* The header stays at the top of the window however far the page is scrolled, and lies above the
   darkened background of a dialog (z-index 10 below): the feedback button sits here and must always
   be visible and usable. */
.kopfband {
  position: sticky;
  top: 0;
  z-index: 20;
  flex: none;
  background: var(--marke);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--kopfband-hoehe);
  padding: 0 24px;
}

.kopfband-marke {
  display: inline-flex;
  border-radius: 4px;
}

.kopfband-marke:focus-visible {
  outline: 2px solid var(--flaeche);
  outline-offset: 2px;
}

.logo {
  display: block;
  width: 48px;
  height: 48px;
}

/* The menu button of a narrow window; in a wide one the navigation stands at the left and this is gone. */
.menueband {
  display: none;
}

.menue-knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  font: inherit;
  font-weight: 600;
  color: var(--marke-dunkel);
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.menue-knopf:focus-visible {
  outline: 2px solid var(--marke);
  outline-offset: -2px;
}

.menue-zeichen {
  width: 1.25rem;
  height: 1.25rem;
}

.menue-aktuell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-leise);
}

.arbeitsflaeche {
  flex: 1;
  min-width: 0;
  width: 100%;
  /* Wide enough for the tables (check list, times) on a large monitor; running text stays readable
     because paragraphs and forms have their own, narrower limits. */
  max-width: 1600px;
  /* At the navigation, not in the middle of a wide monitor (12.10.2026): the way from a link to its page stays short. */
  margin: 0;
  padding: 32px 24px;
}

h1 {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 16px;
}

/* FocusOnNavigate puts the focus on the heading after every navigation. */
h1:focus {
  outline: none;
}

p {
  margin: 0 0 16px;
  max-width: 65ch;
}

a {
  color: var(--marke-dunkel);
}

.fehler {
  color: var(--fehler);
}

.kopfband-benutzer {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--flaeche);
}

.kopfband-benutzer form {
  margin: 0;
}

/* The name of the signed-in person is the link to "Mein Konto": underlined, so that it is seen as a link. */
.kopfband-name {
  color: var(--flaeche);
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: 4px;
}

.kopfband-name:hover {
  background: var(--marke-dunkel);
}

.kopfband-name:focus-visible {
  outline: 2px solid var(--flaeche);
  outline-offset: 2px;
}

.kopfband-name[aria-current="page"] {
  font-weight: 600;
}

.knopf-kopfband {
  font: inherit;
  color: var(--flaeche);
  background: transparent;
  border: 1px solid var(--flaeche);
  border-radius: 4px;
  padding: 3px 12px;
  font-size: 0.875rem;
  line-height: 1.4;
  cursor: pointer;
}

.knopf-kopfband:hover {
  background: var(--marke-dunkel);
}

.knopf-kopfband:focus-visible {
  outline: 2px solid var(--flaeche);
  outline-offset: 2px;
}

/* A button of the header that shows a symbol instead of a word (the feedback button): a target of
   40 by 40 around a symbol of 24 by 24, which is drawn in the colour of the text. */
.knopf-symbol {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--flaeche);
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.knopf-symbol svg {
  display: block;
  width: 24px;
  height: 24px;
}

.knopf-symbol:hover {
  background: var(--marke-dunkel);
}

.knopf-symbol:focus-visible {
  outline: 2px solid var(--flaeche);
  outline-offset: 2px;
}

/* Navigation on the left, the page next to it. */
.rumpf {
  flex: 1;
  display: flex;
}

.navigation {
  flex: none;
  width: 220px;
  display: flex;
  flex-direction: column;
  padding: 24px 0;
  background: var(--flaeche);
  border-right: 1px solid var(--linie);
  /* Stays in place under the header while the page scrolls (08.10.2026); a navigation longer than the
     window scrolls by itself. */
  position: sticky;
  top: var(--kopfband-hoehe);
  align-self: flex-start;
  box-sizing: border-box;
  height: calc(100vh - var(--kopfband-hoehe));
  height: calc(100dvh - var(--kopfband-hoehe));
  overflow-y: auto;
}

.navigation a {
  padding: 7px 24px;
  color: var(--text);
  text-decoration: none;
}

.navigation a:hover {
  background: var(--flaeche-abgesetzt);
}

/* The number at "Aufgaben": how much waits for the account. */
.nav-zahl {
  display: inline-block;
  min-width: 1.4em;
  margin-left: 8px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--marke);
  color: #fff;
  font-size: 0.8em;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

/* NavLink sets "active" on the link of the current page. The button of a group carries it while the
   group is closed and the current page lies inside it (Navigationsgruppe). */
.navigation a.active,
.navigation-gruppe > button.active {
  color: var(--marke-dunkel);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--marke);
}

/* A group of the navigation: a button that reads as a heading (small and quiet, like the heading of a
   fixed group) with the sign for open and closed, and below it the links of the group, further in. */
.navigation-gruppe {
  display: flex;
  flex-direction: column;
}

.navigation-gruppe > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 24px 6px;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-leise);
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.navigation-gruppe > button:hover {
  background: var(--flaeche-abgesetzt);
}

/* The sign for open and closed: two edges of a small square, drawn in the colour of the text. It
   points to the right while the group is closed and down while it is open. */
.navigation-gruppe > button::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.navigation-gruppe > button[aria-expanded="true"]::after {
  transform: rotate(45deg);
}

/* The heading of a group that does not open and close (navigation.json, "aufklappbar": false): small
   and quiet, so that it reads as a heading and not as one more link. */
.navigation-gruppe-titel {
  padding: 16px 24px 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.navigation-gruppe-liste {
  display: flex;
  flex-direction: column;
}

/* "display" above would otherwise win over the attribute and show the links of a closed group. */
.navigation-gruppe-liste[hidden] {
  display: none;
}

.navigation-gruppe-liste a {
  padding-left: 40px;
}

.formular {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
}

/* The sign-in page (AnmeldeLayout): a card in the middle of the window, without header and
   navigation — logo, heading, messages and form in one column, field and button over the full width. */
.anmeldeflaeche {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.anmelden {
  width: 100%;
  max-width: 400px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
}

.anmelden h1 {
  text-align: center;
  margin-bottom: 24px;
}

.anmelden-logo {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 12px;
}

.anmelden .formular {
  max-width: none;
}

.anmelden .formular .knopf {
  align-self: stretch;
  margin-top: 24px;
  padding: 12px 20px;
}

/* The password field with the eye at its right end, inside the frame. */
.passwortfeld {
  position: relative;
  display: flex;
}

.passwortfeld input {
  flex: 1;
  min-width: 0;
  padding-right: 48px;
}

.passwort-zeigen {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-leise);
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.passwort-zeigen[hidden] {
  display: none;
}

.passwort-zeigen:hover {
  color: var(--text);
}

.passwort-zeigen:focus-visible {
  outline: 2px solid var(--marke);
  outline-offset: -2px;
}

.passwort-zeigen svg {
  width: 20px;
  height: 20px;
}

/* Crossed out while the password can be read: one more press hides it again. */
.passwort-zeigen[aria-pressed="false"] .passwort-zeigen-strich {
  display: none;
}

@media (max-width: 480px) {
  .anmelden {
    padding: 24px 20px;
  }
}

.formular label {
  font-weight: 600;
  margin-top: 8px;
}

.formular input,
.wertzeile input {
  font: inherit;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--text-leise);
  border-radius: 4px;
  padding: 10px 12px;
}

.formular input:focus-visible,
.wertzeile input:focus-visible {
  outline: 2px solid var(--marke);
  outline-offset: 1px;
}

/* A field for several lines: the same frame as a field for one. It grows downwards only — the width
   belongs to the form. */
.formular textarea {
  font: inherit;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--text-leise);
  border-radius: 4px;
  padding: 10px 12px;
  min-height: 8em;
  resize: vertical;
}

.formular textarea:focus-visible {
  outline: 2px solid var(--marke);
  outline-offset: 1px;
}

.knopf {
  align-self: flex-start;
  margin-top: 16px;
  font: inherit;
  font-weight: 600;
  color: var(--flaeche);
  background: var(--marke);
  border: 0;
  border-radius: 4px;
  padding: 10px 20px;
  cursor: pointer;
}

.knopf:hover {
  background: var(--marke-dunkel);
}

.knopf:focus-visible {
  outline: 2px solid var(--marke-dunkel);
  outline-offset: 2px;
}

h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 24px 0 8px;
}

/* Below a heading of a section: without a rule of its own the browser draws it heavier than the h2 above it. */
h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 16px 0 4px;
}

/* Facts and value lines share one width for their names, so that the values of all blocks on a page start at the
   same place; a longer name widens only its own block. */
.angaben {
  display: grid;
  grid-template-columns: minmax(var(--etikett-breite, 11rem), max-content) 1fr;
  gap: 4px 24px;
  margin: 0 0 16px;
}

.angaben dt {
  color: var(--text-leise);
}

.angaben dd {
  margin: 0;
}

.hinweis {
  color: var(--warnung);
}

.erfolg {
  color: var(--erfolg);
}

/* What a field of the payroll office says about what was typed: one small line under it, kept empty when there is
   nothing to say, so the form does not jump while typing. */
.feldpruefung {
  margin: 2px 0 0;
  min-height: 1.3em;
  font-size: 0.85em;
  color: var(--text-leise);
}

/* The bank filled in from the IBAN: greyed, with "Ändern" beside it in the same line. */
.formular input.aus-iban {
  background: var(--flaeche-abgesetzt);
  color: var(--text-leise);
}

.feld-mit-knopf {
  display: flex;
  align-items: center;
  gap: 8px;
}

.feld-mit-knopf input {
  flex: 1;
  min-width: 0;
}

/* The conditions of a password: an open circle (U+25CB) until met, a tick (U+2713) afterwards. The
   colour is not the only signal. Written as escapes, so the file stays plain ASCII and does not
   depend on the encoding a browser assumes for a stylesheet. */
.bedingungen {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--text-leise);
  font-size: 0.9375rem;
}

.bedingungen li::before {
  content: "\25CB";
  display: inline-block;
  width: 1.5em;
}

.bedingungen li.erfuellt {
  color: var(--erfolg);
}

.bedingungen li.erfuellt::before {
  content: "\2713";
}

/* The notice for a lost connection; structure and class names from the Blazor project template. */
.components-reconnect-first-attempt-visible,
.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible,
.components-rejoining-animation {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
    display: block;
}


#components-reconnect-modal {
    background-color: var(--flaeche);
    color: var(--text);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button {
    border: 0;
    background-color: var(--marke);
    color: var(--flaeche);
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover {
        background-color: var(--marke-dunkel);
    }

    #components-reconnect-modal button:active {
        background-color: var(--marke);
    }

.components-rejoining-animation {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div {
        position: absolute;
        border: 3px solid var(--marke);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2) {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}

/* Tables of the office app: the list of employees and the table of permissions. */
.tabelle {
  width: 100%;
  border-collapse: collapse;
  background: var(--flaeche);
  margin: 0 0 16px;
}

.tabelle th,
.tabelle td {
  text-align: left;
  vertical-align: middle;
  padding: 8px 12px;
  border-bottom: 1px solid var(--linie);
}

/* At a desk the rows stand closer (12.10.2026): more of a list on one screen. A finger keeps the room above. */
@media (min-width: 768px) {
  .tabelle th,
  .tabelle td {
    padding: 5px 12px;
  }

  /* The row under the pointer: in a wide table the eye keeps it. Not in the planner, whose cells are cards. */
  .tabelle:not(.planer) tbody tr:hover {
    background: var(--flaeche-abgesetzt);
  }
}

/* A row that opens its entry (19.10.2026): the row carries "zeile-klickbar", its one link to the entry
   carries "zeile-ziel" and stretches over the whole row. It stays a real link: Tab reaches it, Enter
   opens it, middle click and Cmd-click open a new window. It does not look like a link; a quiet arrow
   on the right says the row leads somewhere. The link sits in the first cell. */
.tabelle tbody tr.zeile-klickbar {
  position: relative;
}

.tabelle tr.zeile-klickbar a.zeile-ziel {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

.tabelle tr.zeile-klickbar a.zeile-ziel::after {
  content: "\203A";
  content: "\203A" / "";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 12px;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--text-leise);
}

.tabelle tr.zeile-klickbar:hover a.zeile-ziel::after {
  color: var(--marke-dunkel);
}

.tabelle tr.zeile-klickbar a.zeile-ziel:focus-visible {
  outline: none;
}

.tabelle tr.zeile-klickbar a.zeile-ziel:focus-visible::after {
  outline: 2px solid var(--marke-dunkel);
  outline-offset: -2px;
}

/* Room for the arrow. */
.tabelle tr.zeile-klickbar > td:last-child {
  padding-right: 32px;
}

/* Buttons and other links of the row lie above the stretched link and keep working. */
.tabelle tr.zeile-klickbar :is(a, button, input, select, label):not(.zeile-ziel) {
  position: relative;
  z-index: 1;
}

.tabelle thead th {
  font-weight: 600;
  color: var(--text-leise);
}

.tabelle tbody th {
  font-weight: 400;
}

/* The header of a sortable column (19.10.2026, <Sortierkopf>): a button that looks like the header,
   a quiet arrow at the column in force. The arrow keeps its room, so that the header does not jump. */
.tabelle th > .sortierkopf {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

.tabelle th.rechts > .sortierkopf {
  flex-direction: row-reverse;
}

.tabelle th > .sortierkopf:hover {
  color: var(--marke-dunkel);
}

.tabelle th > .sortierkopf:focus-visible {
  outline: 2px solid var(--marke-dunkel);
  outline-offset: 2px;
  border-radius: 2px;
}

.sortierpfeil {
  display: inline-block;
  min-width: 0.8em;
  font-size: 0.8em;
  color: var(--marke-dunkel);
}

.tabelle th[aria-sort] > .sortierkopf {
  color: var(--text);
}

.recht-name {
  display: block;
  font-weight: 600;
}

.recht-erklaerung {
  display: block;
  color: var(--text-leise);
  font-size: 0.9375rem;
}

/* Read by a screen reader, not shown. */
.nur-vorleser {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Above a list: the search and the button that opens a dialog. */
.werkzeugleiste {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 0 16px;
}

/* The same frame as the fields of a form. Without "appearance" Safari draws a search field its own way. */
.werkzeugleiste input {
  flex: 1;
  max-width: 420px;
  font: inherit;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--text-leise);
  border-radius: 4px;
  padding: 10px 12px;
  -webkit-appearance: none;
  appearance: none;
}

/* A day is ten characters: its field does not grow with the bar. */
.werkzeugleiste input[type="date"] {
  flex: none;
  width: 10.5rem;
}

.werkzeugleiste input:focus-visible {
  outline: 2px solid var(--marke);
  outline-offset: 1px;
}

/* A button stands in a column of a form by default; in a row it needs neither the gap above nor
   its own alignment. */
.werkzeugleiste .knopf,
.dialog-knoepfe .knopf,
.rueckmeldung-knoepfe .knopf {
  align-self: auto;
  margin-top: 0;
}

/* The button below the sentence of a list that could not be read: the paragraph brings the gap. */
.ladefehler .knopf {
  margin-top: 0;
}

/* "Wird geladen …": quiet, and only after a moment — a load that is quick shows nothing instead of a
   flash. Until the window is connected it stands alone in the response (App.razor), in the place of
   the page; as soon as the window is connected, it goes — keyed to the mark Routes.razor draws in
   front of it, not to the office, which is gone when a page falls into the error content. */
.ladehinweis {
  color: var(--text-leise);
  animation: ladehinweis-erscheinen 150ms ease-out 400ms both;
}

body > .ladehinweis {
  margin: 0;
  padding: 32px 24px;
}

.fenster-verbunden ~ .ladehinweis {
  display: none;
}

@keyframes ladehinweis-erscheinen {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* The small labels in the state column of the list of employees and in the section "Anmeldung". */
.marke {
  display: inline-block;
  padding: 1px 8px;
  margin: 2px 4px 2px 2px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-size: 0.8125rem;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}

.marke-gesperrt {
  border-color: var(--fehler);
  color: var(--fehler);
}

.marke-warnung {
  border-color: var(--warnung);
  color: var(--warnung);
}

/* Dealt with: an anomaly acknowledged in the check list stays to be seen, quietly. */
.marke-erledigt,
.tabelle tr.quittiert td {
  color: var(--text-leise);
}

/* <Marke> writes a no-break space in front of every label (the separator for readers). Where the label
   opens its line that space would be an indent: taken back. */
.marke:first-child {
  margin-left: -0.27em;
}

.grund {
  display: block;
  color: var(--text-leise);
  font-size: 0.9375rem;
}

/* The username below the name in the list of employees, for whoever manages users. */
.benutzername {
  display: block;
  color: var(--text-leise);
  font-size: 0.9375rem;
}

/* A cell that says two things one below the other (street above postal code and city, mail above
   phone): the column stays narrow, also in a window of 390 px. */
.zellenzeile {
  display: block;
}

/* The place a search hit in a list: marked, but quietly — the text stays the text. */
mark.treffer {
  color: inherit;
  background: var(--treffer, #fff2b3);
  border-radius: 2px;
}

/* Customers that may already be the one being created: a hint in the dialog, never a refusal. */
#kunde-doppelt {
  margin: 12px 0 0;
}

#kunde-doppelt p {
  margin: 0 0 4px;
}

#kunde-doppelt ul {
  margin: 0;
  padding-left: 20px;
}

.aktionen {
  white-space: nowrap;
  text-align: right;
}

/* The buttons of the section "Anmeldung", in one row below what they change. */
.aktionen-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.aktionen-zeile .knopf {
  margin-top: 0;
}

.aktionen-zeile p {
  margin: 0;
}

/* The QR code with which a phone is set up (section "Handys"). The SVG brings its own black on white;
   large enough to be scanned from the screen, small enough for the dialog in 1280 × 720. */
.qr-code svg {
  display: block;
  width: 15rem;
  height: 15rem;
}

#handys .aktionen-zeile {
  margin-bottom: 12px;
}

/* The section "Klärfälle": the phone filter with its "select all of this phone", and the bar of what
   is ticked. In a row where there is room; the narrow layout lets them wrap. */
.klaerfaelle-werkzeuge {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  max-width: none;
  margin-bottom: 8px;
}

.klaerfaelle-werkzeuge label {
  margin-top: 0;
}

.klaerfaelle-werkzeuge .knopf {
  margin-top: 0;
}

.klaerfaelle-auswahl {
  margin-bottom: 8px;
}

#klaerfaelle-liste input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
}

.eigenes {
  color: var(--text-leise);
}

/* Dialogs lie over the page, all in one frame (Components/Layout/Dialogfenster.razor) and all drawn
   at one place in the layout, after the page. Nothing closes them but their own buttons. The notice
   for a lost connection is a native dialog in the top layer of the browser and therefore lies above
   this, whatever the z-index here says.

   Requirement of the client (02.10.2026): the feedback button must always be visible and usable,
   also over an open dialog, with mouse and keyboard. It sits in the header. Therefore:
   - A dialog of the office app is an ordinary element with a z-index and never a native <dialog>
     opened with showModal(): the top layer of the browser would lie above the header and make
     everything outside the dialog inert, the header included.
   - The darkened background begins below the header, and the header has the higher z-index: the
     header stays bright and can be clicked.
   - The focus is held by "inert", not by a Tab loop: while a dialog is open, the layout sets "inert"
     on .rumpf (navigation and page) and on every dialog below the top one (.dialog-ebene), never on
     the header. Tab therefore reaches the header and the top dialog and nothing else.
   - The one thing in the header that is inert while a dialog is open is the wordmark: it leads to
     the start page, and the dialog would go with everything typed into it.
   Whoever changes anything here must neither cover the header nor lock it out. */
.dialog-hintergrund {
  position: fixed;
  inset: var(--kopfband-hoehe) 0 0 0;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
  overflow-y: auto;
  /* A dialog scrolled to its end does not hand the mouse wheel on to the page behind. */
  overscroll-behavior: contain;
  background: var(--schleier);
}

/* Two dialogs, one over the other (the feedback dialog over a dialog of the page): only the veil of
   the top one darkens. The one below is inert and lies under that veil, with everything else. */
.dialog-ebene[inert] > .dialog-hintergrund {
  background: transparent;
}

.dialog {
  width: 100%;
  max-width: 560px;
  padding: 24px;
  border-radius: 8px;
  background: var(--flaeche);
}

.dialog h2 {
  margin-top: 0;
}

.dialog .formular {
  max-width: none;
}

.formular select {
  font: inherit;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--text-leise);
  border-radius: 4px;
  padding: 10px 12px;
}

.formular select:focus-visible {
  outline: 2px solid var(--marke);
  outline-offset: 1px;
}

.feldhinweis {
  margin: 0 0 4px;
  color: var(--text-leise);
  font-size: 0.9375rem;
}

/* Two fields of a form side by side, each with its label above it: entry and exit of an employee, first and last name. */
.feldpaar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}

.feldpaar > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.dialog-knoepfe {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

/* The second button of a pair: the one that does not carry out the action. */
.knopf-zweit {
  background: var(--flaeche);
  color: var(--marke-dunkel);
  box-shadow: inset 0 0 0 1px var(--marke-dunkel);
}

.knopf-zweit:hover {
  background: var(--flaeche-abgesetzt);
}

/* A button on a page is locked with aria-disabled while its command runs, not with "disabled": it
   must keep the focus. It looks the same either way. */
/* Locked: quiet, but readable (the text keeps its full colour; a pale button on white was hardly legible). */
.knopf:disabled,
.knopf[aria-disabled="true"] {
  color: var(--text);
  background: var(--flaeche-abgesetzt);
  box-shadow: inset 0 0 0 1px var(--text-leise);
  cursor: default;
}

.knopf:disabled:hover,
.knopf[aria-disabled="true"]:hover,
.knopf-zweit:disabled:hover,
.knopf-zweit[aria-disabled="true"]:hover {
  background: var(--flaeche-abgesetzt);
}

/* In a dialog the conditions of a password stand side by side and wrap, instead of one below the
   other: a dialog is tall enough as it is. The list on "Mein Konto" stays a column. */
.dialog .bedingungen {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}

/* The one small size for secondary actions everywhere: rows of lists, the head of the plan, the drive
   buttons, the header. The main button of a page or dialog stays the large one. */
.knopf-klein {
  padding: 3px 12px;
  font-size: 0.875rem;
  line-height: 1.4;
}

/* A link that looks like a button. */
a.knopf {
  display: inline-block;
  text-decoration: none;
}

.aktionen .knopf {
  margin-top: 0;
}

.aktionen > * + * {
  margin-left: 8px;
}

/* A checkbox with its label in one line, above a list. */
.schalter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
}

.schalter input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--marke);
}

.schalter input:focus-visible {
  outline: 2px solid var(--marke-dunkel);
  outline-offset: 2px;
}

/* The page "Rückmeldungen": one card per feedback — who, when and from where, the text, the thread,
   and the field to reply. */
.rueckmeldung {
  margin: 0 0 16px;
  padding: 12px 16px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 8px;
}

.rueckmeldung-kopf,
.verlauf-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin: 0 0 8px;
  color: var(--text-leise);
  font-size: 0.9375rem;
}

.rueckmeldung-kopf .marke,
.verlauf-kopf .marke {
  margin: 0;
}

.verlauf-name {
  color: var(--text);
  font-weight: 600;
}

/* What people wrote is shown as they wrote it: line breaks stay, and a word without a blank — a long
   address, a row of the same letter — breaks instead of pushing the page wide. The same goes for
   what comes from elsewhere and may be long: the page a feedback was given from, a name. */
.rueckmeldung-text,
.verlauf-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.rueckmeldung-kopf > *,
.verlauf-kopf > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The thread: one entry below the other, set off from the feedback by a line on the left. */
.verlauf {
  list-style: none;
  margin: 0 0 16px;
  padding: 0 0 0 16px;
  border-left: 3px solid var(--linie);
}

.verlauf li + li {
  margin-top: 12px;
}

.verlauf-kopf {
  margin-bottom: 2px;
}

.verlauf-text {
  margin: 0;
}

/* The reply field is as wide as a line of text, not as narrow as a form; a few lines are enough to
   begin with. */
.rueckmeldung-antwort {
  max-width: 65ch;
}

.rueckmeldung-antwort label {
  margin-top: 0;
}

.rueckmeldung-antwort textarea {
  min-height: 4.5em;
}

.rueckmeldung-antwort .fehler {
  margin: 0;
}

.rueckmeldung-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

/* The personnel file on the page of an employee: the field for a new note is as wide as a line of
   text, and the notes below it stand like the thread of a feedback (.verlauf). */
.akte-eingabe {
  max-width: 65ch;
  margin: 0 0 24px;
}

.akte-eingabe label {
  margin-top: 0;
}

.akte-eingabe textarea {
  min-height: 6em;
}

/* The second field of the upload (the file below the title) keeps its distance from the first. */
.akte-eingabe label:not(:first-child) {
  margin-top: 12px;
}

/* The button below a note that withdraws it, and below a document that removes it. */
.verlauf .knopf {
  margin-top: 8px;
}

/* The title of a document and the name its file had are text from outside: however long a word in
   them is, it breaks instead of widening the page. */
#dokumente li {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The screenshot of a feedback. In the feedback dialog: the preview of what will be sent, with the box
   that decides whether it goes along. It keeps its proportions and never grows taller than a third of
   a window, so that the text field and the buttons stay in view. */
.rueckmeldung-bildwahl {
  margin-top: 16px;
}

.rueckmeldung-vorschau {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 30vh;
  margin: 0 0 8px;
  border: 1px solid var(--linie);
  border-radius: 4px;
}

.rueckmeldung-bildwahl .schalter {
  margin: 0;
}

/* On the page "Rückmeldungen": the small image is a button that shows the large one. The button has
   no look of its own; the frame is the one of the image. */
.rueckmeldung-bild-knopf {
  display: block;
  margin: 0 0 16px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: zoom-in;
}

.rueckmeldung-bild-knopf:focus-visible {
  outline: 2px solid var(--marke);
  outline-offset: 2px;
}

.rueckmeldung-bild {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 240px);
  max-height: 160px;
  /* Room is kept before the image has arrived, so that the list does not jump when it does. */
  min-width: 80px;
  min-height: 45px;
  background: var(--flaeche-abgesetzt);
  border: 1px solid var(--linie);
  border-radius: 4px;
}

/* A dialog whose fields stand in pairs ("Mitarbeiter anlegen"): wider than one for a single column,
   so that it stays low enough for a window of 1280 x 720. */
.dialog-zweispaltig {
  max-width: 760px;
  padding: 12px 24px;
}

/* The veil of such a dialog keeps less air around it: the highest state (hour of the change of the
   clocks with a refusal showing) was 73 px too high for 1280 x 720 with the usual 48 px (WebKit renders a few pixels taller than Chromium). */
.dialog-hintergrund:has(> .dialog-zweispaltig) {
  padding-block: 4px;
}

.dialog-zweispaltig .formular label {
  margin-top: 4px;
}

.dialog-zweispaltig .dialog-knoepfe {
  margin-top: 10px;
}

/* In a pair, the conditions of a password stand next to the field, level with its label. */
.feldpaar .bedingungen {
  margin-top: 8px;
}

/* A dialog that shows an image is as wide as the window allows, not as wide as a form. */
.dialog-breit {
  width: auto;
  max-width: 100%;
}

.rueckmeldung-bild-gross {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  border: 1px solid var(--linie);
  border-radius: 4px;
}

/* "Meine Zeit": the four drive buttons wrap onto a second line in a narrow window. */
.stempel-fahrt {
  flex-wrap: wrap;
}

/* "Zeiten" (step 4c): the heading of a day with its button "Nachtragen" beside it. */
.zeiten-tagkopf {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 16px;
  margin: 16px 0 4px;
}

/* The day is the head of a group of rows, not of a section of the page: the size of the text around it. */
.zeiten-tagkopf h2 {
  margin: 0;
  font-size: 1rem;
}

/* The sums of a day are one line of values, not running text: the limit of a paragraph does not hold them. */
.zeiten-tagkopf .zeiten-tagessumme {
  max-width: none;
  margin: 0;
  color: var(--text-leise);
  font-size: 0.9375rem;
}

.zeiten-tagkopf .zeiten-auffaelligkeiten {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The button of the day stands at the end of its line; a second one ("Übernahme aufheben") right beside it. */
.zeiten-tagkopf > .knopf {
  margin-left: auto;
}

.zeiten-tagkopf > .knopf + .knopf {
  margin-left: 0;
}

.zeiten-offen {
  color: var(--warnung);
  font-weight: 600;
}

/* The signs: a warning in the colour of a warning; one that opens near the right edge opens to the left. */
.info-warnung .info-knopf {
  color: var(--warnung);
}

.info-rechts .info-text {
  left: auto;
  right: 0;
}

/* In a cell and in a label the sign is as high as the line, so that it never makes a row higher. */
@media (min-width: 768px) {
  td .info-knopf,
  .marke .info-knopf {
    width: 1.25rem;
    height: 1.25rem;
  }

  td .info-zeichen,
  .marke .info-zeichen {
    width: 1rem;
    height: 1rem;
  }

  /* One table for the eye: only the first day shows the names of the columns; the others keep them for a
     screen reader and for the widths, at no height. */
  .zeiten-tag ~ .zeiten-tag .zeiten-abschnitte thead th {
    padding-top: 0;
    padding-bottom: 0;
    border: 0;
    font-size: 0;
    line-height: 0;
  }

  .zeiten-abschnitte .knopf-klein,
  .zeiten-buchungen .knopf-klein {
    min-height: 0;
    padding-top: 1px;
    padding-bottom: 1px;
  }

  /* Every entry is one line: what is too long for its column is cut, and stands whole over the cell. */
  .zeiten-abschnitte td:nth-child(1),
  .zeiten-abschnitte td:nth-child(5),
  .zeiten-buchungen td[data-vermerk] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.marke .info {
  margin-left: 2px;
}

.zeiten-tagkopf .knopf {
  align-self: auto;
  margin-top: 0;
}

/* A booking that a correction replaced or that was withdrawn: it stays, struck through. */
.durchgestrichen {
  text-decoration: line-through;
  color: var(--text-leise);
}

/* The note of a booking (who changed it, when and why) stands in the table in a smaller size. */
.zeiten-buchungen td[data-vermerk] {
  font-size: 0.9375rem;
}

/* Phone view (portrait, 360 to 430 px wide; Android Chrome and iPhone Safari). Nothing here applies
   from 768 px up, so the office on the Mac stays exactly as it was. Nothing is hidden: what is wide
   gets its own box to scroll in, never the whole page, and what stands side by side stands in one
   column. Fields are at least 16 px (iOS zooms into a smaller one when it gets the focus) and
   everything that is tapped is at least 44 px high. Colours stay in marke.css. */
@media (max-width: 767px) {
  :root {
    --kopfband-hoehe: 60px;
  }

  .kopfband {
    padding: 0 12px;
    gap: 8px;
  }

  .logo {
    width: 40px;
    height: 40px;
  }

  /* The name may be long: it is cut with dots, the two buttons beside it never are. */
  .kopfband-benutzer {
    min-width: 0;
    gap: 8px;
  }

  .kopfband-benutzer > .kopfband-name {
    display: block;
    line-height: 44px;
    min-height: 44px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .kopfband-benutzer form {
    flex: none;
  }

  .knopf-kopfband {
    min-height: 44px;
    padding: 6px 12px;
  }

  .knopf-symbol {
    width: 44px;
    height: 44px;
  }

  .kopfband-marke {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  /* The navigation is folded away behind a menu button (a strip below the header with the name of the
     current page); the state is held by the layout, no script. It lies above the page when open, one
     entry below the other, each at least 44 px high. */
  .rumpf {
    flex-direction: column;
  }

  .menueband {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 12px;
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
  }

  .navigation {
    display: none;
    position: static;
    align-self: auto;
    height: auto;
    overflow-y: visible;
    width: auto;
    gap: 0;
    padding: 4px 12px 8px;
    border-right: 0;
    border-bottom: 1px solid var(--linie);
  }

  .navigation.menue-offen {
    display: flex;
  }

  .navigation a,
  .navigation-gruppe > button {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 4px;
  }

  .navigation a.active,
  .navigation-gruppe > button.active {
    box-shadow: inset 3px 0 0 var(--marke);
  }

  .navigation-gruppe-titel {
    padding: 8px 14px 0;
  }

  .navigation-gruppe-liste a {
    padding-left: 28px;
  }

  .arbeitsflaeche {
    padding: 16px 12px 32px;
    overflow-wrap: break-word;
  }

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    margin-top: 20px;
  }

  /* Fields: 16 px, 44 px high, as wide as the page. */
  .formular {
    max-width: none;
  }

  .formular input:not([type="checkbox"]):not([type="radio"]),
  .wertzeile input,
  .formular textarea,
  .formular select,
  .werkzeugleiste input:not([type="checkbox"]),
  .werkzeugleiste select {
    font-size: 16px;
    min-height: 44px;
    max-width: 100%;
  }

  .formular textarea {
    min-height: 8em;
  }

  .rueckmeldung-antwort textarea {
    min-height: 4.5em;
  }

  .knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }

  .knopf-klein {
    padding: 6px 14px;
  }

  .schalter {
    min-height: 44px;
  }

  .schalter input {
    flex: none;
    width: 24px;
    height: 24px;
  }

  .schalter label {
    padding: 8px 0;
  }

  /* Pairs of fields stand one below the other. */
  .feldpaar {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Facts: the name above the value, and a long value breaks instead of widening the page. */
  .angaben {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .angaben dt {
    margin-top: 8px;
    font-size: 0.9375rem;
  }

  .angaben dd {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* The bar above a list wraps: the search takes a line of its own. */
  .werkzeugleiste {
    flex-wrap: wrap;
  }

  .werkzeugleiste input {
    flex: 1 1 100%;
    min-width: 0;
  }

  .zeiten-wahl select {
    flex: 1 1 100%;
    min-width: 0;
  }

  .zeiten-tagkopf {
    flex-wrap: wrap;
  }

  /* A wide table scrolls inside its own box, the page does not. */
  .tabelle {
    display: block;
    /* The containing block of the hidden labels (.nur-vorleser), which are positioned absolutely:
       without it they stay out of the box's clipping and widen the page. */
    position: relative;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tabelle th,
  .tabelle td {
    padding: 10px 10px;
  }

  .tabelle .knopf {
    white-space: nowrap;
  }

  /* A link in a row (the name of an employee) is as high as the row's finger target. */
  .tabelle td a:not(.knopf),
  .tabelle th a:not(.knopf) {
    display: inline-block;
    padding: 10px 0;
    margin: -10px 0;
  }

  .qr-code svg {
    max-width: 100%;
    height: auto;
  }

  .akte-eingabe input[type="file"] {
    max-width: 100%;
    font-size: 16px;
  }

  /* The folder of a project: the file name a document had where it came from, and the line that names
     the document in the dialog "Dokument entfernen", are text from outside — a long one without a blank
     breaks instead of widening the page (the notes and the title already do, .verlauf-text). */
  #projektordner li[data-dokument],
  #projektordner li[data-dokument] .feldhinweis,
  #ordner-entfernen-welches {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* The box of a claim in "Klärfälle" is big enough for a finger. */
  #klaerfaelle-liste input[type="checkbox"] {
    width: 24px;
    height: 24px;
  }

  /* Dialogs fill the screen below the header and scroll inside themselves; the header with the
     feedback button stays above, as everywhere. */
  .dialog-hintergrund,
  .dialog-hintergrund:has(> .dialog-zweispaltig) {
    padding: 0;
    align-items: flex-start;
    justify-content: stretch;
  }

  .dialog,
  .dialog-zweispaltig,
  .dialog-breit {
    width: 100%;
    max-width: none;
    min-height: 100%;
    padding: 16px 12px 24px;
    border-radius: 0;
  }

  .dialog-zweispaltig .formular label {
    margin-top: 8px;
  }

  .dialog-knoepfe,
  .dialog-zweispaltig .dialog-knoepfe {
    flex-wrap: wrap;
    margin-top: 24px;
  }

  .dialog-knoepfe .knopf {
    flex: 1 1 8rem;
  }

  .rueckmeldung {
    padding: 12px;
  }

  .rueckmeldung-vorschau {
    max-height: 25vh;
  }

  .rueckmeldung-bild {
    max-width: 100%;
  }

  #components-reconnect-modal {
    width: auto;
    max-width: calc(100vw - 24px);
    margin: 20vh auto;
  }
}

/* A column of amounts stands right-aligned, so that the digits line up. */
.tabelle .rechts {
  text-align: right;
}

/* The week plan (page "Planer", step 5.2): crews as rows, days as columns. The table keeps the frame
   of every table; its cells are columns of cards. Seven crews and six days fit a window of 1440 px
   without scrolling sideways: the columns share the width evenly. */
.planer-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin: 0 0 16px;
}

.planer-kopf .knopf {
  align-self: auto;
  margin-top: 0;
  text-decoration: none;
}

.planer-woche {
  margin: 0 8px 0 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.tabelle.planer {
  table-layout: fixed;
}

.tabelle.planer th,
.tabelle.planer td {
  padding: 8px;
  border-right: 1px solid var(--linie);
}

.tabelle.planer th:last-child,
.tabelle.planer td:last-child {
  border-right: 0;
}

.tabelle.planer thead th:first-child,
.tabelle.planer tbody th {
  width: 13rem;
}

/* Today: a quiet band down the column, and a mark in its heading — the colour is not the only signal. */
.tabelle.planer .heute {
  background: var(--flaeche-abgesetzt);
}

.tabelle.planer thead .heute {
  color: var(--marke-dunkel);
  box-shadow: inset 0 3px 0 var(--marke);
}

/* Days in the past: still to be read, no longer to be changed. */
.tabelle.planer td.vergangen {
  color: var(--text-leise);
}

/* The line that sets the rows of single people apart from the crews. */
.tabelle.planer .plan-abschnitt th {
  background: transparent;
  color: var(--text-leise);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding-top: 1rem;
  text-transform: uppercase;
}

.planer-person {
  margin: 0.75rem 0 0;
}

.planer-person select {
  max-width: 100%;
  width: auto;
}

.plan-trupp {
  display: block;
  font-weight: 600;
}

.plan-trupp-zeile {
  display: block;
  color: var(--text-leise);
  font-size: 0.875rem;
  /* The members wrap inside the column of the crew; a header cell does not wrap by itself. */
  white-space: normal;
  overflow-wrap: anywhere;
}

/* One project in a cell. As a button it is the whole card: where one looks is where one clicks. */
.plan-karte {
  display: block;
  width: 100%;
  margin: 0 0 6px;
  padding: 6px 8px;
  font: inherit;
  text-align: left;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--marke);
  border-radius: 4px;
  overflow-wrap: anywhere;
}

button.plan-karte {
  cursor: pointer;
}

button.plan-karte:hover {
  background: var(--flaeche-abgesetzt);
}

button.plan-karte:focus-visible {
  outline: 2px solid var(--marke);
  outline-offset: 1px;
}

/* An entry of a person who is away: still there, and removable, but not carried out. */
.plan-karte.plan-karte-gedaempft {
  color: var(--text-leise);
  text-decoration: line-through;
}

.plan-karte[data-abgeschlossen] {
  border-left-color: var(--warnung);
}

.tabelle.planer td.vergangen .plan-karte {
  color: var(--text-leise);
  border-left-color: var(--linie);
}

.plan-karte-kopf {
  display: block;
  font-weight: 600;
}

.plan-karte-ort,
.plan-karte-notiz {
  display: block;
  font-size: 0.875rem;
}

.plan-karte-ort {
  color: var(--text-leise);
}

.plan-karte-notiz {
  margin-top: 2px;
  font-style: italic;
}

.plan-besetzung {
  display: block;
  margin: 0 0 6px;
  color: var(--text-leise);
  font-size: 0.8125rem;
}

.tabelle.planer .plan-neu {
  margin-top: 0;
  padding: 2px 10px;
  font-weight: 400;
}

/* "Nicht da" beside "+ Projekt" keeps a little distance from it. */
.tabelle.planer .plan-neu + .knopf {
  margin-left: 6px;
}

/* The planner at a desk, compact (12.10.2026): seven crews on one screen. A card says each thing in one
   line, a note in at most two — it is an instruction and stays to be read —, and the cell of a crew is
   name with "gesehen", foreman, members. In a narrow window everything stays as it was. */
@media (min-width: 768px) {
  .tabelle.planer th,
  .tabelle.planer td {
    padding: 5px 6px;
  }

  .plan-trupp {
    display: inline;
  }

  /* A header cell does not wrap by itself: here the name and "gesehen" may. */
  .tabelle.planer tbody th {
    white-space: normal;
  }

  /* Beside the name where there is room; a long name sends it to the next line, never out of the column. */
  .plan-trupp-zeile[data-gesehen] {
    display: inline-block;
    margin-left: 6px;
  }

  .plan-trupp-zeile[data-mitglieder],
  .plan-trupp-zeile[data-vorarbeiter],
  .plan-karte-kopf,
  .plan-karte-ort {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .plan-karte {
    margin-bottom: 4px;
    padding: 3px 8px;
  }

  .plan-karte-notiz {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    margin-top: 0;
  }

  /* Whoever has no crew, in one line. */
  #planer-ohne-trupp-liste {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
  }

  #planer-ohne-trupp-liste li + li::before {
    content: ", ";
    white-space: pre;
  }

  /* The check list: every entry one line. What was changed and who acknowledged are cut where they do not
     fit, and stand whole over the cell. */
  #pruefliste .pruefliste-art,
  #pruefliste .pruefliste-aenderung {
    white-space: nowrap;
  }

  #pruefliste .pruefliste-aenderung {
    max-width: 28rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #pruefliste .aktionen-gemischt .aktionen-text {
    max-width: 30rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #pruefliste .knopf-klein {
    min-height: 0;
    padding-top: 1px;
    padding-bottom: 1px;
  }
}

/* The list of projects in the dialog of a plan entry: a few rows to choose from, filtered by the search above it. */
.plan-projektwahl {
  width: 100%;
}

@media (max-width: 767px) {
  /* On a phone the plan is one block per crew with the days one below the other (see .tabelle-karten
     and the rules for .planer there); no sideways scrolling. */
  button.plan-karte {
    min-height: 44px;
  }

  .tabelle.planer .plan-neu {
    padding: 6px 14px;
  }
}

/* One value in one line (Wertzeile): name, value with labels, small buttons on the right. The editor
   (field, Speichern, Abbrechen) replaces value and buttons in the same line. It wraps in a narrow
   window and never widens the page. */
.wertzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0 0 6px;
  /* On a wide page the buttons stay near the value instead of at the far right edge. */
  max-width: 44rem;
}

/* As wide as the names of ".angaben" (its gap is 24px, the one of a value line 12px). */
.wertzeile-name {
  flex: none;
  min-width: calc(var(--etikett-breite, 11rem) + 12px);
  color: var(--text-leise);
}

.wertzeile-wert {
  flex: 1 1 10rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.wertzeile-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.wertzeile-wert > p {
  display: inline;
  margin: 0;
}

.wertzeile .knopf {
  margin-top: 0;
  align-self: auto;
}

.wertzeile-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* The value with its labels and its sign (i): on one middle line. As inline content the sign stood on
   the middle of the lower-case letters, a few pixels below the middle of the line. */
.wertzeile-wert:not(.wertzeile-editor) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 4px;
}

/* "Speichern" and "Abbrechen" never part: where the line is too short for both, both go below the field,
   "Abbrechen" to the right of "Speichern". */
.wertzeile-knoepfe {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 8px;
}

/* A line that is being edited may be wider than one that shows a value: field and both buttons in one line. */
.wertzeile:has(> .wertzeile-editor) {
  max-width: 56rem;
}

.wertzeile-editor input {
  width: 8rem;
  max-width: 100%;
  padding: 6px 10px;
}

/* The Meldungen below a line (a hint with a consequence, an error) sit close to it. */
.wertzeile-meldung {
  margin: 0 0 6px;
}

/* The sign (i) with its explanation (Info). The text is a small panel below the sign; in a narrow
   window it is a strip at the bottom of the screen, so that it can never widen the page. */
.info {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.info-knopf {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  font: inherit;
  line-height: 1;
  color: var(--marke-dunkel);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: help;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.info-zeichen {
  width: 1.125rem;
  height: 1.125rem;
}

.info-knopf:hover {
  background: var(--flaeche-abgesetzt);
}

.info-knopf:focus-visible {
  outline: 2px solid var(--marke-dunkel);
  outline-offset: 1px;
}

.info-text {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  width: max-content;
  max-width: 20rem;
  padding: 8px 12px;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
}

/* Over the sign (only where there is a pointer that hovers), at the keyboard focus, and after a press. */
.info-knopf:focus-visible ~ .info-text,
.info-offen .info-text {
  display: block;
}

@media (hover: hover) {
  .info:hover .info-text {
    display: block;
  }
}

/* Escape hides the text for as long as the pointer or the focus stays. */
.info.info-zu .info-text {
  display: none;
}

@media (max-width: 767px) {
  .info {
    position: static;
  }

  .info-text {
    position: fixed;
    top: auto;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 30;
    width: auto;
    max-width: none;
  }

  .wertzeile-name {
    min-width: 0;
    flex: 1 1 100%;
  }

  .wertzeile-aktionen {
    margin-left: 0;
  }

  .wertzeile input {
    font-size: 16px;
    min-height: 44px;
  }

  .info-knopf {
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* A field name with its explanation (Info) beside it, in one line. */
.feldname {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}

.formular .feldname label {
  margin-top: 0;
}

/* A heading with its explanation (Info) beside it. */
.titelzeile {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* A cell of the week plan that differs from what was published (step 5.3): a dashed frame and a word. */
.tabelle.planer td[data-unveroeffentlicht] {
  box-shadow: inset 0 0 0 2px var(--warnung);
}

.plan-unveroeffentlicht {
  display: block;
  margin: 0 0 6px;
  color: var(--warnung);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* The changes in the dialog before publishing: a long list scrolls inside the dialog, so that its
   buttons stay in the window. */
.plan-aenderungen {
  max-height: 40vh;
  margin: 0 0 12px;
  padding-left: 1.25rem;
  overflow-y: auto;
}

.plan-aenderungen li {
  margin: 0 0 6px;
}

/* The head of a single page (customer and state of a project) and its tabs (Reiterleiste): links in a
   row with a line under the one that is shown. The bar scrolls sideways in a narrow window and never
   widens the page. */
.seitenkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0 0 12px;
  color: var(--text-leise);
}

.reiter {
  display: flex;
  gap: 4px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--linie);
  overflow-x: auto;
  /* "auto" sideways makes the other direction "auto" as well, and the links reach one pixel below the
     bar (their marker lies on its line): without this the bar gets a scroll bar of its own at the right. */
  overflow-y: hidden;
}

.reiter a {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.reiter a:hover {
  color: var(--marke-dunkel);
  border-bottom-color: var(--linie);
}

.reiter a.reiter-aktiv {
  color: var(--marke-dunkel);
  border-bottom-color: var(--marke);
  font-weight: 600;
}

.reiter a:focus-visible {
  outline: 2px solid var(--marke);
  outline-offset: -2px;
}

/* A small button beside a heading keeps a little distance from it, and stands level with the heading:
   without this the margin above every button (".knopf") pushes it below the line. */
.titelzeile > .knopf {
  align-self: center;
  margin-top: 0;
  margin-left: 12px;
}

/* In a narrow window the tabs wrap onto a second row instead of running out of the window. */
@media (max-width: 767px) {
  .reiter {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .reiter a {
    padding: 0 12px;
  }
}

/* The field of a file as a drop zone (08.10.2026): a browser takes a file that is dropped onto the
   field itself, so the field is simply made large and framed — no script. A press opens the dialog. */
input[type="file"].ablagefeld {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 44rem;
  padding: 20px 16px;
  border: 2px dashed var(--linie);
  border-radius: 8px;
  background: var(--flaeche);
  cursor: pointer;
}

input[type="file"].ablagefeld:hover,
input[type="file"].ablagefeld:focus-visible {
  border-color: var(--marke);
}

/* A check box with its label and a sign (i) in one row: all three on one line. The label of a form
   has a distance above it that would push it below the box. */
.formular .schalter label,
.schalter label {
  margin: 0;
}

.schalter .info-knopf {
  display: inline-flex;
}

/* Fine alignment after looking at every view (08.10.2026).
   The sign (i) keeps its size under a finger but no longer makes its row higher than a row without
   one: two fields side by side start on the same line whether or not one of them has a sign. */
.feldname .info-knopf,
.titelzeile .info-knopf,
.schalter .info-knopf,
.wertzeile .info-knopf,
th .info-knopf {
  margin-block: -0.5rem;
}

.feldname,
.schalter {
  gap: 6px;
}

.titelzeile {
  gap: 6px;
}

/* The buttons of a value stand right behind the value, not at the far end of the row. */
.wertzeile-wert {
  flex: 0 1 auto;
}

.wertzeile-aktionen {
  margin-left: 4px;
}

/* "Meine Zeit": the buttons do not touch the choice of the project above them. */
#zeit-projektwahl {
  margin-bottom: 12px;
}

/* Times and lengths never break inside a cell: a row is one line high unless its text needs more. */
.zeiten-abschnitte td:nth-child(2),
.zeiten-abschnitte td:nth-child(3),
.zeiten-abschnitte td:nth-child(4),
.zeiten-buchungen td:first-child,
.tabelle td.zahl,
.tabelle th {
  white-space: nowrap;
}

/* What was noticed on a day stands at the left like everything else. */
.zeiten-auffaelligkeiten {
  justify-content: flex-start;
  text-align: left;
}

/* ======================================================================================================
   Fine alignment, second round (09.10.2026): cards on a phone, menu, one small button, one rhythm.
   ====================================================================================================== */

/* A label above a field stays on one line, so that the fields of a row start on one line. */
@media (min-width: 768px) {
  .feldpaar label {
    white-space: nowrap;
  }
}

/* The select of a bar (employee on "Zeiten", crew filter) has the frame and the size of every field. */
.werkzeugleiste select,
.planer-person select,
.klaerfaelle-werkzeuge select {
  font: inherit;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--text-leise);
  border-radius: 4px;
  padding: 10px 12px;
}

/* The bar of "Zeiten" holds small buttons only: at a desk the choice of the employee is as high as they are. */
@media (min-width: 768px) {
  .zeiten-wahl select {
    padding: 3px 8px;
    font-size: 0.875rem;
    line-height: 1.4;
  }
}

/* The first heading below the tabs begins where the tabs end. */
.reiter + section > h2:first-child,
.reiter + section > .titelzeile:first-child > h2,
.reiter + h2 {
  margin-top: 0;
}

.tabelle .aktionen-gemischt {
  white-space: normal;
}

.aktionen-text {
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
}

/* "Plus" variants and future changes: no bullets in a cell. */
.kuenftig {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  font-size: 0.875rem;
  color: var(--text-leise);
}

/* The sums of a month: small tiles in a row, not a list of seven lines. */
.angaben.summen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.angaben.summen > div {
  min-width: 7rem;
  padding: 6px 12px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 6px;
}

.angaben.summen dt {
  margin: 0;
  font-size: 0.8125rem;
}

.angaben.summen dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.angaben.summen > .summen-hinweis {
  min-width: 0;
  padding: 0;
  background: none;
  border: 0;
}

/* A pair of the day line (name and value) does not break in the middle. */
.zeiten-paar {
  white-space: nowrap;
}

/* The tables of the days share one grid of columns: every day lines up with the day above it. */
.zeiten-abschnitte,
.zeiten-buchungen {
  table-layout: fixed;
}

.zeiten-abschnitte th:nth-child(1) { width: 15rem; }
.zeiten-abschnitte th:nth-child(2) { width: 9rem; }
.zeiten-abschnitte th:nth-child(3) { width: 7rem; }
.zeiten-abschnitte th:nth-child(4) { width: 5.5rem; }
.zeiten-abschnitte th:nth-child(6) { width: 9rem; }
.zeiten-abschnitte th:nth-child(7) { width: 7rem; }

.zeiten-buchungen th:first-child { width: 7rem; }
.zeiten-buchungen th:last-child { width: 13rem; }
.zeiten-buchungen th:nth-child(3):not(:last-child) { width: 18rem; }

/* Roles and rights: the columns of the roles and their "ja" stand centred under each other. */
.tabelle.rechte thead th:not(:first-child),
.tabelle.rechte td {
  text-align: center;
}

.tabelle.rechte tbody th {
  white-space: normal;
  max-width: 40rem;
}

.tabelle.rechte .recht-erklaerung {
  font-size: 0.8125rem;
}

/* The head of the plan: small buttons, the label on the line of the text. */
.planer-kopf {
  gap: 8px;
}

/* ---- A phone (up to 767 px): cards, one rhythm, a tab bar with a base line per row ---- */
@media (max-width: 767px) {
  /* A table of rows becomes a list of cards: each row a block, each cell with the name of its column in
     front (data-label), empty cells gone, the actions at the end of the card. The head stays for a
     screen reader. */
  .tabelle.tabelle-karten,
  .tabelle-karten thead,
  .tabelle-karten tbody,
  .tabelle-karten tr,
  .tabelle-karten td,
  .tabelle-karten th {
    display: block;
  }

  .tabelle.tabelle-karten {
    overflow: visible;
    table-layout: auto;
    min-width: 0;
    width: 100%;
    background: none;
  }

  .tabelle-karten thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .tabelle-karten tbody tr {
    position: relative;
    margin: 0 0 12px;
    padding: 8px 12px;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 8px;
  }

  .tabelle-karten td,
  .tabelle-karten tbody th {
    position: relative;
    min-height: 1.5em;
    padding: 4px 0 4px 8.5rem;
    border: 0;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .tabelle-karten td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 4px;
    width: 8rem;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--text-leise);
  }

  /* The first cell is the title of the card. */
  .tabelle-karten tbody tr > :first-child:not(.karte-wahl),
  .tabelle-karten tbody th[scope="row"] {
    padding-left: 0;
    font-weight: 600;
  }

  .tabelle-karten .karte-wahl {
    position: absolute;
    top: 8px;
    right: 12px;
    padding: 0;
    z-index: 1;
  }

  .tabelle-karten tbody th[scope="row"] {
    padding-right: 2.25rem;
  }

  .tabelle-karten td.rechts,
  .tabelle-karten td.zahl {
    text-align: left;
  }

  .tabelle-karten td.aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 10px 0 0;
    border-top: 1px solid var(--linie);
    white-space: normal;
  }

  .tabelle-karten td.aktionen::before {
    content: none;
  }

  .tabelle-karten td.aktionen > * + * {
    margin-left: 0;
  }

  .tabelle-karten td[data-leer] {
    display: none !important;
  }

  /* A card that opens its entry: the link stretches over the card, not over its first cell. */
  .tabelle-karten tbody tr.zeile-klickbar {
    padding-right: 32px;
  }

  .tabelle-karten tr.zeile-klickbar > td:first-child {
    position: static;
  }

  .tabelle-karten tr.zeile-klickbar > td:last-child {
    padding-right: 0;
  }

  .tabelle-karten tr.quittiert {
    opacity: 0.85;
  }

  /* The week plan: a block per crew, the days one below the other (day, entries, "+ Projekt"). */
  .tabelle.planer tbody tr {
    padding: 0 12px 4px;
  }

  .tabelle.planer tbody th {
    margin: 0 -12px 4px;
    padding: 10px 12px;
    background: var(--flaeche-abgesetzt);
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid var(--linie);
  }

  .tabelle.planer td {
    padding: 8px 0;
    border-top: 1px solid var(--linie);
  }

  .tabelle.planer tbody th + td {
    border-top: 0;
  }

  .tabelle.planer td::before {
    position: static;
    display: block;
    width: auto;
    margin-bottom: 4px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
  }

  .tabelle.planer td.heute::before {
    color: var(--marke-dunkel);
  }

  .tabelle.planer td.vergangen::before {
    color: var(--text-leise);
  }

  .tabelle.planer td[data-unveroeffentlicht] {
    box-shadow: inset 3px 0 0 var(--warnung);
    padding-left: 8px;
  }

  .tabelle.planer .plan-neu {
    margin-top: 2px;
  }

  /* The sums: two tiles per row. */
  .angaben.summen {
    display: flex;
    gap: 8px;
  }

  .angaben.summen > div {
    flex: 1 1 8rem;
    min-width: 0;
  }

  .angaben.summen dt {
    margin-top: 0;
  }

  /* The tabs: each row has its own base line (the one tab that is shown has the thick one over it). */
  .reiter {
    gap: 0;
    border-bottom: 0;
    overflow: visible;
  }

  .reiter a {
    flex: 1 1 auto;
    justify-content: center;
    margin-bottom: 0;
    padding: 0 12px;
    background: linear-gradient(var(--linie), var(--linie)) bottom / 100% 1px no-repeat;
    background-origin: border-box;
  }

  /* The four drive buttons of "Meine Zeit": a grid of equal buttons, two by two. */
  .stempel-fahrt {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .stempel-fahrt #zeit-fahrt-titel {
    grid-column: 1 / -1;
  }

  .stempel-fahrt .knopf {
    width: 100%;
  }

  /* One rhythm in a form: 16 px from a field to the next label, in a pair as everywhere else. */
  .feldpaar {
    row-gap: 8px;
  }

  .formular .feldname {
    margin-top: 8px;
  }

  /* A dialog higher than the window scrolls inside itself; its row of buttons stays at the bottom edge. */
  .dialog,
  .dialog-zweispaltig,
  .dialog-breit {
    padding-bottom: 0;
  }

  .dialog .dialog-knoepfe,
  .dialog-zweispaltig .dialog-knoepfe,
  .dialog .rueckmeldung-knoepfe {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin: 16px -12px 0;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    background: var(--flaeche);
    border-top: 1px solid var(--linie);
  }
}

/* Postal code (narrow) and place (wide) side by side in the address of a dialog. */
.plz-ort {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0 12px;
}

.plz-ort > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* The notes of a new customer (15.10.2026): over the whole width below both columns of the dialog, one row per note — text,
   who sees it, remove. In a narrow window the row wraps; it never widens the dialog. */
.kunde-notizzeilen {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.kunde-notizzeile {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

.kunde-notizzeile textarea {
  flex: 1 1 18rem;
  min-width: 0;
}

.kunde-notizzeile select {
  flex: 0 0 auto;
  width: auto;
}

/* Every dialog begins at the same height below the header (the one that fits the highest state in a
   window of 1280 x 720); a dialog with a single column is no longer set lower than the others. */
.dialog-hintergrund {
  padding-block: 4px;
}

.dialog h2 {
  margin-bottom: 8px;
}

/* A heading with a small button or a sign beside it: the margins belong to the row, so that the button
   stands level with the text of the heading and not with its margin box. */
.titelzeile:has(> h2) {
  margin: 24px 0 8px;
}

.titelzeile > h2 {
  margin: 0;
}

/* The same below a heading of a section: the sign (i) beside an h3 stands on its middle line. */
.titelzeile:has(> h3) {
  margin: 16px 0 4px;
}

.titelzeile > h3 {
  margin: 0;
}

.dialog .titelzeile:has(> h2),
.reiter + section > .titelzeile:first-child {
  margin-top: 0;
}

/* The first column of the lists of checks keeps a name in one line; "Prüfen" and "Quittieren" stand side by side. */
#pruefliste td:first-child,
#klaerfaelle-liste tbody th {
  white-space: nowrap;
}

.tabelle .aktionen-gemischt {
  white-space: nowrap;
}

.aktionen-gemischt .aktionen-text {
  display: inline-block;
  max-width: 24rem;
  white-space: normal;
  vertical-align: middle;
}

@media (max-width: 767px) {
  /* A link as a button is centred like a button; the plan's heading cell fills the card. */
  a.knopf {
    display: inline-flex;
  }

  .tabelle.planer tbody th {
    width: auto;
  }

  .tabelle-karten tbody tr > :first-child:not(.karte-wahl),
  .tabelle-karten tbody th[scope="row"] {
    white-space: normal;
  }
}

/* The sign (i) beside the main heading stands on the middle line of the heading, not of its margin box. */
.titelzeile:has(> h1) {
  margin: 0 0 16px;
}

.titelzeile > h1 {
  margin: 0;
}

/* ---- The daily report (step 6.1): head fields, the table of names, the lists ---- */
.bericht-neu {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.bericht-neu input,
.bericht-feld input,
.bericht-spalten input,
.bericht-tabelle input,
.bericht-zeile input,
#bericht-person-dazu {
  font: inherit;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--text-leise);
  border-radius: 4px;
  padding: 5px 8px;
  min-width: 0;
}

.bericht-neu input:focus-visible,
.bericht-feld input:focus-visible,
.bericht-spalten input:focus-visible,
.bericht-tabelle input:focus-visible,
.bericht-zeile input:focus-visible,
#bericht-person-dazu:focus-visible {
  outline: 2px solid var(--marke);
  outline-offset: 1px;
}

#bericht-person-dazu {
  margin: 0 0 16px;
  max-width: 100%;
}

.bericht-kopfwert b {
  font-weight: 600;
  margin-right: 4px;
}

.bericht-felder {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 8px;
}

.bericht-feld {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.875rem;
  color: var(--text-leise);
}

.bericht-feld-gelesen b {
  color: var(--text);
  font-size: 1rem;
  font-weight: 400;
}

.bericht-spalten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

.bericht-spalten-titel {
  font-size: 0.875rem;
  color: var(--text-leise);
}

.bericht-spalten input {
  width: 7rem;
}

.bericht-rueckfrage {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 0.875rem;
}

.bericht-knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
}

.bericht-stunden {
  width: 5rem;
  text-align: right;
}

.bericht-tabelle input.bericht-stunden {
  width: 4.5rem;
}

.bericht-tabelle .zahl {
  text-align: right;
}

.bericht-gesamt {
  font-weight: 600;
  white-space: nowrap;
}

.bericht-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}

.bericht-zeile .bericht-lang {
  flex: 1 1 12rem;
}

.bericht-zeile .bericht-kurz {
  flex: 0 1 7rem;
}

/* The receipts of a line (photos of the delivery note from the app): small pictures, each opening the photo in a new tab. */
.bericht-belege {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.bericht-beleg img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--linie);
}

.bericht-beleg-fehlt {
  font-size: 0.875rem;
  color: var(--text-leise);
}

/* A wide table of names scrolls inside itself; on a phone it is a list of cards instead. */
@media (min-width: 768px) {
  .bericht-tabelle {
    display: block;
    overflow-x: auto;
    width: max-content;
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .bericht-neu,
  .bericht-rueckfrage {
    margin-left: 0;
  }

  .titelzeile:has(> .bericht-neu),
  .titelzeile:has(> .bericht-rueckfrage) {
    flex-wrap: wrap;
  }

  .bericht-tabelle td.zahl input {
    width: 100%;
    max-width: 8rem;
    text-align: right;
  }

  .bericht-zeile .bericht-lang {
    flex: 1 1 100%;
  }

  /* Quantity, unit and number of the delivery note side by side, the name above them. */
  .bericht-zeile .bericht-kurz {
    flex: 1 1 28%;
  }

  .bericht-spalten input {
    width: 6rem;
  }
}

/* The Regie report (step 6.2): the staff field takes the room that is left, the text of the services the whole width. */
.regie-breit {
  flex: 1 1 22rem;
}

.regie-breit input {
  width: 100%;
}

.regie-text {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--text-leise);
  border-radius: 4px;
  padding: 8px;
  resize: vertical;
}

.regie-text:focus-visible {
  outline: 2px solid var(--marke);
  outline-offset: 1px;
}

.regie-text-gelesen {
  white-space: pre-line;
  margin: 0 0 12px;
}

/* The link "PDF" of a completed report beside its state. */
.bericht-pdf {
  margin-left: 10px;
}

.bericht-pdfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

/* The sends of a report: one short line each, under the line with the sheet. */
/* The signature of the customer at a completed report: one line, the strokes as a small drawing beside it. */
.bericht-unterschrift {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

.bericht-unterschrift > svg {
  width: 150px;
  height: 60px;
  border-bottom: 1px solid currentColor;
  fill: none;
  stroke: currentColor;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bericht-versand {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  font-size: 0.875rem;
  color: var(--text-leise);
}

/* The filter bar of the overview of the reports: one line where there is room, the fields wrap below. */
.berichte-filter {
  flex-wrap: wrap;
}

.berichte-filter input[type="search"] {
  min-width: 200px;
}

/* "Ohne Tagesbericht" on the start page: a plain list, project and a small link on one line. */
.liste-schlicht {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.liste-schlicht li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}

.liste-schlicht .knopf {
  align-self: auto;
  margin-top: 0;
}

/* The field of the address on "Einstellungen": wide enough for a whole address. */
#bueroadresse-feld {
  flex: 1 1 22rem;
  width: 22rem;
  min-width: 16rem;
  max-width: 100%;
}

/* Earlier sheets of a corrected report: a little room after the label and between the links. */
#bericht-fruehere a {
  margin-left: 8px;
}

/* The form of an employee with the whole master data sheet: wider than a form of one column, so that a
   training (day, title, button) fits into a line. */
.formular.formular-blatt {
  max-width: 560px;
}

/* Several boxes in a row, each with its label (the classes of driving licence); they wrap. */
.auswahlzeile {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

.auswahlzeile .schalter {
  margin: 0;
}

.auswahlzeile .schalter label {
  font-weight: 400;
  margin-top: 0;
}

/* A training in the form: the day, what it was, and the button that removes the line. */
.fortbildung {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.fortbildung .knopf {
  margin-top: 0;
}

/* The paging of the list of feedback: small buttons with the page between them. */
.blaettern {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
}

.blaettern [aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
}

/* The preview of a pasted article list: a long list scrolls in itself, so that the dialog fits into the window. */
.artikel-vorschau {
  max-height: 16rem;
  overflow-y: auto;
}
/* A text of several lines as it was typed (the description of a task of the office). */
.mehrzeilig {
  white-space: pre-line;
}

/* The people of a new task: a long list scrolls in itself, so that the dialog fits into the window. */
.auswahlliste {
  max-height: 14rem;
  overflow-y: auto;
  margin: 0 0 12px;
  padding: 4px 8px;
  border: 1px solid var(--linie);
  border-radius: 6px;
}

/* The photos of a project (app rebuild D.4): a grid of pictures, each with its caption and who took it when. */
.foto-raster {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.foto img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  background: var(--text-leise);
}

.foto-beschriftung,
.foto-wer {
  margin: 4px 0 0;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.foto-beschriftung .knopf {
  margin-left: 6px;
}

.foto-wer {
  color: var(--text-leise);
}

.foto-bearbeiten {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.foto-bearbeiten input {
  flex: 1 1 100%;
  min-width: 0;
}

/* The open "Zu tun" on a card of the planner: a line of its own, not in italics like a note. */
.plan-karte-zutun {
  font-style: normal;
}

/* The number at "Dashboard": red, because it counts what the account has to do. */
.nav-zahl-rot {
  background: var(--fehler);
  color: var(--flaeche);
}

/* The dashboard (15.10.2026): two rows of five square tiles that fit the window — the edge follows the height of the
   window as well as its width, so 1440 × 900 needs no scrolling. What does not fit into a tile scrolls inside it. */
.start-kopf {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 18px;
}

.start-kopf h1 {
  margin: 0;
}

.start-kopf .datum {
  color: var(--text-leise);
}

.start-kopf .anpassen-knopf {
  margin: 0 0 0 auto;
}

/* Two rows: the page sets --spalten to half the tiles it shows, at least five (eleven tiles make six narrower columns). */
.kacheln {
  --kacheln-abzug: calc(var(--kopfband-hoehe) + 140px);
  display: grid;
  grid-template-columns: repeat(var(--spalten, 5), minmax(0, 1fr));
  gap: 16px;
  max-width: calc((100vh - var(--kacheln-abzug)) / 2 * var(--spalten, 5) + (var(--spalten, 5) - 1) * 16px);
}

.kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  aspect-ratio: 1 / 1;
  min-height: 0;
  padding: 12px 14px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
}

a.kachel:hover,
a.kachel:focus-visible {
  border-color: var(--marke);
}

.kachel-kopf {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.25;
}

.kachel-kopf svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--marke);
}

.kachel-kopf a {
  color: inherit;
  text-decoration: none;
}

.kachel-kopf a:hover {
  color: var(--marke-dunkel);
  text-decoration: underline;
}

.kachel.ruhig,
.kachel.ruhig .kachel-kopf svg {
  color: var(--text-leise);
}

/* The content below the head: it takes the rest of the square and scrolls when it is longer. */
.kachel-inhalt {
  flex: 1 1 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
  font-size: 0.875rem;
}

.kachel-inhalt ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.kachel-inhalt li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 6px;
}

/* The second part of a line (who, which day) below the first, a little quieter. */
.kachel-inhalt li .w {
  flex-basis: 100%;
  margin-left: 14px;
  color: var(--text-leise);
  font-size: 0.8125rem;
}

.kachel-inhalt .punkt {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--fehler);
  transform: translateY(-1px);
}

.kachel-inhalt .gross {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
}

.kachel-inhalt .gross small {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-leise);
}

.kachel-inhalt .hinweis-gross {
  font-size: 1.1rem;
  font-weight: 700;
}

.kachel-inhalt .leise,
.kachel-inhalt .quelle {
  color: var(--text-leise);
}

.kachel-inhalt .quelle {
  margin-top: auto;
  font-size: 0.75rem;
}

.kachel-inhalt .ok {
  color: var(--erfolg);
}

.kachel-inhalt .warn {
  color: var(--warnung);
}

.kachel-inhalt .fehler {
  margin: 0;
}

.kachel .stempel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kachel .stempel .knopf {
  margin: 0;
}

/* The red number at the corner of a tile. */
.zahl-rot {
  position: absolute;
  top: -9px;
  right: -9px;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--fehler);
  color: var(--flaeche);
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 24px;
  text-align: center;
  box-shadow: 0 0 0 3px var(--flaeche-abgesetzt);
}

/* "Anpassen": the tiles can be dragged, the ✕ hides one; what is hidden waits in the bar below. */
.kachel.bearbeiten {
  cursor: grab;
  outline: 2px dashed var(--marke);
  outline-offset: -2px;
}

.kachel.bearbeiten .zahl-rot {
  opacity: 0.35;
}

.kachel.gezogen {
  opacity: 0.4;
}

.kachel.ziel-vor {
  box-shadow: -5px 0 0 var(--marke);
}

.kachel.ziel-nach {
  box-shadow: 5px 0 0 var(--marke);
}

.kachel .ausblenden {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  background: var(--text);
  color: var(--flaeche);
  font-size: 0.75rem;
  cursor: pointer;
  z-index: 2;
}

/* "nach vorn" and "nach hinten" while arranging: the way without dragging, in the lower right corner. */
.kachel .verschieben {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  gap: 6px;
  z-index: 2;
}

.kachel .verschieben button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  color: var(--text);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.kachel .verschieben button:focus-visible,
.kachel .ausblenden:focus-visible {
  outline: 2px solid var(--marke);
  outline-offset: 2px;
}

.ablage-kacheln {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px dashed var(--linie);
  border-radius: 10px;
}

.ablage-titel {
  margin-right: 6px;
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-leise);
}

.ablage-kacheln .leise {
  color: var(--text-leise);
  font-size: 0.875rem;
}

.ablage-kacheln .chip {
  display: inline-flex;
  padding: 6px 12px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.ablage-kacheln .chip:hover {
  border-color: var(--marke);
}

/* Phone: two columns, the page scrolls; a tile is at least square and grows with its content, nothing scrolls inside
   it. Moving tiles needs a mouse, so there is no "Anpassen". */
@media (max-width: 767px) {
  .start-kopf h1 {
    font-size: 1.375rem;
  }

  .start-kopf .datum {
    width: 100%;
    font-size: 0.8125rem;
  }

  .start-kopf .anpassen-knopf {
    display: none;
  }

  .kacheln {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: none;
  }

  .kachel {
    aspect-ratio: auto;
    min-height: calc((100vw - 36px) / 2);
    padding: 10px 11px;
  }

  .kachel-inhalt {
    flex: 1 1 auto;
    overflow: visible;
  }

  .kachel-kopf {
    font-size: 0.84rem;
  }

  .kachel-inhalt .gross {
    font-size: 1.375rem;
  }

  .ablage-kacheln {
    display: none;
  }
}


/* The switch between week and year of the planner. */
.planer-ansicht {
  display: inline-flex;
  border: 1px solid var(--marke);
  border-radius: 6px;
  overflow: hidden;
}

.planer-ansicht a {
  padding: 4px 12px;
  color: var(--marke);
  font-weight: 600;
  text-decoration: none;
}

.planer-ansicht a.aktiv {
  background: var(--marke);
  color: var(--flaeche);
}

/* The year view of the planner: one narrow column per week, a bar per stretch of the same project. */
/* No scrolling box around the table: it would cut off the card of a bar. The weeks narrow instead. */
.jahr {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--flaeche);
  font-size: 0.75rem;
}

.jahr col.jahr-trupp {
  width: 11rem;
}

.jahr th,
.jahr td {
  padding: 0;
  border-bottom: 1px solid var(--linie);
  text-align: center;
}

.jahr thead th {
  font-weight: 600;
}

.jahr .jahr-monate th {
  padding: 6px 4px;
  text-align: left;
  border-left: 2px solid var(--text-leise);
}

.jahr .jahr-monate th:first-child {
  border-left: 0;
}

.jahr .jahr-wochen th {
  padding: 3px 0;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--text-leise);
}

.jahr .jahr-wochen th a {
  color: inherit;
  text-decoration: none;
}

.jahr .jahr-wochen th:first-child {
  font-size: 0.75rem;
  text-align: left;
  padding-left: 8px;
}

.jahr .jahr-monatsanfang {
  border-left: 2px solid var(--text-leise);
}

.jahr thead .heute {
  color: var(--marke-dunkel);
  font-weight: 700;
  box-shadow: inset 0 3px 0 var(--marke);
}

.jahr tbody th {
  padding: 4px 8px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jahr-trupp-name {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--marke-dunkel);
  overflow: hidden;
  text-overflow: ellipsis;
}

.jahr-trupp-zeile {
  display: block;
  font-weight: 400;
  color: var(--text-leise);
  overflow: hidden;
  text-overflow: ellipsis;
}

.jahr td {
  height: 36px;
  padding: 3px 1px;
  vertical-align: middle;
}

.jahr td.heute {
  background: var(--flaeche-abgesetzt);
}

.jahr-balken {
  position: relative;
  display: grid;
  gap: 1px;
  height: 28px;
  margin: 0 1px;
  border-radius: 4px;
  text-decoration: none;
}

.jahr-haupt,
.jahr-neben {
  background: var(--projekt);
}

.jahr-haupt {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  padding: 0 4px;
  overflow: hidden;
  border-radius: 4px;
  color: var(--flaeche);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.jahr-neben {
  grid-row: 2;
  border-radius: 3px;
}

/* A week that is over: the colour greyed, the text kept at full strength (an opacity would take the contrast with it). */
.jahr td.vergangen .jahr-haupt,
.jahr td.vergangen .jahr-neben {
  background: color-mix(in srgb, var(--projekt) 45%, var(--text-leise));
}

/* Not published yet: light stripes along the top edge, not under the text. */
.jahr td.unveroeffentlicht .jahr-haupt,
.jahr td.unveroeffentlicht .jahr-neben {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--flaeche) 55%, transparent) 0 4px, transparent 4px 8px) top / 100% 4px no-repeat, var(--projekt);
}

/* The card that opens on hover or focus: what stands behind the bar. */
.planer-karte {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 5;
  width: max-content;
  max-width: 20rem;
  padding: 10px 12px;
  background: var(--flaeche);
  color: var(--text);
  border: 1px solid var(--linie);
  border-radius: 8px;
  box-shadow: 0 6px 20px var(--schleier);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
}

.planer-karte-links {
  left: auto;
  right: 0;
}

.jahr-balken:hover .planer-karte,
.jahr-balken:focus-visible .planer-karte,
.monat-balken:hover .planer-karte,
.monat-balken:focus-visible .planer-karte {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.planer-karte-projekt {
  border-left: 4px solid var(--projekt);
  padding-left: 6px;
}

.planer-karte-projekt small {
  color: var(--text-leise);
  margin-left: 4px;
}

.planer-karte-stand {
  align-self: flex-start;
  margin-top: 4px;
  padding: 0 8px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--text-leise);
}

/* The month view of the planner: one column per working day, grouped by week. The rows and the card of a
   bar are those of the year view; no scrolling box either, for the same reason. */
.monat {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--flaeche);
  font-size: 0.8125rem;
}

.monat col.monat-trupp {
  width: 11rem;
}

.monat th,
.monat td {
  padding: 0;
  border-bottom: 1px solid var(--linie);
  text-align: center;
}

.monat .monat-wochen th {
  padding: 6px 4px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 2px solid var(--text-leise);
}

.monat .monat-wochen th:first-child {
  border-left: 0;
}

.monat .monat-wochen a {
  color: inherit;
  text-decoration: none;
}

.monat .monat-tage th {
  padding: 4px 0;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-leise);
}

.monat .monat-tage th b {
  display: block;
  font-size: 0.8125rem;
  color: var(--text);
}

.monat .monat-tage th:first-child {
  font-size: 0.75rem;
  text-align: left;
  padding-left: 8px;
}

.monat .monat-wochenanfang {
  border-left: 2px solid var(--text-leise);
}

.monat thead .heute {
  box-shadow: inset 0 3px 0 var(--marke);
}

.monat thead .heute b {
  color: var(--marke-dunkel);
}

.monat tbody th {
  padding: 4px 8px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.monat td {
  height: 38px;
  padding: 3px 1px;
  vertical-align: middle;
}

.monat .heute {
  background: var(--flaeche-abgesetzt);
}

.monat-balken {
  position: relative;
  display: flex;
  align-items: center;
  height: 28px;
  margin: 0 1px;
  padding: 0 4px;
  border-radius: 5px;
  background: var(--projekt);
  color: var(--flaeche);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}

.monat-balken-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Several projects on one day: the bars share the height of the cell. */
/* 11px: 12px would not fit the half height of 15px. */
.monat-balken-halb {
  height: 15px;
  justify-content: center;
  font-size: 0.6875rem;
}

.monat-balken-halb + .monat-balken-halb {
  margin-top: 1px;
}

/* As in the year view: the colour greyed, the text at full strength. */
.monat td.vergangen .monat-balken {
  background: color-mix(in srgb, var(--projekt) 45%, var(--text-leise));
}

/* Not published yet: light stripes along the top edge, not under the text, as in the year view. */
.monat td.unveroeffentlicht .monat-balken {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--flaeche) 55%, transparent) 0 5px, transparent 5px 10px) top / 100% 5px no-repeat, var(--projekt);
}

.monat-nicht-da {
  font-size: 0.6875rem;
  color: var(--text-leise);
}

/* The week card since 17.10.2026: the card leads to its project; a pencil in its corner opens the dialog, and where
   planning is allowed it can be dragged to another day or row and pulled at its edges (planer.js). */
.plan-karte {
  position: relative;
}

.plan-karte-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.plan-karte-link:hover .plan-karte-kopf {
  text-decoration: underline;
}

.plan-karte[data-ziehen] {
  padding-right: 28px;
  cursor: grab;
  user-select: none;
}

.plan-karte-bearbeiten {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text-leise);
  cursor: pointer;
}

.plan-karte-bearbeiten svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plan-karte-bearbeiten:hover,
.plan-karte-bearbeiten:focus-visible {
  color: var(--marke-dunkel);
  border-color: var(--linie);
  background: var(--flaeche-abgesetzt);
}

/* The edges to pull: invisible until the pointer is on the card. */
.plan-griff {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 7px;
  cursor: ew-resize;
}

.plan-griff-links {
  left: -4px;
}

.plan-griff-rechts {
  right: -1px;
}

.plan-karte:hover .plan-griff::after {
  content: "";
  position: absolute;
  top: 25%;
  bottom: 25%;
  left: 2px;
  width: 3px;
  border-radius: 2px;
  background: var(--marke);
}

.ziehen-aktiv,
.ziehen-aktiv * {
  cursor: grabbing !important;
}

.gezogen {
  opacity: 0.5;
}

/* Where the drop would land. */
.ziehen-aktiv td.ziel {
  outline: 2px dashed var(--marke);
  outline-offset: -3px;
}

@media (max-width: 767px) {
  .plan-griff {
    display: none;
  }
}

/* A bar of the month that can be dragged; its edges are pulled like those of a week card. */
.monat-balken[data-ziehen] {
  cursor: grab;
  user-select: none;
}

.monat-balken .plan-griff-links {
  left: 0;
}

.monat-balken .plan-griff-rechts {
  right: 0;
}

.monat-balken:hover .plan-griff::after {
  content: "";
  position: absolute;
  top: 20%;
  bottom: 20%;
  left: 2px;
  width: 3px;
  border-radius: 2px;
  background: var(--flaeche);
}

/* "Versionsverlauf" (17.10.2026, grouped 20.10.2026): one block per numbered version, newest first, and inside it one
   collapsible topic per line of buttons. The buttons read as headings with the sign for open and closed in front (the same
   sign as the groups of the navigation) and the number of lines quietly behind. */
.versionen {
  max-width: 48rem;
}

.version-stand + .version-stand {
  border-top: 1px solid var(--linie);
}

.version-stand-kopf,
.version-kategorie-kopf {
  margin: 0;
  font-size: 1rem;
}

.version-knopf {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  width: 100%;
  padding: 12px 8px;
  font: inherit;
  font-weight: 600;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}

.version-kategorie-kopf .version-knopf {
  padding: 6px 8px 6px 28px;
  font-weight: 500;
}

.version-knopf:hover {
  background: var(--flaeche-abgesetzt);
}

.version-knopf::before {
  content: "";
  flex: none;
  align-self: center;
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.version-knopf[aria-expanded="true"]::before {
  transform: rotate(45deg);
}

.version-stand-name {
  font-size: 1.0625rem;
}

.version-leise,
.version-zahl {
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--text-leise);
}

.version-zahl {
  margin-left: auto;
}

.version-stand > div {
  padding-bottom: 12px;
}

.version-aenderungen {
  margin: 0 0 8px;
  padding-left: 3.25rem;
}

.version-zeile {
  margin: 4px 0;
}

.version-zeile .version-leise {
  white-space: nowrap;
  margin-left: 6px;
}

/* Short reports without a project (17.10.2026): the text as it was written, the photos as small pictures that open large. */
.kurzbericht-text {
  white-space: pre-line;
}

.kurzbericht-foto {
  display: inline-block;
  margin-right: 4px;
}

.kurzbericht-foto img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 5px;
  vertical-align: middle;
}

/* The tabs of a project as lists (19.10.2026, mockup docs/mockups/dokumente.html): what a row removes or
   withdraws is a small sign at its end (Papierkorb.razor) instead of a button with a word. */
.knopf-entfernen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--text-leise);
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  vertical-align: middle;
}

.knopf-entfernen svg {
  display: block;
  width: 20px;
  height: 20px;
}

.knopf-entfernen:hover {
  color: var(--fehler);
  background: var(--flaeche-abgesetzt);
}

.knopf-entfernen:focus-visible {
  outline: 2px solid var(--marke-dunkel);
  outline-offset: 2px;
}

.knopf-entfernen[aria-disabled="true"] {
  opacity: 0.5;
  cursor: default;
}

/* A choice of a few options side by side, each a card that shows when it is chosen (in a dialog: who sees a
   document, which kind of report). A fieldset, so that a screen reader names the question with each option. */
.wahlreihe {
  border: 0;
  padding: 0;
  margin: 8px 0 0;
  min-width: 0;
}

.wahlreihe legend {
  font-weight: 600;
  padding: 0;
  margin: 0 0 6px;
}

.wahlreihe-optionen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.formular .wahlreihe-optionen label,
.wahlreihe-optionen label {
  flex: 1 1 0;
  min-width: 110px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  font-weight: 400;
  border: 1px solid var(--linie);
  border-radius: 6px;
  cursor: pointer;
}

.wahlreihe-optionen label:has(input:checked) {
  border-color: var(--marke);
  box-shadow: inset 0 0 0 1px var(--marke);
}

.formular .wahlreihe-optionen input,
.wahlreihe-optionen input {
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  accent-color: var(--marke);
}

.wahlreihe-optionen input:focus-visible {
  outline: 2px solid var(--marke-dunkel);
  outline-offset: 2px;
}

/* A row that names a group of the rows below it (the categories of the project folder). */
.tabelle .tabelle-gruppe th {
  padding-top: 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-leise);
  background: var(--flaeche-abgesetzt);
}

.tabelle-gruppe-anzahl {
  margin-left: 6px;
  font-weight: 400;
}

/* "Sichtbar für" in a row: small enough to sit in a line of the table. */
.sichtbar-feld {
  font: inherit;
  font-size: 0.875rem;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 4px;
  padding: 4px 6px;
}

.sichtbar-feld:focus-visible {
  outline: 2px solid var(--marke);
  outline-offset: 1px;
}

.ordner-wann {
  white-space: nowrap;
}

/* The text of a note keeps its lines. */
.notiz-text {
  white-space: pre-line;
  max-width: 48rem;
}

@media (max-width: 767px) {
  .tabelle-karten .tabelle-gruppe {
    margin: 12px 0 4px;
    padding: 0;
    background: none;
    border: 0;
  }

  .tabelle-karten .tabelle-gruppe th {
    padding: 0;
    background: none;
  }
}

/* "Wünsche und Fehler" as a chat (20.10.2026, mockup docs/mockups/buero/rueckmeldungen-chat.html): the conversations on the left, the
   one chosen on the right, both as high as the window; only the list and the conversation scroll, never the page. */
.gespraeche {
  display: grid;
  grid-template-columns: minmax(280px, 370px) minmax(0, 1fr);
  height: calc(100vh - var(--kopfband-hoehe) - 64px);
  height: calc(100dvh - var(--kopfband-hoehe) - 64px);
  min-height: 480px;
  border: 1px solid var(--linie);
  border-radius: 10px;
  overflow: hidden;
  background: var(--flaeche);
}

.gespraeche-liste {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--linie);
}

.gespraeche-kopf {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--linie);
}

.gespraeche-kopf h1 {
  margin: 0;
  font-size: 1.25rem;
}

.gespraeche-suche {
  width: 100%;
  font: inherit;
  font-size: 0.875rem;
  padding: 7px 10px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--flaeche-abgesetzt);
  color: var(--text);
}

.gespraeche-suche:focus {
  outline: 2px solid var(--marke);
  outline-offset: -1px;
  background: var(--flaeche);
}

.gespraeche-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-knopf {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 11px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--text);
  text-decoration: none;
  background: var(--flaeche);
}

.filter-knopf:hover {
  border-color: var(--marke);
}

.filter-knopf[aria-current="true"] {
  background: var(--marke);
  border-color: var(--marke);
  color: var(--flaeche);
}

.filter-zahl {
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.75;
}

.gespraeche-faeden {
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
}

.gespraeche-leer {
  margin: 0;
  padding: 24px 16px;
  color: var(--text-leise);
  font-size: 0.875rem;
  text-align: center;
}

.gespraeche-mehr {
  margin: 10px auto;
  align-self: center;
}

/* One conversation in the list: circle, name and time, below the newest text and the marks. */
.faden {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--flaeche-abgesetzt);
  color: var(--text);
  text-decoration: none;
}

.faden:hover {
  background: var(--flaeche-abgesetzt);
}

.faden[aria-current="page"] {
  background: color-mix(in srgb, var(--marke) 12%, var(--flaeche));
}

.faden > .bild-rund {
  grid-row: 1 / 3;
}

.faden-wer,
.faden-vorschau {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.faden-wer {
  font-weight: 600;
  font-size: 0.9375rem;
}

.faden-wann {
  justify-self: end;
  font-size: 0.75rem;
  color: var(--text-leise);
  white-space: nowrap;
}

.faden-vorschau {
  font-size: 0.875rem;
  color: var(--text-leise);
}

.faden-entwurf {
  color: var(--fehler);
  font-weight: 600;
}

.faden-marken {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
}

.faden-ungelesen .faden-wer,
.faden-ungelesen .faden-vorschau {
  color: var(--text);
  font-weight: 700;
}

.faden-ungelesen .faden-wann {
  color: var(--marke);
  font-weight: 700;
}

.faden-zahl {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--marke);
  color: var(--flaeche);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.faden-erledigt {
  opacity: 0.65;
}

.faden-erledigt .bild-rund {
  filter: grayscale(1);
}

.faden-erledigt-marke {
  padding: 0 7px;
  border: 1px solid var(--erfolg);
  border-radius: 999px;
  font-size: 0.71875rem;
  line-height: 18px;
  color: var(--erfolg);
  white-space: nowrap;
}

/* The circle of a person: initials on a colour that follows from the name. */
.bild-rund {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
}

.bild-rund.bild-klein {
  width: 28px;
  height: 28px;
  font-size: 0.6875rem;
}

.bild-farbe-0 { background: #00697b; }
.bild-farbe-1 { background: #7a5aa6; }
.bild-farbe-2 { background: #a85a16; }
.bild-farbe-3 { background: #2e7d32; }
.bild-farbe-4 { background: #ad1457; }
.bild-farbe-5 { background: #455a64; }
.bild-farbe-6 { background: #7a6400; }
.bild-farbe-7 { background: #1565c0; }

/* The conversation on the right. */
.gespraech {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--flaeche-abgesetzt);
}

.gespraech-leer {
  margin: auto;
  color: var(--text-leise);
  font-size: 0.875rem;
}

.gespraech-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}

.gespraech-zurueck {
  display: none;
  padding: 4px;
  margin-left: -6px;
  color: var(--marke-dunkel);
}

.gespraech-zurueck svg {
  display: block;
  width: 24px;
  height: 24px;
}

.gespraech-titel {
  flex: 1;
  min-width: 0;
}

.gespraech-titel h2,
.gespraech-titel span {
  display: block;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gespraech-titel h2 {
  font-size: 1rem;
}

.gespraech-titel span {
  font-size: 0.8125rem;
  color: var(--text-leise);
}

.gespraech-knoepfe {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gespraech-knoepfe .knopf {
  margin: 0;
}

.gespraech-zustand {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.zustand-offen {
  background: color-mix(in srgb, var(--warnung) 12%, var(--flaeche));
  color: var(--warnung);
}

.zustand-erledigt {
  background: color-mix(in srgb, var(--erfolg) 12%, var(--flaeche));
  color: var(--erfolg);
}

.gespraech .link-knopf {
  padding: 3px 4px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--marke-dunkel);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  white-space: nowrap;
}

.gespraech-verlauf {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 22px 10px;
  overflow-y: auto;
}

.gespraech-tag {
  align-self: center;
  margin: 12px 0 8px;
  padding: 2px 12px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--flaeche);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-leise);
}

.gespraech-neu {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--fehler);
}

.gespraech-neu::before,
.gespraech-neu::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--fehler) 35%, var(--flaeche));
}

.gespraech-ereignis {
  align-self: center;
  margin: 8px 0;
  font-size: 0.8125rem;
  color: var(--text-leise);
  text-align: center;
}

.gespraech-ereignis[data-art="Closed"] {
  color: var(--erfolg);
}

.gespraech-gelesen {
  align-self: flex-end;
  margin: 2px 4px 0;
  font-size: 0.75rem;
  color: var(--text-leise);
}

/* One message: from others on the left with circle and name, one's own on the right. */
.nachricht {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: min(640px, 82%);
}

.nachricht-eigen {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.nachricht-platz {
  flex: none;
  width: 28px;
}

.blase {
  min-width: 0;
  padding: 8px 12px 6px;
  border: 1px solid var(--linie);
  border-radius: 14px 14px 14px 4px;
  background: var(--flaeche);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.nachricht-eigen .blase {
  border-color: color-mix(in srgb, var(--marke) 25%, var(--flaeche));
  border-radius: 14px 14px 4px 14px;
  background: color-mix(in srgb, var(--marke) 12%, var(--flaeche));
}

.nachricht-folge .blase {
  border-radius: 14px;
}

.nachricht-erste .blase {
  border-top: 3px solid var(--marke);
}

.blase-name {
  margin-bottom: 2px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--marke-dunkel);
}

.blase-herkunft {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.blase-herkunft span {
  padding: 1px 8px;
  border-radius: 6px;
  background: var(--flaeche-abgesetzt);
  font-size: 0.75rem;
  color: var(--text-leise);
}

.blase-herkunft .herkunft-warnung {
  background: color-mix(in srgb, var(--warnung) 12%, var(--flaeche));
  color: var(--warnung);
}

/* What someone wrote keeps its line breaks and breaks a long word instead of widening the page. */
.blase-text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.blase .rueckmeldung-bild-knopf {
  display: block;
  margin: 6px 0 4px;
}

.blase-zeit {
  display: block;
  margin-top: 2px;
  font-size: 0.71875rem;
  color: var(--text-leise);
  text-align: right;
}

.gespraech-eingabe {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px 12px;
  background: var(--flaeche);
  border-top: 1px solid var(--linie);
}

.gespraech-eingabe textarea {
  flex: 1;
  min-width: 0;
  max-height: 160px;
  padding: 8px 14px;
  border: 1px solid var(--linie);
  border-radius: 18px;
  background: var(--flaeche-abgesetzt);
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--text);
  resize: none;
}

.gespraech-eingabe textarea:focus {
  outline: 2px solid var(--marke);
  outline-offset: -1px;
  background: var(--flaeche);
}

.gespraech-eingabe .knopf {
  margin: 0 0 4px;
  white-space: nowrap;
}

.gespraech-senden {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--marke);
  color: var(--flaeche);
  cursor: pointer;
}

.gespraech-senden[aria-disabled="true"] {
  background: color-mix(in srgb, var(--marke) 30%, var(--flaeche));
  cursor: default;
}

.gespraech-senden svg {
  width: 19px;
  height: 19px;
  transform: translateX(1px);
}

.gespraech-fehler {
  margin: 0;
  padding: 0 16px 10px;
  background: var(--flaeche);
}

/* Narrower: one half at a time — the list, or the conversation with its way back. */
@media (max-width: 1023px) {
  .gespraeche {
    grid-template-columns: minmax(0, 1fr);
  }

  .gespraeche .gespraech,
  .gespraeche-offen .gespraeche-liste {
    display: none;
  }

  .gespraeche-offen .gespraech {
    display: flex;
  }

  .gespraeche-liste {
    border-right: 0;
  }

  .gespraech-zurueck {
    display: block;
  }

  .gespraech-verlauf {
    padding: 14px 12px 8px;
  }

  .nachricht {
    max-width: 92%;
  }
}

@media (max-width: 767px) {
  /* The page is the conversation: from edge to edge, below header and menu strip. */
  .arbeitsflaeche:has(> .gespraeche) {
    padding: 0;
  }

  .gespraeche {
    height: calc(100vh - var(--kopfband-hoehe) - 53px);
    height: calc(100dvh - var(--kopfband-hoehe) - 53px);
    min-height: 0;
    border: 0;
    border-radius: 0;
  }

  .gespraech-kopf {
    flex-wrap: wrap;
    padding: 8px 12px;
  }

  .gespraech-knoepfe {
    width: 100%;
    justify-content: flex-end;
  }

  .gespraech-eingabe {
    flex-wrap: wrap;
  }

  .gespraech-eingabe textarea {
    flex-basis: 100%;
  }

  .gespraech-eingabe .knopf {
    margin-left: auto;
  }
}