/* ===================================================================
   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:      #14283C;
  --akzent:     #E8730C;
  --akzent-dunkel: #C25F08;
  --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 ------------------------------------------------- */
/* Drei Spalten, damit der Firmenname wirklich mittig steht und nicht
   je nach Laenge der Navigation verrutscht. Auf schmalen Schirmen
   klappt alles untereinander. */
.kopf {
  background: var(--tinte);
  color: #EDEFF4;
  padding: .9rem 1.5rem;
  display: grid; align-items: center; gap: .8rem;
  grid-template-columns: 1fr auto 1fr;
  position: sticky; top: 0; z-index: 20;
  border-bottom: 3px solid var(--akzent);
}
.kopf-links { justify-self: start; display: flex; align-items: center; }
.kopf-mitte {
  justify-self: center; text-align: center;
  font: 600 18px/1.25 var(--serif); color: #fff;
  text-decoration: none; letter-spacing: .01em;
}
.kopf-mitte:hover { color: var(--akzent); }
.kopf-rechts {
  justify-self: end; display: flex; gap: 1rem; align-items: center;
  flex-wrap: wrap; justify-content: flex-end;
}
.kopf-rechts a { color: #C3CADB; text-decoration: none; font-size: 13.5px;
                 white-space: nowrap; }
.kopf-rechts a:hover, .kopf-rechts a:focus-visible { color: #fff;
                 text-decoration: underline; }
