/* Gestaltung der Plattform. Angelehnt an tourderoom.at (Vorgabe Manuel, 19.08.2026):
   dieselben Farben, dieselbe Schriftpaarung Work Sans fuer Ueberschriften und Roboto
   fuer Fliesstext, dieselbe freundliche Helligkeit. Die Werte stammen aus der Seite
   selbst: Blau #597EFC, Violett #815CFF, Grau #4C4C61 und #747989, Flaeche #F2F2FA.

   Ein Arbeitswerkzeug bleibt es trotzdem: Rot und Gruen stehen ausschliesslich fuer
   echten Zustand, also erlaubt und blockiert, nicht fuer Schmuck. */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root {
  /* Ruhigere Grundfarben als zuvor. Das Violett ist raus, ein Akzent genuegt, und
     die Flaechen tragen einen Hauch Blau statt eines Lila-Stichs. Rot und Gruen
     bleiben ausschliesslich echtem Zustand vorbehalten. */
  --grund:        #f4f6f9;
  --flaeche:      #ffffff;
  --flaeche-2:    #eef1f6;
  --linie:        #e5e9ef;
  --linie-stark:  #cfd6e0;
  --tinte:        #14171d;
  --tinte-2:      #4d5563;
  --tinte-3:      #7c8595;
  --akzent:       #015afc;   /* aus dem Logo */
  --akzent-tief:  #0142c4;
  --akzent-weich: #e6eeff;
  --zweit:        #015afc;
  --zweit-weich:  #e6eeff;
  --ja:           #16704f;
  --ja-weich:     #e3f2ea;
  --nein:         #a52f34;
  --nein-weich:   #fbeaea;
  --warn:         #7a4d00;
  --warn-weich:   #fcf2df;
  --radius:       9px;
  --radius-gross: 13px;
  --schrift:      'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --schrift-kopf: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --schatten:     0 1px 1px rgba(20,23,29,.04), 0 6px 20px rgba(20,23,29,.05);
}


@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --grund:        #131316;
    --flaeche:      #1a1a1e;
    --flaeche-2:    #222227;
    --linie:        #2e2e34;
    --linie-stark:  #43434b;
    --tinte:        #f2f2f0;
    --tinte-2:      #a9a8b0;
    --tinte-3:      #77767e;
    --akzent:       #8ba5ff;
    --akzent-tief:  #6b86ea;
    --akzent-weich: #1e2444;
    --zweit:        #a689ff;
    --zweit-weich:  #241d3d;
    --ja:           #63c39b;
    --ja-weich:     #14291f;
    --nein:         #eb8a8a;
    --nein-weich:   #2d1717;
    --warn:         #e0b76a;
    --warn-weich:   #2c2415;
    --schatten:     0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

h1, h2, h3, .marke, .zahl b, .knopf {
  font-family: var(--schrift-kopf);
  letter-spacing: -.01em;
}

body {
  font-family: var(--schrift);
  font-size: 14px;
  line-height: 1.5;
  color: var(--tinte);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- Gerüst */

.kopf {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 20px;
  height: 56px; padding: 0 20px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}
.marke { font-weight: 650; letter-spacing: -0.02em; font-size: 15px; }
.marke span { color: var(--tinte-3); font-weight: 450; }
.kopf nav { display: flex; gap: 2px; margin-left: 8px; }
.kopf nav a {
  padding: 6px 11px; border-radius: var(--radius);
  color: var(--tinte-2); text-decoration: none; font-weight: 500;
}
.kopf nav a:hover { background: var(--flaeche-2); color: var(--tinte); }
.kopf nav a[aria-current="page"] { background: var(--akzent-weich); color: var(--akzent); }
.kopf .rechts { margin-left: auto; display: flex; align-items: center; gap: 12px;
                color: var(--tinte-3); font-size: 13px; }

.huelle { max-width: 1180px; margin: 0 auto; padding: 26px 20px 80px; }

.titel { display: flex; align-items: baseline; gap: 14px; margin-bottom: 4px; }
.titel h1 { font-size: 21px; font-weight: 650; letter-spacing: -0.02em; }
.unterzeile { color: var(--tinte-2); margin-bottom: 22px; max-width: 70ch; }

.reihe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.abschnitt { margin-top: 34px; }
.abschnitt > h2 {
  font-size: 13px; font-weight: 650; letter-spacing: 0.02em;
  padding-bottom: 8px; margin-bottom: 14px;
  border-bottom: 1px solid var(--linie);
}

/* ---------------------------------------------------------------- Zahlen */

.zahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
          background: var(--linie); border: 1px solid var(--linie);
          border-radius: var(--radius-gross); overflow: hidden; }
