/* ===================================================================
   Portal — Oberfläche
   Gestaltung: Kontobuch. Navy aus dem HK-Signet, Papierton als Grund,
   alle Beträge in Tabellenziffern damit Cent-Stellen untereinander
   stehen. Farbe wird nur dort eingesetzt, wo sie eine Aussage trägt:
   Bernstein = zu prüfen, Petrol = freigegeben, Rot = Storno.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:wght@600&display=swap');

:root {
  --tinte:      #101E3A;
  --tinte-weich:#2E3E60;
  --papier:     #F5F5F1;
  --flaeche:    #FFFFFF;
  --linie:      #DCDDD5;
  --linie-satt: #B9BBB0;
  --gedaempft:  #6B7285;
  --bernstein:  #A8660C;
  --bernstein-w:#FBF1E0;
  --petrol:     #1D6B63;
  --petrol-w:   #E4F0EE;
  --rot:        #97332A;
  --rot-w:      #FAEBE9;

  --serif: "IBM Plex Serif", Georgia, serif;
  --sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 400 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* --- Kopfleiste ------------------------------------------------- */
.kopf {
  background: var(--tinte);
  color: #EDEFF4;
  padding: .8rem 1.5rem;
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 20;
}
.signet {
  width: 26px; height: 26px; flex: none;
  background: #EDEFF4; transform: rotate(45deg);
  display: grid; place-items: center;
}
.signet span {
  transform: rotate(-45deg);
  font: 600 11px var(--serif); color: var(--tinte); letter-spacing: -.02em;
}
.kopf h1 { font: 600 15px var(--serif); margin: 0; letter-spacing: .01em; }
.kopf .sub { font-size: 12px; color: #96A0B8; margin-left: -.9rem; }
.kopf nav { margin-left: auto; display: flex; gap: 1.1rem; align-items: center; }
.kopf nav a { color: #C3CADB; text-decoration: none; font-size: 13.5px; }
.kopf nav a:hover, .kopf nav a:focus-visible { color: #fff; text-decoration: underline; }
.wer { font-size: 12.5px; color: #96A0B8; }
.wer b { color: #EDEFF4; font-weight: 500; }

main { max-width: 1180px; margin: 0 auto; padding: 1.75rem 1.5rem 5rem; }

h2 {
  font: 600 13px var(--sans); text-transform: uppercase;
  letter-spacing: .09em; color: var(--gedaempft);
  margin: 2.25rem 0 .7rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--linie);
}
h2:first-of-type { margin-top: .5rem; }

/* --- Kennzahlen: die drei Zeitachsen ---------------------------- */
.achsen { display: grid; gap: 1px; background: var(--linie);
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          border: 1px solid var(--linie); }
.achse { background: var(--flaeche); padding: 1.1rem 1.25rem; }
.achse .label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--gedaempft); margin-bottom: .45rem;
}
.achse .zahl {
  font: 600 27px/1.1 var(--mono); font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.achse .zahl.minus { color: var(--rot); }
.achse .fuss { font-size: 12px; color: var(--gedaempft); margin-top: .35rem; }
.achse.hervor { background: var(--tinte); color: #fff; }
.achse.hervor .label, .achse.hervor .fuss { color: #9AA5BE; }

/* --- Tabellen --------------------------------------------------- */
.rahmen { border: 1px solid var(--linie); background: var(--flaeche);
          overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
  text-align: left; font: 500 11px var(--sans); text-transform: uppercase;
  letter-spacing: .07em; color: var(--gedaempft);
  padding: .6rem .75rem; border-bottom: 1px solid var(--linie-satt);
  white-space: nowrap; background: var(--flaeche);
  position: sticky; top: 0;
}
tbody td { padding: .5rem .75rem; border-bottom: 1px solid var(--linie); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #FAFAF7; }
.zahl-z, td.num, th.num { text-align: right; font-family: var(--mono);
                          font-variant-numeric: tabular-nums; white-space: nowrap; }
.minus { color: var(--rot); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
tfoot td { padding: .6rem .75rem; border-top: 2px solid var(--tinte);
           font-weight: 600; font-family: var(--mono);
           font-variant-numeric: tabular-nums; }
tfoot td:first-child { font-family: var(--sans); }

/* --- Marken ----------------------------------------------------- */
.marke {
  display: inline-block; font: 500 11px var(--sans); letter-spacing: .04em;
  padding: .12rem .45rem; border: 1px solid currentColor; white-space: nowrap;
}
.m-pool     { color: var(--tinte-weich); background: #EEF1F7; }
.m-eigen    { color: var(--gedaempft); background: #F2F2EE; }
.m-pruefen  { color: var(--bernstein); background: var(--bernstein-w); }
.m-frei     { color: var(--petrol); background: var(--petrol-w); }
.m-storno   { color: var(--rot); background: var(--rot-w); }

/* --- Verlaufsgrafik --------------------------------------------- */
.verlauf { display: flex; align-items: flex-end; gap: 3px; height: 130px;
           padding: 0 .25rem; }
.balken { flex: 1; min-width: 8px; display: flex; flex-direction: column;
          justify-content: flex-end; height: 100%; position: relative; }
.balken i { display: block; background: var(--tinte-weich); }
.balken.neg i { background: var(--rot); }
.balken.aktiv i { background: var(--bernstein); }
.balken:hover i { background: var(--tinte); }
.balken em { position: absolute; bottom: -1.35rem; left: 50%;
             transform: translateX(-50%); font: 400 10px var(--mono);
             color: var(--gedaempft); font-style: normal; white-space: nowrap; }
.verlauf-rahmen { border: 1px solid var(--linie); background: var(--flaeche);
                  padding: 1rem 1rem 2.4rem; }

/* --- Kaskade: das Signaturelement ------------------------------- */
/* Zeigt für eine einzelne Position, wie sich der Betrag aufteilt.
   Jede Stufe ist ein Balken, dessen Breite dem Anteil entspricht.  */
.kaskade { border: 1px solid var(--linie); background: var(--flaeche);
           padding: 1.4rem 1.5rem; }
.kaskade-zeile { display: grid; grid-template-columns: 15rem 1fr 8rem;
                 gap: 1rem; align-items: center; padding: .5rem 0;
                 border-bottom: 1px solid var(--linie); }
.kaskade-zeile:last-child { border-bottom: none; }
.kaskade-name { font-size: 13.5px; }
.kaskade-name small { display: block; color: var(--gedaempft); font-size: 11.5px; }
.kaskade-spur { position: relative; height: 22px; background: #F2F2EE; }
.kaskade-spur i { position: absolute; top: 0; bottom: 0; display: block; }
.k-brutto   i { background: var(--tinte); }
.k-pool     i { background: var(--tinte-weich); }
.k-vermittler i { background: var(--bernstein); }
.k-residual i { background: var(--petrol); }
.k-reserve  i { background: repeating-linear-gradient(45deg,
                var(--linie-satt) 0 4px, #F2F2EE 4px 8px); }
.kaskade-zeile.informativ { opacity: .55; }
.kaskade-betrag { text-align: right; font: 500 14px var(--mono);
                  font-variant-numeric: tabular-nums; }

/* --- Formulare und Knöpfe --------------------------------------- */
.knopf {
  font: 500 13px var(--sans); padding: .45rem .9rem; cursor: pointer;
  background: var(--tinte); color: #fff; border: 1px solid var(--tinte);
}
.knopf:hover { background: var(--tinte-weich); }
.knopf.leise { background: transparent; color: var(--tinte);
               border-color: var(--linie-satt); }
.knopf.leise:hover { background: #EEF1F7; }
.knopf:disabled { opacity: .45; cursor: not-allowed; }
select, input[type=text], input[type=password] {
  font: 400 13.5px var(--sans); padding: .4rem .55rem;
  border: 1px solid var(--linie-satt); background: var(--flaeche);
  color: var(--tinte);
}
.leiste { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
          margin-bottom: .9rem; }
.leiste .rechts { margin-left: auto; display: flex; gap: .6rem; }

a { color: var(--tinte); }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid var(--bernstein); outline-offset: 2px;
}

/* --- Anmeldung -------------------------------------------------- */
.anmeldung { max-width: 22rem; margin: 5rem auto; }
.anmeldung .karte { border: 1px solid var(--linie); background: var(--flaeche);
                    padding: 1.75rem; }
.anmeldung h1 { font: 600 19px var(--serif); margin: 0 0 .3rem; }
.anmeldung p.sub { color: var(--gedaempft); font-size: 13px; margin: 0 0 1.4rem; }
.anmeldung label { display: block; font-size: 12px; color: var(--gedaempft);
                   text-transform: uppercase; letter-spacing: .07em;
                   margin: .9rem 0 .3rem; }
.anmeldung input { width: 100%; }
.anmeldung .knopf { width: 100%; margin-top: 1.3rem; padding: .6rem; }
.fehler { background: var(--rot-w); border: 1px solid var(--rot); color: var(--rot);
          padding: .55rem .75rem; font-size: 13px; margin-bottom: 1rem; }
.hinweis { background: var(--bernstein-w); border-left: 3px solid var(--bernstein);
           padding: .7rem .9rem; font-size: 13px; margin: 1rem 0; }
.leer { padding: 2.5rem 1.5rem; text-align: center; color: var(--gedaempft);
        font-size: 14px; }

@media (max-width: 700px) {
  main { padding: 1.25rem 1rem 4rem; }
  .achse .zahl { font-size: 23px; }
  .kaskade-zeile { grid-template-columns: 1fr 6.5rem; }
  .kaskade-spur { display: none; }
  .kopf { padding: .7rem 1rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* --- Zielbalken Bewertungssumme --------------------------------- */
.ziel { border: 1px solid var(--linie); background: var(--flaeche);
        padding: 1.2rem 1.35rem; }
.ziel-kopf { display: flex; align-items: baseline; gap: .75rem;
             flex-wrap: wrap; margin-bottom: .8rem; }
.ziel-kopf .stand { font: 600 24px var(--mono); font-variant-numeric: tabular-nums; }
.ziel-kopf .von { color: var(--gedaempft); font-size: 13px; }
.ziel-schiene { position: relative; height: 26px; background: #F0F0EB;
                border: 1px solid var(--linie); }
.ziel-fuell { position: absolute; inset: 0 auto 0 0; background: var(--petrol); }
.ziel-fuell.unter { background: var(--bernstein); }
.ziel-marke { position: absolute; top: -4px; bottom: -4px; width: 2px;
              background: var(--tinte); }
.ziel-marke em { position: absolute; top: -1.35rem; left: 50%;
                 transform: translateX(-50%); font: 500 10px var(--mono);
                 font-style: normal; color: var(--tinte); white-space: nowrap; }
.ziel-fuss { display: flex; justify-content: space-between; gap: 1rem;
             margin-top: .6rem; font-size: 12.5px; color: var(--gedaempft);
             flex-wrap: wrap; }
.ziel-fuss b { color: var(--tinte); font-family: var(--mono); }

/* --- Tacho: Stand gegen eigenes Vorjahr ------------------------- */
/* Mitte = 100 % = gleich wie im Vorjahr zum selben Stichtag.
   Absolute Zahlen sind zwischen Mitarbeitern nicht vergleichbar,
   das Verhaeltnis zum eigenen Vorjahr schon.                        */
.tacho-reihe { display: grid; gap: 1px; background: var(--linie);
               border: 1px solid var(--linie);
               grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tacho { background: var(--flaeche); padding: 1.15rem 1.3rem; }
.tacho .titel { font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
                color: var(--gedaempft); margin-bottom: .5rem; }
.tacho .wert { font: 600 26px/1 var(--mono); font-variant-numeric: tabular-nums; }
.tacho .wert.plus  { color: var(--petrol); }
.tacho .wert.minus { color: var(--rot); }
.tacho-schiene { position: relative; height: 8px; background: #EFEFE9;
                 margin: .85rem 0 .35rem; }
.tacho-schiene .mitte { position: absolute; left: 50%; top: -3px; bottom: -3px;
                        width: 1px; background: var(--linie-satt); }
.tacho-zeiger { position: absolute; top: -4px; bottom: -4px; width: 3px;
                background: var(--tinte); }
.tacho-fuell { position: absolute; top: 0; bottom: 0; background: var(--petrol); }
.tacho-fuell.unter { background: var(--bernstein); }
.tacho .skala { display: flex; justify-content: space-between;
                font: 400 10px var(--mono); color: var(--gedaempft); }
.tacho .fuss { font-size: 12px; color: var(--gedaempft); margin-top: .5rem; }

/* Delta-Spalten in der Spartentabelle */
td.delta.plus  { color: var(--petrol); }
td.delta.minus { color: var(--rot); }
.balkenzelle { position: relative; }
.balkenzelle i { position: absolute; left: 0; top: 50%; height: 4px;
                 transform: translateY(-50%); background: var(--tinte-weich);
                 opacity: .22; }

/* --- Portal: Kacheln fuer Agenten ------------------------------- */
.kacheln { display: grid; gap: 1px; background: var(--linie);
           border: 1px solid var(--linie);
           grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.kachel { background: var(--flaeche); padding: 1.3rem 1.4rem;
          text-decoration: none; color: var(--tinte); display: block; }
.kachel:hover { background: #FAFAF7; }
.kachel:hover .kachel-name { text-decoration: underline; }
.kachel-symbol { width: 34px; height: 34px; display: grid; place-items: center;
                 background: var(--tinte); color: #fff; font: 600 15px var(--serif);
                 margin-bottom: .8rem; }
.kachel-name { font: 600 15px var(--sans); margin-bottom: .3rem; }
.kachel-text { font-size: 13px; color: var(--gedaempft); line-height: 1.5; }
.kachel-fuss { font-size: 11px; color: var(--gedaempft); margin-top: .7rem;
               text-transform: uppercase; letter-spacing: .07em; }

/* --- Datax-Hilfe ------------------------------------------------ */
.hilfe-reihe { display: grid; gap: 1px; background: var(--linie);
               border: 1px solid var(--linie);
               grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
               margin-bottom: 1.5rem; }
.hilfe-feld { background: var(--flaeche); padding: 1.1rem 1.25rem; }
.hilfe-feld .titel { font: 600 14px var(--sans); margin-bottom: .35rem; }
.hilfe-feld .text { font-size: 12.5px; color: var(--gedaempft); line-height: 1.5; }
.hilfe-feld .knopf { margin-top: .8rem; display: inline-block;
                     text-decoration: none; }

.videoliste { display: grid; gap: 1px; background: var(--linie);
              grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.videokarte { background: var(--flaeche); padding: 1rem 1.15rem; }
.videokarte video { width: 100%; background: #000; margin-bottom: .6rem;
                    border: 1px solid var(--linie); }
.videokarte .titel { font: 500 13.5px var(--sans); }
.videokarte .text { font-size: 12px; color: var(--gedaempft); margin-top: .25rem;
                    line-height: 1.45; }
.videokarte .meta { font: 400 11px var(--mono); color: var(--gedaempft);
                    margin-top: .4rem; }
.kategorie-kopf { display: flex; align-items: baseline; gap: .6rem;
                  margin: 1.6rem 0 .6rem; }
.kategorie-kopf h3 { font: 600 14px var(--sans); margin: 0; }
.kategorie-kopf span { font-size: 12px; color: var(--gedaempft); }
.assistent-rahmen { border: 1px solid var(--linie); background: var(--flaeche);
                    overflow: hidden; }
.assistent-rahmen iframe { width: 100%; height: 620px; border: 0; display: block; }