/* Abteilungsleiter-Ansicht (Auswertung, Bearbeitung) im WLC-Design, Desktop zuerst.
   Diagrammfarben: validierte Palette (dataviz-Validator, alle Nachbarpaare bestehen CVD- und Normalsicht-Grenzen).
   Gelb liegt unter 3:1 zur Fläche – deshalb überall sichtbare Werte, Legende und Tabellenansicht. */
:root {
  --rot: #CC0000;
  --rot-dunkel: #A30000;
  --rot-hell: #FBEAEA;
  --schwarz: #000000;
  --text-2: #52514e;
  --grau-dunkel: #605D5C;
  --grau-rahmen: #8C8A89;
  --grau-linie: #BFBFBF;
  --grau-fein: #DEDEDE;
  --grau-hell: #EDEDED;
  --flaeche: #FFFFFF;
  --s-eingegangen: #2a78d6;
  --s-in-pruefung: #eda100;
  --s-nicht-umgesetzt: #4a3aa7;
  --s-umgesetzt: #008300;
  --radius: 4px;
  --schrift: futura, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-display: futura, "Roboto Condensed", sans-serif-condensed, "Arial Narrow", Bahnschrift, -apple-system, system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: var(--schrift); font-size: 14px; line-height: 1.45; color: var(--schwarz); background: var(--grau-hell); }
a { color: var(--rot); }
:focus-visible { outline: 3px solid var(--rot); outline-offset: 2px; }
h1 {
  margin: 0;
  font-family: var(--schrift-display);
  font-stretch: condensed;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}
h2 { margin: 0; font-size: 15px; font-weight: 800; }
.unterzeile { margin: 3px 0 0; font-size: 14px; font-weight: 800; color: var(--rot); }
.js .nur-ohne-js { display: none; }