.zahl { background: var(--flaeche); padding: 15px 16px; }
.zahl b { display: block; font-size: 25px; font-weight: 620; letter-spacing: -0.03em;
          font-variant-numeric: tabular-nums; }
.zahl span { color: var(--tinte-2); font-size: 12.5px; }
.zahl.gut b { color: var(--ja); }
.zahl.schlecht b { color: var(--nein); }
@media (max-width: 780px) { .zahlen { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------------------------- Tabelle */

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
  text-align: left; font-weight: 600; color: var(--tinte-2); font-size: 12px;
  padding: 0 12px 7px; border-bottom: 1px solid var(--linie-stark); white-space: nowrap;
}
tbody td { padding: 10px 12px; border-bottom: 1px solid var(--linie); vertical-align: top;
           overflow-wrap: anywhere; }
/* Breite Tabellen scrollen in sich, statt die ganze Seite breiter zu machen.
   Eine Seite, die waagrecht wandert, weil eine Zelle zu lang ist, wirkt kaputt. */
.tabellenrahmen { overflow-x: auto; }
tbody tr:hover td { background: var(--flaeche-2); }
td.zahlenspalte, th.zahlenspalte { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; }
.leise { color: var(--tinte-3); }

/* ---------------------------------------------------------------- Marken */

.marker {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 550; white-space: nowrap;
}
.marker.ja   { background: var(--ja-weich);   color: var(--ja); }
.marker.nein { background: var(--nein-weich); color: var(--nein); }
.marker.warn { background: var(--warn-weich); color: var(--warn); }
.marker.neutral { background: var(--flaeche-2); color: var(--tinte-2); }

/* ---------------------------------------------------------------- Knöpfe */

button, .knopf {
  font: inherit; font-weight: 550; cursor: pointer;
  padding: 7px 14px; border-radius: var(--radius);
  border: 1px solid var(--linie-stark); background: var(--flaeche); color: var(--tinte);
  text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap;          /* eine umgebrochene Beschriftung sieht kaputt aus */
  transition: transform .06s ease, background .12s ease;
}
button:hover, .knopf:hover { background: var(--flaeche-2); }
button:active, .knopf:active { transform: translateY(1px); }
button.haupt, .knopf.haupt {
  background: var(--akzent); border-color: var(--akzent); color: #fff;
}
button.haupt:hover { filter: brightness(1.08); }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, .knopf:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* ---------------------------------------------------------------- Hinweise */

.hinweis {
  display: flex; gap: 11px; padding: 13px 15px;
  border-radius: var(--radius-gross); border: 1px solid var(--linie);
  background: var(--flaeche); margin-bottom: 18px;
}
.hinweis.sperre { border-color: var(--nein); background: var(--nein-weich); }
.hinweis.achtung { border-color: var(--warn); background: var(--warn-weich); }
.hinweis b { display: block; margin-bottom: 2px; }
.hinweis p { color: var(--tinte-2); font-size: 13px; }
.hinweis .zeichen { font-weight: 700; font-size: 15px; line-height: 1.3; }

/* ---------------------------------------------------------------- Formular */

.feld { display: grid; gap: 5px; margin-bottom: 15px; }
.feld label { font-weight: 550; font-size: 13px; }
.feld .hilfe { color: var(--tinte-3); font-size: 12.5px; }
input[type=text], input[type=url], input[type=date], select, textarea {
  font: inherit; padding: 8px 10px; border-radius: var(--radius);
  border: 1px solid var(--linie-stark); background: var(--flaeche); color: var(--tinte);
  width: 100%;
}
input::placeholder { color: var(--tinte-3); }
.haken { display: flex; gap: 9px; align-items: flex-start; padding: 9px 0;
         border-bottom: 1px solid var(--linie); }
.haken:last-child { border-bottom: 0; }
.haken input { margin-top: 3px; flex-shrink: 0; }
.haken span { font-size: 13px; }
.haken .norm { color: var(--tinte-3); font-size: 12px; display: block; }

/* ---------------------------------------------------------------- Leerzustand */

.leerzustand { padding: 44px 20px; text-align: center; color: var(--tinte-2);
               border: 1px dashed var(--linie-stark); border-radius: var(--radius-gross); }
.leerzustand b { display: block; color: var(--tinte); margin-bottom: 5px; }

/* ---------------------------------------------------------------- Skelett */

.skelett { background: linear-gradient(90deg, var(--flaeche-2) 25%,
           var(--linie) 50%, var(--flaeche-2) 75%);
           background-size: 200% 100%; border-radius: var(--radius); height: 13px; }
@media (prefers-reduced-motion: no-preference) {
  .skelett { animation: schimmer 1.4s linear infinite; }
}
@keyframes schimmer { to { background-position: -200% 0; } }

/* ---------------------------------------------------------------- Zwei Spalten */

.zweispaltig { display: grid; grid-template-columns: 1.6fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 900px) { .zweispaltig { grid-template-columns: 1fr; } }

.postfach { display: grid; grid-template-columns: 320px 1fr; gap: 0;
            border: 1px solid var(--linie); border-radius: var(--radius-gross);
            overflow: hidden; min-height: 460px; }
.postfach .liste { border-right: 1px solid var(--linie); background: var(--flaeche);
                   overflow-y: auto; max-height: 620px; }
.postfach .eintrag { padding: 12px 14px; border-bottom: 1px solid var(--linie);
                     cursor: pointer; }
.postfach .eintrag:hover { background: var(--flaeche-2); }
.postfach .eintrag[aria-selected="true"] { background: var(--akzent-weich); }
.postfach .eintrag b { display: block; font-size: 13px; }
.postfach .eintrag p { color: var(--tinte-2); font-size: 12.5px;
                       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.postfach .inhalt { padding: 20px 22px; background: var(--flaeche); }
@media (max-width: 900px) { .postfach { grid-template-columns: 1fr; }
                            .postfach .liste { max-height: 280px; } }

.entwurf { border: 1px solid var(--linie); border-radius: var(--radius);
           padding: 14px; background: var(--flaeche-2); white-space: pre-wrap;
           font-size: 13.5px; margin-top: 12px; }

/* ---------------------------------------------------------------- Anmeldung */

.anmeldeseite {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  background:
    radial-gradient(900px 500px at 15% -10%, var(--akzent-weich), transparent 60%),
    radial-gradient(700px 500px at 90% 110%, var(--zweit-weich), transparent 55%),
    var(--grund);
  padding: 24px;
}
.anmeldekarte {
  width: min(420px, 100%);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
  padding: 34px 32px 28px;
}
.anmeldekarte h1 { font-size: 24px; margin-bottom: 22px; }
.anmeldekarte .unterzeile { margin-bottom: 22px; font-size: 14.5px; }
.feld { display: block; margin-bottom: 14px; }
.feld span { display: block; font-size: 13px; color: var(--tinte-2); margin-bottom: 6px; }
.feld input {
  width: 100%; padding: 11px 12px; font: inherit; color: var(--tinte);
  background: var(--flaeche); border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
}
.feld input:focus { outline: 2px solid var(--akzent); outline-offset: 1px; border-color: transparent; }
.knopf.voll { width: 100%; justify-content: center; margin-top: 6px; }
.hinweis-fehler {
  margin-top: 14px; padding: 10px 12px; border-radius: var(--radius);
  background: var(--nein-weich); color: var(--nein); font-size: 14px;
}

/* ---------------------------------------------------------------- Postfach */

.postfach { display: grid; grid-template-columns: 340px 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .postfach { grid-template-columns: 1fr; } }

.faedenliste {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius-gross); overflow: hidden;
}
.faedenkopf { padding: 12px; border-bottom: 1px solid var(--linie); display: flex; gap: 8px; }
.faedenkopf input {
  flex: 1; padding: 8px 10px; font: inherit; border: 1px solid var(--linie-stark);
  border-radius: var(--radius); background: var(--flaeche); color: var(--tinte);
}
.faden {
  display: block; width: 100%; text-align: left; padding: 12px 14px; cursor: pointer;
  border: 0; border-bottom: 1px solid var(--linie); background: transparent;
  font: inherit; color: var(--tinte);
}
.faden:hover { background: var(--flaeche-2); }
.faden[aria-current="true"] { background: var(--akzent-weich); }
.faden .zeile1 { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.faden .wer { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faden.neu .wer::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px;
  border-radius: 50%; background: var(--akzent);
}
.faden .wann { color: var(--tinte-3); font-size: 12px; white-space: nowrap; }
.faden .betreff { font-size: 13.5px; color: var(--tinte-2); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faden .vorschau { font-size: 13px; color: var(--tinte-3); margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.verlauf {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius-gross); padding: 20px 22px; min-height: 60vh;
}
.blase {
  border: 1px solid var(--linie); border-radius: var(--radius-gross);
  padding: 14px 16px; margin-bottom: 14px; max-width: 78%;
}
.blase.ein { background: var(--flaeche-2); }
.blase.aus { background: var(--akzent-weich); margin-left: auto; border-color: transparent; }
.blase .kopfzeile { font-size: 12.5px; color: var(--tinte-3); margin-bottom: 6px;
  display: flex; gap: 10px; justify-content: space-between; }
.blase p { white-space: pre-wrap; font-size: 14.5px; line-height: 1.55; }

.antwortfeld { border-top: 1px solid var(--linie); margin-top: 18px; padding-top: 16px; }
.antwortfeld textarea {
  width: 100%; min-height: 130px; padding: 12px; font: inherit; line-height: 1.55;
  border: 1px solid var(--linie-stark); border-radius: var(--radius);
  background: var(--flaeche); color: var(--tinte); resize: vertical;
}
.antwortfeld textarea:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.antwortzeile { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.antwortzeile .hinweis { font-size: 13px; color: var(--tinte-3); }

/* ---------------------------------------------------------------- Konten */

.kontentabelle td .rolle {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12.5px;
  background: var(--zweit-weich); color: var(--zweit);
}
.kontentabelle td .rolle.betreiber { background: var(--akzent-weich); color: var(--akzent); }
.gesperrt-zeile { opacity: .55; }
.passwortkasten {
  margin-top: 14px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--warn-weich); color: var(--warn); font-size: 14px;
}
.passwortkasten code { font-size: 15px; font-weight: 700; letter-spacing: .02em; }

.formzeile { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.formzeile .feld { margin-bottom: 0; min-width: 190px; }
.formzeile select {
  width: 100%; padding: 11px 12px; font: inherit; color: var(--tinte);
  background: var(--flaeche); border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
}
.knopf.leise { background: var(--flaeche-2); color: var(--tinte-2); border: 1px solid var(--linie); }
.knopf.leise:hover { background: var(--akzent-weich); color: var(--akzent); }
.marke-klein {
  display: inline-block; margin-top: 6px; margin-right: 5px; padding: 1px 8px;
  border-radius: 999px; font-size: 12px; background: var(--flaeche-2); color: var(--tinte-2);
}
.marke-klein.interesse { background: var(--ja-weich); color: var(--ja); }
.marke-klein.absage { background: var(--nein-weich); color: var(--nein); }
.marke-klein.rueckfrage { background: var(--akzent-weich); color: var(--akzent); }
.antwortzeile .hinweis:empty { display: none; }

/* Abschnitte der Kontenseite: die Formularzeile braucht Luft nach unten, sonst
   klebt die naechste Ueberschrift daran (19.08.2026 im Bild gesehen). */
main .karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: 22px 24px;
  margin-top: 22px;
  box-shadow: var(--schatten);
}
main .karte h2 { font-size: 17px; margin-bottom: 14px; }
main .karte + .karte { margin-top: 18px; }
.kontentabelle td, .kontentabelle th { padding: 11px 10px; }
.kontentabelle td:last-child { display: flex; gap: 8px; justify-content: flex-end; }

/* Der Hauptknopf ist gefuellt und traegt das Blau der Marke. Auf der Anmeldeseite
   und beim Anlegen ist genau ein Knopf die Hauptsache, alles andere bleibt leise. */
.knopf.voll,
form#neu button[type="submit"],
.antwortzeile .knopf:not(.leise) {
  background: var(--akzent);
  border-color: var(--akzent);
  color: #fff;
  font-weight: 600;
  padding: 11px 18px;
}
.knopf.voll:hover,
form#neu button[type="submit"]:hover,
.antwortzeile .knopf:not(.leise):hover {
  background: var(--akzent-tief);
  border-color: var(--akzent-tief);
  color: #fff;
}
.kopf .rechts select {
  font: inherit; padding: 6px 10px; border-radius: var(--radius);
  border: 1px solid var(--linie-stark); background: var(--flaeche);
  color: var(--tinte); max-width: 210px;
}


/* Kopfzeile auf kleinen Bildschirmen. Bis 27.08.2026 lief sie mit fester Breite
   weiter, dadurch liess sich JEDE Seite am Telefon waagrecht schieben, und die
   Schaltflaeche rechts stand ausserhalb des Bildes. Die Navigation darf scrollen,
   die Seite nicht. */
@media (max-width: 760px) {
  .kopf { flex-wrap: wrap; row-gap: 8px; padding: 10px 14px; }
  .kopf nav {
    order: 3; width: 100%; margin-left: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .kopf nav::-webkit-scrollbar { display: none; }
  .kopf nav a { white-space: nowrap; }
  .kopf .rechts { margin-left: auto; gap: 8px; }
  .kopf .rechts > span:not(.marker) { display: none; }
  .huelle { padding: 18px 14px 60px; }
  .zahlen { grid-template-columns: repeat(2, 1fr); }
  .titel h1 { font-size: 19px; }

  /* Tabellen ohne Rahmen sprengten die Seite. Statt jede einzelne Seite anzufassen,
     darf hier jede Tabelle in ihrem eigenen Kasten scrollen. Die Seite selbst
     bleibt stehen, das ist die Regel: waagrecht scrollt der Inhalt, nie das Blatt. */
  .abschnitt > table, .huelle > table, .zweispaltig > div > table {
    display: block; overflow-x: auto; white-space: nowrap;
  }
  .zweispaltig { grid-template-columns: 1fr; }
}


/* ================================================================ Feinschliff
   27.08.2026. Die Oberflaeche war richtig, aber zu laut: viele gefuellte Chips,
   krachende Rahmen, Ueberschriften in derselben Staerke wie Fliesstext. Hier wird
   nichts umgebaut, nur ruhiger gestellt. Eine Schrift, ein Akzent, Haarlinien
   statt Kaesten, und Zahlen mit gleicher Breite, damit Spalten stehen. */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--schrift); letter-spacing: -.005em; }

h1, h2, h3, .marke, .zahl b, .kennzahl .wert {
  font-family: var(--schrift-kopf);
  font-feature-settings: "ss01" 1;
}
.titel h1 { font-size: 22px; font-weight: 600; letter-spacing: -.028em; }
.unterzeile { font-size: 13.5px; line-height: 1.55; }

/* Zahlen stehen untereinander, sonst zappeln die Spalten. */
.zahl b, .kennzahl .wert, td, .fadenzeile .wann, .anzahl {
  font-variant-numeric: tabular-nums;
}

/* Kopfzeile: Haarlinie statt Kante, Navigation etwas leiser. */
.kopf { border-bottom: 1px solid var(--linie); box-shadow: none; }
.kopf nav a { font-size: 13px; padding: 6px 11px; border-radius: 7px; }
.kopf nav a[aria-current="page"] { background: var(--flaeche-2); color: var(--tinte); font-weight: 600; }

/* Zahlenreihe: ein Kasten, innen Haarlinien, keine acht Raender. */
.zahlen {
  border: 1px solid var(--linie); border-radius: var(--radius-gross);
  overflow: hidden; background: var(--linie); box-shadow: var(--schatten);
}
.zahl { padding: 17px 18px; }
.zahl b { font-size: 27px; font-weight: 600; letter-spacing: -.04em; margin-bottom: 3px; }
.zahl span { font-size: 12px; color: var(--tinte-3); }

/* Abschnittsueberschriften als kleine Marke, nicht als zweite Schlagzeile. */
.abschnitt > h2, .abschnittstitel {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinte-3); border-bottom: 1px solid var(--linie);
  padding-bottom: 9px; margin-bottom: 14px;
}

/* Tabellen: mehr Luft, Haarlinien, Kopfzeile als Kleinschrift. */
table { font-size: 13.5px; }
thead th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinte-3); font-weight: 600;
  padding: 0 12px 9px; border-bottom: 1px solid var(--linie);
}
tbody td { padding: 13px 12px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--grund); }

