/* imopact-Teaser — entschieden 19.08.: Vorschlag I1 (Kennzahlenband, hell),
   gesetzt in der echten CI-Schrift der Marke.

   ⚠ SCHRIFT UND LIZENZ
   TT Norms (TypeType) ist die CI-Schrift von imopact — ausgelesen aus dem
   Folien-XML des imopact-Teasers, nicht geraten. Sie ist kommerziell und liegt
   nicht bei Google Fonts. Eingebunden sind hier die beiden Schnitte, die auf
   dem Arbeitsplatz installiert sind (Regular, Medium), als OTF.
   Das ist eine DESKTOP-Installation: für den Live-Betrieb braucht es eine
   eigene WEBFONT-Lizenz und die Dateien als WOFF2. Steht auf der Fix-Liste.
   Ohne die Dateien fällt der Block auf Red Hat Display zurück — die Zahlen
   sehen dann anders aus, der Aufbau bleibt gleich.

   Die Schrift gilt NUR innerhalb des imopact-Blocks. ONE bleibt bei Red Hat:
   zwei Marken, zwei Schriften, sichtbar getrennt — das ist der Zweck.

   ⚠ FARBE — korrigiert 19.08.
   Die CI-Farbe von imopact ist #AFC800. Nachgezählt im Folien-XML des Teasers:
   533 Verwendungen, mit Abstand die Hausfarbe; daneben nur Weiß, Schwarz und
   das Grau #585756. Das vorher hier benutzte dunkle #566f00 kommt in den
   Unterlagen NICHT vor — es war eine Ableitung von mir, damit das Grün auf
   hellem Grund lesbar wird. Das ist die falsche Reihenfolge: nicht die Farbe
   an den Grund anpassen, sondern den Grund an die Farbe.

   In den imopact-Folien stehen die großen Kennzahlen in #AFC800 auf dunklem
   Grund (58 pt, daneben weißer Text). Genau so ist der Block gebaut.

   ⚠ GRUND — Übergang T3, entschieden 19.08.
   Erster Versuch war ein eigener Grund für die Marke (Schwarzgrau #1b1b19).
   Das erzeugte am Seitenende zwei verschiedene Dunkelflächen mit zwei
   verschiedenen Akzenten direkt übereinander — Schwarz/Grün stieß auf
   Navy/Sand, und das las sich als Fehler statt als Absicht.
   Gewählt ist deshalb T3: der Block steht auf dem Navy von ONE, der
   Kontaktabschluss schließt ohne Kante an, die Seite endet als EINE dunkle
   Fläche, in der beide Marken vorkommen. Verworfen: T1 (grüne Fläche auf
   hellem Grund — zu laut, das grüne Feld schlug jedes Projektbild) und
   T2 (heller Trennstreifen dazwischen — Zäsur ohne eigene Aufgabe).
   Vergleich: varianten-imo-uebergang.html.

   Kontrast: #AFC800 auf Navy #0b1c30 = 8,8:1. Auf hellem Grund wären es
   1,6:1 — unlesbar. Sand kommt in diesem Block nicht vor: der Sand-Knopf im
   Kontaktabschluss darunter bleibt der einzige Akzent von ONE. */

@font-face {
  font-family: "TT Norms";
  src: url("../assets/fonts/TTNorms-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TT Norms";
  src: url("../assets/fonts/TTNorms-Medium.otf") format("opentype");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}

:root { --imo-font: "TT Norms", var(--f-display); }

/* ---------- Band ------------------------------------------------------- */

.imoband { background: var(--ink); color: #fff; padding-block: clamp(56px, 6vw, 88px); }
.imoband__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.imoband__say { max-width: 52ch; }
.imoband__logo { height: 26px; width: auto; display: block; }
.imoband__say h2 {
  font-family: var(--imo-font);
  font-size: var(--t-h2);
  /* TT Norms hat keinen Schnitt über Medium — 800 würde synthetisch fett
     gerendert. Deshalb 500 und dafür der engere Satz. */
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.02em;
  margin: 18px 0 14px;
}
.imoband__lead { font-size: var(--t-small); line-height: 1.7; color: rgba(255,255,255,.72); max-width: 46ch; }

.imoband__out {
  flex: 0 0 auto;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--imo);
  border-bottom: 1px solid rgba(175,200,0,.5);
  padding-bottom: 4px;
  transition: color .2s, border-color .2s;
}
.imoband__out:hover { color: #fff; border-bottom-color: #fff; }

/* ---------- Kennzahlen -------------------------------------------------- */

.imoband__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  margin-top: clamp(38px, 4vw, 56px);
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.imoband__kpi { padding: 26px 24px 0 0; }
.imoband__n {
  font-family: var(--imo-font);
  font-size: clamp(34px, 3.8vw, 54px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--imo);
}
.imoband__n small { font-size: .46em; letter-spacing: -.01em; }
/* Zwei der vier Zahlen tragen die Zeile „bis zu" über sich. Ohne Ausgleich
   stünden die anderen beiden um deren Höhe höher — die Reihe verlöre ihre
   gemeinsame Oberkante. Der Platzhalter reserviert genau diese Höhe. */
.imoband__n--flush::before { content: ""; display: block; height: 24px; }
.imoband__pre {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 10px;
}
.imoband__k { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.62); max-width: 20ch; }

/* Die absolute Tonnen-Zahl gibt es in den imopact-Unterlagen nicht: dort
   stehen nur Prozentwerte je Objekt, und ohne die Ausgangsverbräuche lässt
   sich daraus keine Tonnage rechnen. Die Spalte hält den Platz frei. */
.imoband__n.is-open { color: rgba(255,255,255,.4); }
.imoband__n.is-open span { border-bottom: 1px dashed rgba(255,255,255,.35); }

/* Fußnote unter dem Band: die Tonnage ist gerechnet, nicht gemessen. Das muss
   an der Zahl stehen, sonst liest sie sich wie eine Messung. */
.imoband__calc {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255,255,255,.5);
  max-width: 92ch;
}
.imoband__calc b { color: rgba(255,255,255,.72); font-weight: 500; }
.imoband__calc a { color: var(--imo); border-bottom: 1px solid rgba(175,200,0,.4); }

/* Zeile mit den belegten Objekten. Steht auf dem dunklen Grund, braucht also
   eigene Farben — die helle Notiz-Klasse der übrigen Seite trägt hier nicht. */
.imoband__ref { margin-top: 26px; font-size: var(--t-small); color: rgba(255,255,255,.62); }
.imoband__ref a { color: var(--imo); border-bottom: 1px solid rgba(175,200,0,.4); padding-bottom: 2px; }
.imoband__ref a:hover { color: #fff; border-bottom-color: #fff; }

/* Der Kontaktabschluss schließt ohne Kante an — eine Fläche, kein zweiter
   Block. Deshalb hier kein unterer Innenabstand und dort ein kleinerer oberer. */
.imoband + .pcta { padding-top: clamp(30px, 3vw, 48px); }

@media (max-width: 900px) {
  .imoband__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .imoband__grid { grid-template-columns: 1fr; }
  .imoband__kpi { padding-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); padding-bottom: 20px; }
}