/* Kopf */
.ikopf { background: var(--flaeche); }
.ikopf-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; max-width: 1280px; margin: 0 auto; padding: 10px 20px; }
.marke { display: block; width: 190px; max-width: 60vw; line-height: 0; }
.marke img { display: block; width: 100%; height: auto; }
.bereich-titel { margin: 0; padding-left: 20px; font-size: 13px; font-weight: 800; color: var(--grau-dunkel); border-left: 1px solid var(--grau-linie); }
.sitzung { display: flex; gap: 14px; align-items: center; margin: 0 0 0 auto; font-size: 13px; }
.gast { padding: 2px 8px; font-weight: 700; background: #FFF1CC; border-radius: var(--radius); }
.inav { display: flex; gap: 4px; max-width: 1280px; margin: 0 auto; padding: 0 16px; overflow-x: auto; }
.ikopf .inav-hintergrund, .ikopf { border-bottom: 1px solid var(--grau-fein); }
.inav a {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 3px 12px 0;
  font-weight: 800;
  color: var(--schwarz);
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.inav a[aria-current="page"] { color: var(--rot); border-bottom-color: var(--rot); }

.iinhalt { max-width: 1280px; margin: 0 auto; padding: 18px 20px 32px; }
.seitenkopf { margin-bottom: 14px; }
.ifuss { padding: 14px 20px; font-size: 12px; text-align: center; color: var(--grau-dunkel); }
.ifuss p { margin: 0; }
.ifuss-recht { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; margin-top: 4px !important; }

/* Filter: eine Zeile über allem, was sie filtert */
.filterzeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-bottom: 14px; }
.filterzeile label { display: grid; gap: 3px; font-size: 12px; font-weight: 700; color: var(--text-2); }
.filterzeile select, .filterzeile button, .filterzeile .export {
  min-height: 34px;
  padding: 6px 10px;
  font: inherit;
  color: var(--schwarz);
  background: var(--flaeche);
  border: 1px solid var(--grau-rahmen);
  border-radius: var(--radius);
}
.filterzeile button, .bearbeiten button { font-weight: 800; color: #fff; background: var(--rot); border-color: var(--rot); cursor: pointer; }
.filterzeile .exporte { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.filterzeile .export { font-weight: 800; color: var(--rot); text-decoration: none; }

/* Kennzahlen */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi { padding: 10px 12px; background: var(--flaeche); border-top: 2px solid var(--rot); }
.kpi p { margin: 0; }
.kpi-label { font-size: 12px; font-weight: 700; color: var(--text-2); }
.kpi-wert { margin: 2px 0 !important; font-size: 22px; font-weight: 700; line-height: 1.15; }
.kpi-zusatz { font-size: 11px; color: var(--grau-dunkel); }
.leer-hinweis { padding: 20px; font-weight: 700; text-align: center; background: var(--flaeche); }

/* Karten */
.raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.karte { margin: 0; padding: 14px 16px; background: var(--flaeche); border-top: 2px solid var(--rot); }
.karte.breit { grid-column: 1 / -1; }
.karte figcaption { margin-bottom: 10px; }
.karte figcaption p, .karten-hinweis { margin: 2px 0 0; font-size: 12px; color: var(--text-2); }

/* Säulen: eine Reihe, Werte selektiv (Maximum und jüngste Periode) */
.saeulen { display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--grau-linie); }
.saeule-spalte { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; min-width: 0; }
.saeule-bahn { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; width: 100%; height: 140px; padding-top: 18px; }
.saeule-wert { min-height: 18px; font-size: 12px; font-weight: 700; color: var(--schwarz); }
.saeule { display: block; width: 100%; max-width: 20px; border-radius: 4px 4px 0 0; cursor: default; }
.saeule.null { height: 0; }
.saeule:hover, .saeule:focus-visible, .segment:hover, .segment:focus-visible, .balken:hover, .balken:focus-visible { filter: brightness(1.15); }
.saeule-achse { min-height: 18px; margin-top: 4px; font-size: 11px; color: var(--grau-dunkel); white-space: nowrap; }
.saeulen-rahmen { overflow-x: auto; }

/* Horizontale Balken (gestapelt und einfach) */
.zeilen { display: grid; gap: 8px; }
.zeile { display: grid; grid-template-columns: 112px minmax(0, 1fr) 3ch; gap: 10px; align-items: center; }
.zeile-label { font-size: 13px; color: var(--schwarz); overflow-wrap: anywhere; }
.zeile-spur { min-height: 20px; }
.zeile-wert { font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.stapel { display: flex; gap: 2px; height: 20px; }
.stapel.voll { width: 100%; margin-bottom: 14px; }
.segment { display: block; flex: 0 1 auto; min-width: 3px; height: 100%; }
.segment:last-child { flex-grow: 1; border-radius: 0 4px 4px 0; }
.balken { display: block; height: 20px; min-width: 3px; border-radius: 0 4px 4px 0; }
.einzelreihe { background: var(--rot); }
.s-eingegangen { background: var(--s-eingegangen); }
.s-in_pruefung { background: var(--s-in-pruefung); }
.s-nicht_umgesetzt { background: var(--s-nicht-umgesetzt); }
.s-umgesetzt { background: var(--s-umgesetzt); }

.legende { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 10px; padding: 0; font-size: 12px; list-style: none; }
.legende li { display: flex; align-items: center; gap: 6px; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
.legende.werte { display: grid; gap: 6px; margin: 0; }
.legende.werte li { display: grid; grid-template-columns: 12px 1fr auto 4.5ch; gap: 8px; }
.legende-anteil { color: var(--text-2); text-align: right; font-variant-numeric: tabular-nums; }

/* Tabellenansicht zu jedem Diagramm */
.tabellenansicht { margin-top: 10px; font-size: 12px; }
/* Auf schmalen Geräten ist die Statustabelle breiter als die Karte: nur sie scrollt, nicht die Seite */
.tabellenansicht[open] { overflow-x: auto; }
.tabellenansicht summary { font-weight: 700; color: var(--rot); cursor: pointer; }
.tabellenansicht table { margin-top: 8px; border-collapse: collapse; }
.tabellenansicht th, .tabellenansicht td { padding: 3px 14px 3px 0; text-align: left; border-bottom: 1px solid var(--grau-fein); }
.zahl { text-align: right !important; font-variant-numeric: tabular-nums; }

/* Liste */
.liste-karte h2 { margin-bottom: 2px; }
.tabelle-scroll { margin-top: 12px; overflow-x: auto; }
.vorschlagsliste { width: 100%; font-size: 13px; border-collapse: collapse; }
.vorschlagsliste th { padding: 6px 8px; font-size: 11px; font-weight: 800; text-align: left; color: var(--text-2); background: #F7F7F7; border-bottom: 1px solid var(--grau-fein); white-space: nowrap; }
.vorschlagsliste td { padding: 8px; vertical-align: top; border-bottom: 1px solid var(--grau-fein); }
.vorschlagsliste .nr { font-family: var(--mono); white-space: nowrap; }
.vorschlagsliste .vorschlag { min-width: 220px; max-width: 420px; }
.vorschlagsliste summary { font-weight: 700; cursor: pointer; }
.vorschlagsliste details p { margin: 6px 0 0; color: #262626; }
.vorschlagsliste .fotos { white-space: nowrap; }
.vorschlagsliste .fotos img { display: inline-block; width: 56px; height: 42px; margin-right: 4px; object-fit: cover; border-radius: var(--radius); }
.leer { color: var(--grau-rahmen); }
.badge, .status-badge { display: inline-block; padding: 2px 7px; font-size: 11px; font-weight: 800; white-space: nowrap; border-radius: var(--radius); }
.b-eingegangen, .status-eingegangen { color: #1c5cab; background: #DCEBFB; }
.b-in_pruefung, .status-in_pruefung { color: #5C4400; background: #FFF1CC; }
.b-nicht_umgesetzt, .status-nicht_umgesetzt { color: #3a2d8a; background: #E7E4F7; }
.b-umgesetzt, .status-umgesetzt { color: #006300; background: #DDF1DD; }

.tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  max-width: 280px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #262626;
  border-radius: var(--radius);
  pointer-events: none;
}

/* Bearbeitung */
.kennzahlen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.kennzahl { min-width: 96px; padding: 6px 10px; font-size: 12px; font-weight: 700; color: var(--schwarz); text-decoration: none; background: var(--flaeche); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--grau-fein); }
.kennzahl.aktiv { box-shadow: inset 0 0 0 2px var(--rot); }
.kennzahl span { display: block; font-size: 18px; font-weight: 800; line-height: 1.2; }
.meldung { margin-bottom: 12px; padding: 10px 14px; background: var(--flaeche); }
.meldung.ok { background: #DDF2E3; border-left: 4px solid #1E7B3A; }
.meldung.fehler { background: var(--rot-hell); border-left: 4px solid var(--rot); }
.liste { width: 100%; background: var(--flaeche); border-collapse: collapse; border-top: 2px solid var(--rot); }
.liste th { padding: 8px 10px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-align: left; text-transform: uppercase; color: var(--grau-dunkel); background: #F7F7F7; border-bottom: 1px solid var(--grau-fein); }
.liste td { padding: 10px; vertical-align: top; border-bottom: 1px solid var(--grau-fein); }
.liste td small { display: block; color: var(--grau-dunkel); }
.liste .nr { font-family: var(--mono); white-space: nowrap; }
.liste tr.hervorgehoben td { background: #FFF8D6; }
.text { max-width: 420px; }
.text p { margin: 4px 0 0; color: #262626; }
.foto-links a { display: block; }
.foto-links img { display: block; width: 88px; height: 66px; margin-bottom: 6px; object-fit: cover; border: 1px solid var(--grau-fein); border-radius: var(--radius); }
.tag { display: inline-block; margin-top: 4px; padding: 2px 8px; font-size: 12px; font-weight: 800; border-radius: var(--radius); }
.kat-sicherheit { color: var(--rot); background: var(--rot-hell); }
.kat-prozess { color: #262626; background: var(--grau-fein); }
.kat-ergonomie { color: #fff; background: var(--grau-dunkel); }
.kat-sonstiges { color: #262626; background: #fff; box-shadow: inset 0 0 0 1px var(--grau-linie); }
.bearbeiten { display: grid; gap: 6px; min-width: 240px; }
.bearbeiten .status-badge { justify-self: start; }
.bearbeiten label { display: grid; gap: 3px; font-size: 12px; font-weight: 700; color: #262626; }
.bearbeiten select, .bearbeiten textarea { width: 100%; padding: 6px 8px; font: inherit; border: 1px solid var(--grau-rahmen); border-radius: var(--radius); }
.bearbeiten button { justify-self: start; padding: 8px 16px; font: inherit; font-weight: 800; border: 0; border-radius: var(--radius); }
.bearbeiten button:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 900px) {
  .raster { grid-template-columns: minmax(0, 1fr); }
  .bereich-titel { padding-left: 0; border-left: 0; }
  .filterzeile .exporte { margin-left: 0; }
  .liste thead { display: none; }
  .liste, .liste tbody, .liste tr, .liste td { display: block; width: 100%; }
  .liste tr { border-bottom: 10px solid var(--grau-hell); }
  .text { max-width: none; }
  .foto-links a { display: inline-block; margin-right: 6px; }
}

/* Handy und kleines Tablet: der Kunde arbeitet mobile first, deshalb wird hier aus jeder
   Tabelle eine Karte, aus jeder Filterzeile ein Raster und aus jedem Diagramm eine schmale Fassung. */
@media (max-width: 760px) {
  h1 { font-size: 21px; }
  .ikopf-zeile { gap: 6px 12px; padding: 8px 16px; }
  .marke { width: 150px; }
  .bereich-titel { order: 3; width: 100%; }
  .sitzung { margin-left: 0; }
  .inav { padding: 0 8px; }
  .inav a { min-height: 42px; }
  .iinhalt { padding: 14px 16px 28px; }

  .filterzeile { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
  /* Auf dem Handy bleiben Bedienelemente fingerfreundlich, obwohl die Skala kleiner ist */
  .filterzeile select, .filterzeile button { width: 100%; min-height: 44px; }
  .filterzeile .export { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .bearbeiten select, .bearbeiten button { min-height: 44px; }
  .kennzahl { display: flex; flex-direction: column; justify-content: center; min-height: 52px; }
  .filterzeile .exporte { grid-column: 1 / -1; margin-left: 0; }
  .filterzeile .exporte .export { flex: 1 1 0; text-align: center; }

  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 8px 10px; }
  .kpi-wert { font-size: 19px; }
  .karte { padding: 12px 14px; }
  .saeule-bahn { height: 112px; padding-top: 16px; }
  .zeile { grid-template-columns: minmax(78px, 30%) minmax(0, 1fr) 3ch; gap: 8px; }
  .zeile-label, .zeile-wert { font-size: 12px; }

  /* Statusfilter der Bearbeitung als Raster statt als umbrechende Reihe */
  .kennzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .kennzahl { min-width: 0; }
  .liste th, .liste td { padding: 8px 12px; }
  .foto-links img { width: 76px; height: 57px; }
  .bearbeiten { min-width: 0; }

  /* Vorschlagsliste der Auswertung: jede Zeile wird eine Karte, Kopfzeile entfällt */
  .tabelle-scroll { overflow-x: visible; }
  .vorschlagsliste, .vorschlagsliste tbody, .vorschlagsliste tr, .vorschlagsliste td { display: block; width: 100%; }
  .vorschlagsliste thead { display: none; }
  .vorschlagsliste tr {
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
      "nummer nummer status"
      "bereich kategorie tage"
      "eingang eingang eingang"
      "vorschlag vorschlag vorschlag"
      "fotos fotos fotos";
    gap: 2px 8px;
    padding: 10px 0;
    border-top: 1px solid var(--grau-fein);
  }
  .vorschlagsliste td { padding: 0; border: 0; }
  .vorschlagsliste .nr { grid-area: nummer; font-weight: 700; }
  .vorschlagsliste .status { grid-area: status; justify-self: end; }
  .vorschlagsliste .bereich { grid-area: bereich; }
  .vorschlagsliste .kategorie { grid-area: kategorie; }
  .vorschlagsliste .eingang { grid-area: eingang; }
  .vorschlagsliste .tage { grid-area: tage; justify-self: end; }
  .vorschlagsliste .vorschlag { grid-area: vorschlag; min-width: 0; max-width: none; margin-top: 4px; }
  .vorschlagsliste .fotos { grid-area: fotos; }
  .vorschlagsliste .bereich, .vorschlagsliste .kategorie, .vorschlagsliste .eingang, .vorschlagsliste .tage {
    font-size: 12px;
    color: var(--text-2);
  }
  .vorschlagsliste .eingang::before { content: "Eingang "; }
  .vorschlagsliste .tage::after { content: " Tage"; }
  .vorschlagsliste .tage { text-align: right !important; }
  .vorschlagsliste .fotos { margin-top: 4px; }
}
@media (max-width: 420px) {
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zeile { grid-template-columns: minmax(70px, 34%) minmax(0, 1fr) 3ch; }
  .saeule-achse { font-size: 10px; }
  .legende.werte li { grid-template-columns: 12px 1fr auto 4.5ch; }
  .vorschlagsliste .fotos img { width: 46px; height: 35px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Ansichts-Umschalter des Mockups: Mitarbeiter <-> Abteilungsleiter */
.ansicht { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 10px; background: #262626; }
.ansicht-label { font-size: 12px; font-weight: 700; color: #BFBFBF; }
.ansicht-schalter { display: inline-flex; gap: 2px; padding: 3px; background: #454343; border-radius: 999px; }
.ansicht-schalter a {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.1;
  color: #FFFFFF;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 999px;
}
.ansicht-schalter a small { font-size: 11px; font-weight: 600; color: #DEDEDE; }
.ansicht-schalter a:hover { background: #5a5857; }
.ansicht-schalter a[aria-current="page"] { background: #CC0000; }
.ansicht-schalter a[aria-current="page"] small { color: #FFFFFF; }
.ansicht-schalter .icon { width: 16px; height: 16px; }
.ansicht-schalter a:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 1px; }
@media (max-width: 720px) {
  .ansicht-label, .ansicht-schalter a small { display: none; }
  /* Der Umschalter ist auf dem Handy die am häufigsten getippte Fläche: fingerfreundlich halten */
  .ansicht-schalter a { min-height: 40px; padding: 5px 14px; }
}

/* Geometrie über Klassen statt style-Attribute (CSP ohne 'unsafe-inline') */
.w-0 { width: 0%; }
.w-1 { width: 1%; }
.w-2 { width: 2%; }
.w-3 { width: 3%; }
.w-4 { width: 4%; }
.w-5 { width: 5%; }
.w-6 { width: 6%; }
.w-7 { width: 7%; }
.w-8 { width: 8%; }
.w-9 { width: 9%; }
.w-10 { width: 10%; }
.w-11 { width: 11%; }
.w-12 { width: 12%; }
.w-13 { width: 13%; }
.w-14 { width: 14%; }
.w-15 { width: 15%; }
.w-16 { width: 16%; }
.w-17 { width: 17%; }
.w-18 { width: 18%; }
.w-19 { width: 19%; }
.w-20 { width: 20%; }
.w-21 { width: 21%; }
.w-22 { width: 22%; }
.w-23 { width: 23%; }
.w-24 { width: 24%; }
.w-25 { width: 25%; }
.w-26 { width: 26%; }
.w-27 { width: 27%; }
.w-28 { width: 28%; }
.w-29 { width: 29%; }
.w-30 { width: 30%; }
.w-31 { width: 31%; }
.w-32 { width: 32%; }
.w-33 { width: 33%; }
.w-34 { width: 34%; }
.w-35 { width: 35%; }
.w-36 { width: 36%; }
.w-37 { width: 37%; }
.w-38 { width: 38%; }
.w-39 { width: 39%; }
.w-40 { width: 40%; }
.w-41 { width: 41%; }
.w-42 { width: 42%; }
.w-43 { width: 43%; }
.w-44 { width: 44%; }
.w-45 { width: 45%; }
.w-46 { width: 46%; }
.w-47 { width: 47%; }
.w-48 { width: 48%; }
.w-49 { width: 49%; }
.w-50 { width: 50%; }
.w-51 { width: 51%; }
.w-52 { width: 52%; }
.w-53 { width: 53%; }
.w-54 { width: 54%; }
.w-55 { width: 55%; }
.w-56 { width: 56%; }
.w-57 { width: 57%; }
.w-58 { width: 58%; }
.w-59 { width: 59%; }
.w-60 { width: 60%; }
.w-61 { width: 61%; }
.w-62 { width: 62%; }
.w-63 { width: 63%; }
.w-64 { width: 64%; }
.w-65 { width: 65%; }
.w-66 { width: 66%; }
.w-67 { width: 67%; }
.w-68 { width: 68%; }
.w-69 { width: 69%; }
.w-70 { width: 70%; }
.w-71 { width: 71%; }
.w-72 { width: 72%; }
.w-73 { width: 73%; }
.w-74 { width: 74%; }
.w-75 { width: 75%; }
.w-76 { width: 76%; }
.w-77 { width: 77%; }
.w-78 { width: 78%; }
.w-79 { width: 79%; }
.w-80 { width: 80%; }
.w-81 { width: 81%; }
.w-82 { width: 82%; }
.w-83 { width: 83%; }
.w-84 { width: 84%; }
.w-85 { width: 85%; }
.w-86 { width: 86%; }
.w-87 { width: 87%; }
.w-88 { width: 88%; }
.w-89 { width: 89%; }
.w-90 { width: 90%; }
.w-91 { width: 91%; }
.w-92 { width: 92%; }
.w-93 { width: 93%; }
.w-94 { width: 94%; }
.w-95 { width: 95%; }
.w-96 { width: 96%; }
.w-97 { width: 97%; }
.w-98 { width: 98%; }
.w-99 { width: 99%; }
.w-100 { width: 100%; }
.h-0 { height: 0%; }
.h-1 { height: 1%; }
.h-2 { height: 2%; }
.h-3 { height: 3%; }
.h-4 { height: 4%; }
.h-5 { height: 5%; }
.h-6 { height: 6%; }
.h-7 { height: 7%; }
.h-8 { height: 8%; }
.h-9 { height: 9%; }
.h-10 { height: 10%; }
.h-11 { height: 11%; }
.h-12 { height: 12%; }
.h-13 { height: 13%; }
.h-14 { height: 14%; }
.h-15 { height: 15%; }
.h-16 { height: 16%; }
.h-17 { height: 17%; }
.h-18 { height: 18%; }
.h-19 { height: 19%; }
.h-20 { height: 20%; }
.h-21 { height: 21%; }
.h-22 { height: 22%; }
.h-23 { height: 23%; }
.h-24 { height: 24%; }
.h-25 { height: 25%; }
.h-26 { height: 26%; }
.h-27 { height: 27%; }
.h-28 { height: 28%; }
.h-29 { height: 29%; }
.h-30 { height: 30%; }
.h-31 { height: 31%; }
.h-32 { height: 32%; }
.h-33 { height: 33%; }
.h-34 { height: 34%; }
.h-35 { height: 35%; }
.h-36 { height: 36%; }
.h-37 { height: 37%; }
.h-38 { height: 38%; }
.h-39 { height: 39%; }
.h-40 { height: 40%; }
.h-41 { height: 41%; }
.h-42 { height: 42%; }
.h-43 { height: 43%; }
.h-44 { height: 44%; }
.h-45 { height: 45%; }
.h-46 { height: 46%; }
.h-47 { height: 47%; }
.h-48 { height: 48%; }
.h-49 { height: 49%; }
.h-50 { height: 50%; }
.h-51 { height: 51%; }
.h-52 { height: 52%; }
.h-53 { height: 53%; }
.h-54 { height: 54%; }
.h-55 { height: 55%; }
.h-56 { height: 56%; }
.h-57 { height: 57%; }
.h-58 { height: 58%; }
.h-59 { height: 59%; }
.h-60 { height: 60%; }
.h-61 { height: 61%; }
.h-62 { height: 62%; }
.h-63 { height: 63%; }
.h-64 { height: 64%; }
.h-65 { height: 65%; }
.h-66 { height: 66%; }
.h-67 { height: 67%; }
.h-68 { height: 68%; }
.h-69 { height: 69%; }
.h-70 { height: 70%; }
.h-71 { height: 71%; }
.h-72 { height: 72%; }
.h-73 { height: 73%; }
.h-74 { height: 74%; }
.h-75 { height: 75%; }
.h-76 { height: 76%; }
.h-77 { height: 77%; }
.h-78 { height: 78%; }
.h-79 { height: 79%; }
.h-80 { height: 80%; }
.h-81 { height: 81%; }
.h-82 { height: 82%; }
.h-83 { height: 83%; }
.h-84 { height: 84%; }
.h-85 { height: 85%; }
.h-86 { height: 86%; }
.h-87 { height: 87%; }
.h-88 { height: 88%; }
.h-89 { height: 89%; }
.h-90 { height: 90%; }
.h-91 { height: 91%; }
.h-92 { height: 92%; }
.h-93 { height: 93%; }
.h-94 { height: 94%; }
.h-95 { height: 95%; }
.h-96 { height: 96%; }
.h-97 { height: 97%; }
.h-98 { height: 98%; }
.h-99 { height: 99%; }
.h-100 { height: 100%; }