/* Marken: kleiner, ohne Fettdruck, Farbe traegt die Aussage. */
.marker {
  padding: 3px 9px; font-size: 11.5px; font-weight: 500;
  border-radius: 6px; letter-spacing: .005em;
}
.marker.neutral { background: transparent; color: var(--tinte-3); border: 1px solid var(--linie); }

/* Knoepfe: ruhiger Rand, spuerbarer Zustand. */
button, .knopf {
  font-size: 13px; font-weight: 550; padding: 8px 14px;
  border-radius: 8px; border-color: var(--linie-stark);
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
button:hover, .knopf:hover { background: var(--flaeche-2); border-color: var(--tinte-3); }
button.haupt, .knopf.haupt { box-shadow: 0 1px 2px rgba(1,90,252,.22); }
button.haupt:hover, .knopf.haupt:hover { background: var(--akzent-tief); filter: none; }

/* Hinweise: ohne Fuellfarbe, nur ein farbiger Streifen links. */
.hinweis {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-left: 3px solid var(--linie-stark); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 16px;
}
.hinweis.sperre { background: var(--flaeche); border-color: var(--linie); border-left-color: var(--nein); }
.hinweis.achtung { background: var(--flaeche); border-color: var(--linie); border-left-color: var(--warn); }
.hinweis .zeichen { display: none; }
.hinweis b { font-size: 13.5px; }
.hinweis p { font-size: 13px; line-height: 1.55; }

/* Listenkaesten allgemein */
.pruefliste, .verteilung, .tabellenrahmen table, .seedfach, .kennzahlen {
  box-shadow: var(--schatten);
}
.pruefliste { border-radius: var(--radius-gross); overflow: hidden; }
.pruefzeile { padding: 12px 15px; }
.pruefzeile .stand { width: 15px; height: 15px; }

.fussnotiz {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linie);
  font-size: 12.5px; color: var(--tinte-3);
}
.fussnotiz.sperre { color: var(--nein); }


/* ------------------------------------------------------------------- Marke */
.marke, .appkopf .marke {
  display: flex; align-items: center; gap: 9px;
}
.marke img.zeichen {
  height: 19px; width: auto; display: block;
}
.marke .wortmarke { font-weight: 650; letter-spacing: -.028em; }


/* Adressen und Domains standen in einer Schreibmaschinenschrift. Das trennt sie
   optisch vom Rest, sieht bei einer Mailadresse aber nach Quelltext aus, und die
   Bindestriche wirken zu lang. Sie bekommen dieselbe Schrift wie alles andere, nur
   etwas kleiner und leiser (Vorgabe Manuel, 27.08.2026). */
.mono {
  font-family: var(--schrift);
  font-size: 12.5px;
  color: var(--tinte-3);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
td .mono, .nachrichtkopf .mono { font-size: 12.5px; }