.wer { font-size: 12.5px; color: #96A0B8; white-space: nowrap; }
.status { font-size: 12.5px; white-space: nowrap; display: inline-flex;
          align-items: center; gap: .4rem; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.status.an { color: #A9D6C6; }
.status.an::before { background: #4FBF9A; }
.status.an b { color: #fff; font-weight: 600; }
.status.aus { color: #9BA7BC; }
.status.aus::before { background: #6A768C; }
.marke { display: flex; align-items: center; }
/* Das Logo ist fuer hellen Grund gezeichnet. Auf dem dunklen Kopfband
   bekommt es deshalb eine eigene helle Flaeche, statt es umzufaerben —
   ein fremdes Logo wird nicht veraendert. */
.marke .logo { height: 44px; width: auto; display: block;
               background: #fff; padding: .3rem .55rem; }

/* --- Startseite -------------------------------------------------- */
.startseite {
  min-height: calc(100vh - 6rem - 8rem);
  display: flex; align-items: center; justify-content: center;
}
.startblock { width: 100%; max-width: 56rem; }
.portaltitel {
  font: 700 clamp(2rem, 7vw, 3.4rem)/1.1 var(--serif);
  color: var(--akzent); text-align: center;
  margin: 0 0 2rem; letter-spacing: -.015em;
}
.bereiche {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.bereich {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 12rem; padding: 2rem 1.8rem;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-top: 4px solid var(--akzent);
  text-decoration: none; color: var(--tinte);
  transition: background .12s, border-color .12s;
}
.bereich:hover { background: #FBFAF7; border-color: var(--linie-satt);
                 border-top-color: var(--akzent-dunkel); }
.bereich-name { font: 600 clamp(1.15rem, 3.5vw, 1.5rem)/1.25 var(--serif); }
.bereich:hover .bereich-name { color: var(--akzent-dunkel); }
.bereich-text { font-size: 14px; color: var(--gedaempft); margin-top: .6rem;
                line-height: 1.55; }

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(--akzent); color: #fff; border: 1px solid var(--akzent);
}
.knopf:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }
.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: 760px) {
  /* Kopfzeile untereinander: mittig gesetzter Name plus Navigation
     passen nebeneinander nicht auf ein Telefon. */
  .kopf { grid-template-columns: 1fr; justify-items: center;
          padding: .8rem 1rem; gap: .5rem; text-align: center; }
  .kopf-links:empty { display: none; }
  .kopf-links, .kopf-mitte, .kopf-rechts { justify-self: center; }
  .kopf-mitte { font-size: 16px; }
  .kopf-rechts { gap: .8rem; font-size: 13px; }
  .marke .logo { height: 38px; }
  .startseite { min-height: 0; padding: 1.5rem 0 2rem; }
  .portaltitel { margin-bottom: 1.4rem; }
  .bereich { min-height: 0; padding: 1.5rem 1.3rem; }
  .fuss { padding: 1rem; justify-content: center; text-align: center; }
  .fuss .rechts { margin-left: 0; }
  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(--akzent); 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; }


/* --- Fusszeile --------------------------------------------------- */
.fuss {
  border-top: 1px solid var(--linie);
  margin-top: 3rem; padding: 1.2rem 1.75rem;
  display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center;
  justify-content: center;
  font-size: 12.5px; color: var(--gedaempft);
}
.fuss a { color: var(--gedaempft); text-decoration: none; }
.fuss a:hover { color: var(--tinte); text-decoration: underline; }
.fuss .rechts { margin-left: auto; }

/* --- Rechtstexte -------------------------------------------------- */
.rechtstext { max-width: 44rem; }
.rechtstext h3 { font: 600 15px var(--sans); margin: 1.8rem 0 .5rem; }
.rechtstext p, .rechtstext li { font-size: 14px; line-height: 1.65; }
.rechtstext ul { padding-left: 1.2rem; }
.rechtstext dl { display: grid; grid-template-columns: 12rem 1fr;
                 gap: .35rem 1rem; font-size: 14px; margin: .6rem 0; }
.rechtstext dt { color: var(--gedaempft); }
.rechtstext .offen { background: var(--bernstein-w); color: var(--bernstein);
                     padding: 0 .3rem; }

/* --------------------------------------------------------------- */
/* Ringdiagramm je Sparte                                           */
/* --------------------------------------------------------------- */
.ring-block { display: grid; grid-template-columns: 190px 1fr; gap: 1.6rem;
  align-items: center; background: var(--flaeche); border: 1px solid var(--linie);
  padding: 1.3rem 1.5rem; }
.ring { width: 180px; height: 180px; display: block; }
.ring circle { transition: stroke-width .12s; }
.ring circle:hover { stroke-width: 5.2; cursor: default; }
.ring-mitte { font: 600 4.1px/1 var(--mono); fill: var(--tinte);
  text-anchor: middle; font-variant-numeric: tabular-nums; }
.ring-mitte-fuss { font: 400 2.5px/1 var(--sans); fill: var(--gedaempft);
  text-anchor: middle; letter-spacing: .06em; }
.ring-legende { list-style: none; margin: 0; padding: 0; }
.ring-legende li { display: grid;
  grid-template-columns: 12px 1fr auto auto; gap: .55rem;
  align-items: baseline; padding: .36rem 0;
  border-bottom: 1px solid var(--linie); font-size: 13px; }
.ring-legende li:last-child { border-bottom: 0; }
.ring-legende i { width: 11px; height: 11px; border-radius: 2px;
  display: block; align-self: center; }
.ring-legende .n { color: var(--tinte); }
.ring-legende .p { font: 600 13px var(--mono); color: var(--tinte);
  font-variant-numeric: tabular-nums; }
.ring-legende .w { font: 400 12px var(--mono); color: var(--gedaempft);
  font-variant-numeric: tabular-nums; min-width: 7.5em; text-align: right; }
.ring-legende .s { grid-column: 2 / -1; font-size: 11px;
  color: var(--gedaempft); }
.ring-hinweis { font-size: 12px; color: var(--gedaempft);
  margin: .6rem 0 0; max-width: 46rem; line-height: 1.5; }

/* --------------------------------------------------------------- */
/* Halbkreis-Tacho Zielerreichung                                    */
/* --------------------------------------------------------------- */
.zieltacho { display: grid; grid-template-columns: 240px 1fr; gap: 1.8rem;
  align-items: center; background: var(--flaeche);
  border: 1px solid var(--linie); padding: 1.3rem 1.5rem; }
.ztacho { width: 230px; height: 150px; display: block; }
.ztacho-wert { font: 600 16px var(--mono); fill: var(--tinte);
  font-variant-numeric: tabular-nums; }
.ztacho-skala { font: 400 8.5px var(--mono); fill: var(--gedaempft);
  font-variant-numeric: tabular-nums; }
.zieltacho-zahlen .gross { font: 600 28px/1.1 var(--mono); color: var(--tinte);
  font-variant-numeric: tabular-nums; }
.zieltacho-zahlen .gross span { font-size: 17px; color: var(--gedaempft); }
.zieltacho-zahlen .klein { font-size: 13px; color: var(--tinte);
  margin-top: .34rem; }
.zieltacho-zahlen .klein.gedaempft { color: var(--gedaempft); font-size: 12px; }

@media (max-width: 780px) {
  .ring-block, .zieltacho { grid-template-columns: 1fr; gap: 1rem; }
  .ring, .ztacho { margin: 0 auto; }
}

/* --------------------------------------------------------------- */
/* Kosten                                                           */
/* --------------------------------------------------------------- */
.kostentabelle .balkenzelle { width: 34%; padding-right: 1rem; }
.kostentabelle .balken { display: block; height: 7px; border-radius: 3px;
  background: var(--akzent); min-width: 2px; }
.kostentabelle .balken.offen { background: var(--gedaempft); }
.kostentabelle tr.offen td { background: #FBF3E8; }
.gruppe { font-size: 11px; color: var(--gedaempft); margin-left: .5rem; }
.zweck { font-size: 12px; color: var(--gedaempft); max-width: 24rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.zuordnen-form { display: flex; flex-wrap: wrap; gap: .45rem;
  align-items: center; margin: .2rem 0; }
.zuordnen-form select, .zuordnen-form input[type=text],
.zuordnen-form input[type=date], .zuordnen-form input[type=number] {
  font-size: 13px; padding: .22rem .4rem; border: 1px solid var(--linie);
  background: var(--flaeche); }
.zuordnen-form .merken { font-size: 12px; color: var(--gedaempft);
  display: flex; align-items: center; gap: .25rem; }
.zuordnen tr.vorgeschlagen td { background: #FFFBF0; }
.vorschlag-hinweis { font-size: 11px; color: var(--bernstein);
  margin-top: .2rem; }
.unterzeile td { background: var(--papier); padding-top: .3rem;
  padding-bottom: .5rem; }
.knopf.klein { font-size: 12px; padding: .22rem .6rem; }
.knopf.still { background: var(--flaeche); color: var(--tinte);
  border: 1px solid var(--linie); }
.leiste-rest { margin-left: auto; display: flex; gap: .5rem; }
ul.schlicht { margin: .3rem 0 0; padding-left: 1.1rem; }
ul.schlicht li { margin: .15rem 0; }
.hu-ueberfaellig { color: var(--rot); font-weight: 600; }
.hu-dringend { color: var(--bernstein); }
.hinweis.warnung { border-left: 3px solid var(--rot); }
tr.gedaempft td { color: var(--gedaempft); }
.fuss { font-size: 12px; color: var(--gedaempft); margin-top: 1rem;
  max-width: 44rem; line-height: 1.5; }
.blaettern { display: flex; align-items: center; gap: .6rem;
  font-size: 13px; color: var(--gedaempft); margin: .6rem 0 1rem;
  padding: .5rem .8rem; background: var(--flaeche);
  border: 1px solid var(--linie); }

/* --------------------------------------------------------------- */
/* Kopfzeile und Hauptleiste                                        */
/* --------------------------------------------------------------- */
/* Der Name steht jetzt links neben dem Logo, nicht mehr mittig.
   Das Raster der Kopfzeile wird deshalb auf zwei Spalten umgestellt —
   mit drei Spalten blieb fuer den Namen nur ein schmaler Streifen, und
   "Helge Kuehl und Kollegen eG" brach ueber vier Zeilen um. */
.kopf { grid-template-columns: auto 1fr; }
.kopf-links { display: flex; align-items: center; gap: .9rem;
  justify-self: start; min-width: 0; }
.kopf .logo { height: 44px; width: auto; display: block; flex: none; }
.kopf-mitte { display: flex; flex-direction: column; gap: .12rem;
  text-decoration: none; justify-self: start; text-align: left;
  white-space: nowrap; }
.kopf-mitte .traeger { font: 600 20px/1.15 var(--serif); color: #fff;
  white-space: nowrap; }
.kopf-mitte .untertitel { font: 400 10px/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.62); }
.kopf-rechts .status.monat { opacity: .82; }

.hauptleiste { display: flex; flex-wrap: wrap; gap: .2rem;
  background: var(--flaeche); border-bottom: 1px solid var(--linie);
  padding: 0 1.6rem; }
.hauptleiste a { display: block; padding: .72rem .95rem;
  font: 500 12px/1 var(--mono); letter-spacing: .09em;
  text-transform: uppercase; color: var(--gedaempft);
  text-decoration: none; border-bottom: 2px solid transparent; }
.hauptleiste a:hover { color: var(--tinte); background: var(--papier); }
.hauptleiste a.aktiv { color: var(--tinte);
  border-bottom-color: var(--akzent); }

@media (max-width: 760px) {
  .hauptleiste { padding: 0 .8rem; }
  .hauptleiste a { padding: .6rem .55rem; font-size: 11px; }
  .kopf-mitte .traeger { font-size: 16px; }
}