/* ===========================================================================
   fs94 · INSIGHTS-KIT — ein Bauplan, zwei Skins
   ---------------------------------------------------------------------------
   Diese Datei ist die GEMEINSAME Grundlage fuer zwei Oberflaechen:
     · Talent-Portal (talent/index.html + talent/talent.js)  -> heller Skin
     · Marken-Seite  (insights-view.*)                        -> dunkler Skin
   Beide bauen dieselben Bauteile in derselben Reihenfolge. Unterschiedlich ist
   NUR die Farbbelegung.

   DESHALB DIE EISERNE REGEL: jede Farbe steht als Custom Property im Block
   ".ikit { ... }" — sonst nirgends. Kein Hexwert weiter unten, auch nicht in
   rgba(): Farben, die in einer Regel kleben, ueberleben den Skin-Wechsel nicht.
   Der Block ".ikit[data-skin='dunkel']" belegt AUSSCHLIESSLICH diese Tokens neu
   und fasst keine einzige Regel an.

   Die Diagramme sind Inline-SVG und zeichnen mit currentColor bzw.
   var(--ikit-...). Ein hart eingebautes Violett im SVG wuerde den zweiten Skin
   sprengen — deshalb setzen die Klassen .ikit-farbe-1 / .ikit-farbe-2 nur
   "color", und das SVG erbt es.

   Alles ist auf .ikit gescoped. Nichts davon kann in eine andere Ansicht
   durchschlagen (Lehre aus dem Header-Glass-Leak).
   =========================================================================== */

.ikit {
  /* --- Flaechen und Linien ------------------------------------------------
     fs111: Der Grund ist WEISS. Instagram Insights ist ein weisses Blatt mit
     Haarlinien — kein graues Feld mit weissen Karten darauf. Yannik woertlich:
     „die talent seite sieht nicht aus wie instagram insights ... bitte die 1zu1
     kennzahlen im instagram design nur mit hellem hintergrund!"
     Der graue Ton bleibt als --ikit-spur fuer Balkenrinnen und Platzhalter. */
  --ikit-grund: #FFFFFF;
  --ikit-karte: #FFFFFF;
  --ikit-karte-2: #FBFCFD;
  --ikit-rand: #E8EAEF;
  --ikit-rand-2: #D0D5DD;
  --ikit-spur: #F2F4F7;

  /* --- Schrift ------------------------------------------------------------ */
  --ikit-text: #101828;
  /* fs102: Die Erklaertexte trugen die Ehrlichkeit der Seite ("aus 1 von 30 Tagen, an
     denen Instagram beide Werte geliefert hat") und waren mit #98A2B3 bei 2,42:1 der
     schlechteste Kontrast der ganzen Ansicht — weit unter AA (4,5:1). Die Rampe ist
     deshalb um eine Stufe nachgedunkelt, damit text-3 AA erreicht und die Abstufung
     zu text-2 trotzdem sichtbar bleibt.
     Gemessen auf #FFFFFF: text-2 5,88:1 · text-3 4,97:1. */
  --ikit-text-2: #5B6577;
  --ikit-text-3: #667085;

  /* --- Akzente MIT BEDEUTUNG ---------------------------------------------
     akzent   = Storys, Saeulen, Flaeche
     akzent-2 = Reels
     gruen/rot bleiben der VERAENDERUNG vorbehalten und werden nie fuer eine
     Kategorie benutzt. */
  --ikit-akzent: #7C3AED;
  --ikit-akzent-2: #EC4899;
  /* fs111: Sparsamer Umgang mit Farbe war die zweite Vorgabe („heute traegt jede
     zweite Flaeche Farbe, das wirkt klobig"). Violett bedeutet ab jetzt EINE
     Sache: ZIELGRUPPE (Alter, Geschlecht, Follower-Verlauf). Die Kennzahl-
     Abschnitte — erreichte Konten, Aufrufe, Interaktionen — zeichnen in
     Graphit. Damit ist Farbe wieder eine Aussage und keine Dekoration.
     Gemessen auf Weiss: 9,71:1. */
  --ikit-graphit: #344054;
  /* fs107: Nachgerechnet (WCAG, echte Relativluminanz gegen den tatsaechlichen Grund,
     nicht gegen Weiss): #12B76A auf dem gruenen Chip-Grund #ECFDF3 ergab 2,49:1 und
     #F04438 auf #FEF3F2 nur 3,46:1 — beide weit unter AA. Betroffen sind die
     Veraenderungs-Chips (im 30-Tage-Fenster stehen vier davon nebeneinander) und der
     Haken im Wartebildschirm. Jetzt 5,12:1 bzw. 5,29:1; auf Weiss 5,40:1.
     Die dunkle Fassung weiter unten war bereits in Ordnung und bleibt. */
  --ikit-gruen: #0B7A46;
  --ikit-rot: #C4271C;
  --ikit-gruen-weich: #ECFDF3;
  --ikit-rot-weich: #FEF3F2;

  /* --- Neutraler Abschnitt (z. B. "Keine Angabe" im Ring) ------------------
     Bewusst KEINE dritte Akzentfarbe: eine dritte Farbe wuerde so aussehen,
     als stuende eine dritte Bedeutung dahinter. */
  --ikit-neutral: #D0D5DD;

  /* --- Schatten und Ring --------------------------------------------------
     Auch der Schatten haengt an einem Token: rgba() traegt eine Farbe, und die
     muss im dunklen Skin eine andere sein. */
  --ikit-schatten-farbe: rgba(16, 24, 40, 0.04);
  --ikit-schatten: 0 1px 2px var(--ikit-schatten-farbe);
  --ikit-fokus: #101828;
  --ikit-puls-farbe: rgba(16, 24, 40, 0.06);
  --ikit-puls-farbe-2: rgba(16, 24, 40, 0.11);

  /* --- Aufbau ------------------------------------------------------------- */
  display: flex;
  flex-direction: column;
  /* fs111: 16 -> 28 px. „Viel Weissraum" war eine der drei Vorgaben, und mit
     Karten drumherum trug der Abstand vorher zwei Aufgaben gleichzeitig. Ohne
     Rahmen ist er das einzige Trennmittel und darf entsprechend gross sein. */
  gap: 28px;
  color: var(--ikit-text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;

  /* fs94: Das Kit malt seinen Grund SELBST.
     Vorher stand --ikit-grund zwar in beiden Token-Bloecken, wurde aber nur in
     talent/index.html benutzt (#insights-content .ikit). Fuer das Talent-Portal
     reichte das; fuer das Kit reicht es nicht. GEMESSEN: nimmt man diese Zeile
     weg und haengt das Kit irgendwo hin, wo die Seite darunter hell ist, hat der
     dunkle Skin dunkle Karten auf hellem Grund — bei 16px Abstand kaum zu sehen,
     bei groesseren Luecken nicht zu uebersehen (beides nachgestellt).
     Die Regel in index.html darf bleiben: gleiches Token, gleicher Wert, hoehere
     Spezifitaet — sie ergaenzt nur Innenabstand und Rundung. */
  background: var(--ikit-grund);
}

/* ===========================================================================
   DER ZWEITE SKIN — nur Tokens, keine Regeln.
   =========================================================================== */
.ikit[data-skin="dunkel"] {
  --ikit-grund: #0A0D14;   /* Gegenstueck zum weissen Grund oben */
  --ikit-karte: #12161F;
  --ikit-karte-2: #171C27;
  --ikit-rand: #242A36;
  --ikit-rand-2: #333B49;
  --ikit-spur: #1C222D;

  --ikit-text: #F5F6F8;
  /* fs102: dieselbe Rechnung fuer den dunklen Skin. #6B7484 lag auf der Karte (#12161F)
     bei 3,84:1. #7E8798 ergibt 5,00:1 auf der Karte und 5,37:1 auf dem Grund. */
  --ikit-text-2: #98A2B3;
  --ikit-text-3: #7E8798;

  --ikit-akzent: #A78BFA;
  --ikit-akzent-2: #F472B6;
  --ikit-graphit: #C3CAD6;
  --ikit-gruen: #32D583;
  --ikit-rot: #F97066;
  --ikit-gruen-weich: #10261C;
  --ikit-rot-weich: #2B1513;

  --ikit-neutral: #3A4353;

  --ikit-schatten-farbe: rgba(0, 0, 0, 0.45);
  --ikit-fokus: #F5F6F8;
  --ikit-puls-farbe: rgba(255, 255, 255, 0.05);
  --ikit-puls-farbe-2: rgba(255, 255, 255, 0.10);
}

/* ===========================================================================
   Grundzuege
   =========================================================================== */
.ikit * { box-sizing: border-box; }
.ikit h1, .ikit h2, .ikit h3, .ikit h4, .ikit p, .ikit ul, .ikit figure { margin: 0; }
.ikit ul { list-style: none; padding: 0; }
.ikit a { color: inherit; text-decoration: none; }
.ikit b, .ikit strong { font-weight: 700; }
.ikit svg { display: block; }

/* Ein MAUSKLICK darf keinen Rahmen hinterlassen. Der Ring gehoert der Tastatur.
   (Wiederkehrender Fund im Portal — hier von vornherein richtig.) */
.ikit button,
.ikit a { -webkit-tap-highlight-color: transparent; }
.ikit button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}
/* fs102: Im Ladegeruest ist die Zeitwahl stummgeschaltet — ohne diese Regel sah sie
   mit `cursor: pointer` klickbar aus. Einen [disabled]-Zustand gab es nur fuer .ikit-knopf. */
.ikit button[disabled] { cursor: default; }
.ikit button:focus { outline: none; }
.ikit button:focus-visible,
.ikit a:focus-visible {
  outline: 2px solid var(--ikit-fokus);
  outline-offset: 2px;
}

/* GEMESSEN: portal-facelift.css hat "h1, h2, h3 { color: var(--tt-text)
   !important }". Ohne Gegengewicht sind im dunklen Skin ALLE Kartenkoepfe
   unsichtbar (dunkel auf dunkel) und im hellen Skin still falsch eingefaerbt.
   Das ist der einzige Ort im Kit, an dem !important steht — und er steht hier
   gegen ein fremdes !important, nicht aus Bequemlichkeit. */
.ikit h1, .ikit h2, .ikit h3, .ikit h4 { color: var(--ikit-text) !important; }

/* Zahlen laufen nicht: gleiche Ziffernbreite, damit beim Umschalten des
   Zeitraums nichts zappelt. */

/* Karte — der eine Zuschnitt, aus dem alles gebaut ist. */
.ikit-karte {
  background: var(--ikit-karte);
  border: 1px solid var(--ikit-rand);
  border-radius: 14px;
  box-shadow: var(--ikit-schatten);
}

/* ===========================================================================
   1 · PROFILKOPF
   ---------------------------------------------------------------------------
   fs111: Instagram stellt den Avatar gross und direkt neben die drei Zahlen
   (Beitraege / Follower / Gefolgt). Genau so steht er jetzt hier — kein
   Kartenrahmen mehr, nur eine Haarlinie nach unten.
   GEMESSENE OBERGRENZE: Meta gibt ueber profile_picture_url einen Zuschnitt von
   206x206 heraus. 88 px sind dadurch 2,3-fach ueberabgetastet und scharf; alles
   ueber 206 px wird weich.
   =========================================================================== */
.igx-profil {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 4px 0 24px;
  border-bottom: 1px solid var(--ikit-rand);
}
.igx-profil-bild {
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ikit-spur);
  position: relative;
}
/* !important ist hier kein Komfort: portal-facelift.css setzt fuer mehrere
   Bildregeln height:auto !important. Ein Profilbild, das seine Groesse verliert,
   sprengt den ganzen Kopf (gemessen an genau dieser Stelle schon einmal
   passiert: 220x52 statt 19 px hoch). */
.igx-profil-bild .igx-profil-initialen { position: absolute; inset: 0; }
.igx-profil-bild img {
  position: relative;
  z-index: 1;
  width: 88px !important;
  height: 88px !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
/* Ersatz, wenn kein Bild da ist ODER die signierte Instagram-Adresse
   abgelaufen ist (onerror). Beides fuehrt zum selben Kreis mit Initialen. */
.igx-profil-initialen {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--ikit-text-2);
  background: var(--ikit-spur);
}
.igx-profil-text { min-width: 0; flex: 1 1 auto; padding-top: 2px; }
.igx-profil-name {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.3px;
  overflow-wrap: anywhere;
}
.igx-profil-handle {
  font-size: 14px;
  color: var(--ikit-text-2);
  margin-top: 2px;
}
/* Instagrams eigene Dreierzeile: Zahl fett, Wort daneben. */
.igx-profil-zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--ikit-text-2);
}
.igx-profil-zahl { display: inline-flex; gap: 5px; align-items: baseline; }
.igx-profil-zahl b {
  color: var(--ikit-text);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.igx-profil-bio {
  font-size: 13.5px;
  color: var(--ikit-text-2);
  margin-top: 12px;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.ikit .igx-profil-web {
  font-size: 13.5px;
  color: var(--ikit-akzent);
  margin-top: 4px;
  display: inline-block;
  overflow-wrap: anywhere;
}
.ikit .igx-profil-web:hover { text-decoration: underline; }
.igx-profil-art {
  font-size: 12.5px;
  color: var(--ikit-text-3);
  margin-top: 10px;
}
.igx-profil-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
  padding-top: 2px;
}

/* ===========================================================================
   Knoepfe
   =========================================================================== */
.ikit .ikit-knopf {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 8px;
  border: 1px solid var(--ikit-rand-2);
  background: var(--ikit-karte);
  color: var(--ikit-text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.ikit .ikit-knopf:hover { background: var(--ikit-karte-2); }
.ikit .ikit-knopf[disabled] { opacity: 0.65; cursor: default; }
.ikit .ikit-knopf-voll {
  background: var(--ikit-text);
  border-color: var(--ikit-text);
  color: var(--ikit-karte);
}
.ikit .ikit-knopf-voll:hover { background: var(--ikit-text); opacity: 0.9; }

/* AKTUALISIEREN: die Ansicht bleibt stehen, nur der Knopf zeigt Fortschritt.
   Ein feiner Streifen laeuft an der Unterkante durch — kein Ladeschirm, kein
   Springen, keine ausgetauschte Seite. */
.ikit .ikit-knopf-laeuft::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 40%;
  background: var(--ikit-akzent);
  border-radius: 2px;
  animation: ikitFortschritt 1.1s ease-in-out infinite;
}
@keyframes ikitFortschritt {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}

/* ===========================================================================
   2 · UEBERSICHT — Instagrams Kennzahlform
   ---------------------------------------------------------------------------
   fs111. Vorher stand hier ein Kennzahlstreifen mit 1px-Trennern, in dem drei
   von vier Kacheln erfundene Mittelwerte trugen. Jetzt: GROSSE Zahl, darunter
   das Wort, darunter der Vergleich zur Vorperiode und die Herkunft der Zahl.
   Kein Rahmen, keine Trennlinien — Instagram trennt mit Weissraum.
   =========================================================================== */
.igx-uebersicht {
  display: grid;
  /* GEMESSEN: bei minmax(210px) passten in die Panel-Breite nur drei Spalten —
     die vierte Kachel ("Follower") stand allein in einer zweiten Zeile und sah
     aus wie vergessen. Bei 150px stehen alle vier nebeneinander, so wie
     Instagram seine Uebersicht in eine Reihe legt. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 26px 24px;
}
/* Die Herkunftszeile sitzt bei allen vier Kacheln auf derselben Hoehe, auch wenn
   eine davon keinen Vergleichs-Chip hat (Follower hat nie einen — ein Stand hat
   keine Vorperiode). Ohne diese Zeile stand ihre Fussnote gemessen 32 px hoeher
   als die der drei Nachbarn und die Reihe wirkte ausgefranst. */
.igx-kachel { min-width: 0; display: flex; flex-direction: column; }
.igx-kachel .igx-kachel-fuss { margin-top: auto; padding-top: 8px; }
/* 20.08.2026 — GLEICHE MASSE WIE DIE MARKEN-SEITE.
   Vorgabe: dasselbe Bild in beiden Portalen, nur hell. Die Marken-Seite ist die
   Vorlage; ihre Werte stehen in insights-view.css: Zahl 26px/-0.6px, Wort
   12.5px in der Beschriftungsfarbe, Abschnittstitel 15px, Unterzeile 12px.
   Vorher hier: Zahl 34px/-0.8px, Wort 14px fett in der Textfarbe, Titel 17px —
   dadurch wirkte dieselbe Seite deutlich klobiger. */
.igx-kachel-wert {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.6px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.igx-kachel-wort {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ikit-text-2);
  margin-top: 3px;
  line-height: 1.35;
}
/* EINE Fussnote unter der ganzen Kachelreihe statt einer unter jeder Zahl —
   genauso macht es die Marken-Seite (.kpi-fuss). */
.igx-uebersicht-fuss {
  margin: 18px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ikit-text-3);
  max-width: 78ch;
}
.igx-kachel-chip { display: flex; align-items: center; gap: 7px; margin-top: 8px; flex-wrap: wrap; }
.igx-kachel-vgl { font-size: 12px; color: var(--ikit-text-3); }
/* Die Herkunftszeile stand bis fs107 im title-Attribut und war damit fuer
   Finger und Vorleseprogramm unerreichbar. Jetzt steht sie sichtbar da —
   sie traegt die Ehrlichkeit der Zahl ("nicht entdoppelt"). */
.igx-kachel-fuss {
  font-size: 11.5px;
  color: var(--ikit-text-3);
  margin-top: 0;
  line-height: 1.45;
}

/* Der Pflichthinweis fuer „12 Monate" und „Gesamt": jenseits von 90 Tagen
   spiegeln wir nicht mehr Instagram, sondern unsere eigene Fortschreibung. */
.igx-hinweis {
  border-left: 2px solid var(--ikit-akzent);
  padding: 2px 0 2px 14px;
  font-size: 12.5px;
  color: var(--ikit-text-2);
  line-height: 1.55;
  max-width: 62em;
}
.igx-hinweis b { color: var(--ikit-text); }
/* ===========================================================================
   3 · ZEITWAHL — Segmentleiste links, echter Datumsbereich rechts
   ---------------------------------------------------------------------------
   Steht ab fs111 ganz oben unter dem Profil. Die Knoepfe behalten die Klasse
   .ikit-seg: daran haengt die 44-pt-Regel aus fs104 weiter unten.
   =========================================================================== */
.igx-zeit {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ikit-seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--ikit-spur);
  border: 1px solid var(--ikit-rand);
  border-radius: 10px;
}
.ikit-seg button {
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ikit-text-2);
  white-space: nowrap;
}
.ikit-seg button:hover { color: var(--ikit-text); }
.ikit-seg button.an {
  background: var(--ikit-karte);
  color: var(--ikit-text);
  box-shadow: var(--ikit-schatten);
}
.ikit-zeitraum {
  font-size: 13px;
  color: var(--ikit-text-3);
  font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   4 · ABSCHNITTE UND BLOECKE
   ---------------------------------------------------------------------------
   fs111. Vorher: ein Raster aus 10 gerahmten Karten mit Schatten, alle
   gleichrangig, ohne Gliederung. Jetzt die Gliederung der Instagram-App —
   Uebersicht, Erreichte Konten, Aufrufe, Interaktionen, Zielgruppe, Inhalte.
   Ein Abschnitt traegt eine Ueberschrift und eine Haarlinie darueber; die
   Bloecke darin haben KEINEN Rahmen und KEINEN Schatten.
   =========================================================================== */
.igx-abschnitt { border-top: 1px solid var(--ikit-rand); padding-top: 26px; }
.igx-abschnitt-kopf { margin-bottom: 22px; }
.igx-abschnitt-titel {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.2px;
}
.igx-abschnitt-sub {
  font-size: 12px;
  color: var(--ikit-text-3);
  margin-top: 3px;
  line-height: 1.5;
  max-width: 78ch;
}
.igx-abschnitt-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px 32px;
  align-items: start;
}
/* Die Uebersicht ist selbst schon ein Raster — sie braucht kein zweites. */
.igx-abschnitt > .igx-uebersicht { margin: 0; }

.igx-block { min-width: 0; }
/* Blockueberschrift als kleine Versalzeile — genau wie .block h3 auf der
   Marken-Seite. Sie tritt zurueck, damit die Zahlen vortreten. */
.igx-block-titel {
  font-size: 12px;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ikit-text-2);
}
.igx-block-sub {
  font-size: 11.5px;
  color: var(--ikit-text-3);
  margin-top: 3px;
  line-height: 1.45;
}
.igx-block-inhalt { margin-top: 10px; }

/* --- Wertliste: Name links, Zahl rechts -----------------------------------
   Ohne Balken, mit Absicht: Kommentare, Antworten und Tipps auf
   Profil-Schaltflaechen sind an allen 90 Tagen gemessene 0. Ein Balkenbild
   waere dort leer; eine Liste sagt ehrlich "0". */
.igx-liste { display: flex; flex-direction: column; }
.igx-liste-zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid var(--ikit-rand);
  font-size: 13px;
}
.igx-liste-zeile:first-child { border-top: 0; padding-top: 0; }
.igx-liste-name { color: var(--ikit-text-2); min-width: 0; }
.igx-liste-wert { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.igx-hinweis-text { font-size: 13px; color: var(--ikit-text-2); line-height: 1.6; }

/* --- Waagerechte Balken (Top-Laender, Format, Follower/Nicht-Follower) ----- */
/* 20.08.2026 — MASSE EINS ZU EINS VON DER MARKEN-SEITE (insights-view.css):
   .bal margin 10px · .bal-k flex/space-between/baseline, gap 12, margin-bottom 6,
   13.5px · .bal-w fett, tabellarische Ziffern · .spur 5px hoch, Radius 3px.
   Vorher hier: Name 34 % fest, Balken 8 px hoch in der Restbreite, Wert rechts. */
.ikit-bal { display: block; }
.ikit-bal-zeile { display: block; margin-top: 10px; }
.ikit-bal-zeile:first-child { margin-top: 0; }
.ikit-bal-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 13.5px;
}
.ikit-bal-name {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ikit-text);
}
.ikit-bal-spur {
  display: block;
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: #dbdbdb;
  overflow: hidden;
}
.ikit-bal-fuell {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: currentColor;
}
.ikit-bal-wert {
  /* 20.08.2026 — MUSS EINE EIGENE FARBE HABEN. Die Fuellung der Balken nimmt
     sich ihre Farbe ueber currentColor von der Farbklasse am Behaelter. Ohne
     eigene Angabe erbte der WERT dieselbe Farbe und stand magenta neben dem
     Balken — auf der Marken-Seite ist er schwarz, nur der Balken ist farbig. */
  color: var(--ikit-text);
  flex: 0 0 auto;
  min-width: 52px;
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- Farbtraeger fuer die SVG und die Balken ------------------------------
     Die einzige Stelle, an der eine Bedeutung zur Farbe wird. */
.ikit-farbe-1 { color: var(--ikit-akzent); }
.ikit-farbe-2 { color: var(--ikit-akzent-2); }
.ikit-farbe-neutral { color: var(--ikit-neutral); }
/* fs111: die ruhige Farbe der Kennzahl-Abschnitte. Siehe --ikit-graphit oben. */
/* 20.08.2026 — DIE BALKENFARBE. Die Balken erben ihre Farbe von dieser Klasse.
   Sie stand auf Graphit (dunkles Navy), waehrend dieselben Balken auf der
   Marken-Seite magenta sind (--akzent #e93fcb). Damit sahen die beiden Seiten
   trotz gleicher Masse voellig verschieden aus. Jetzt dieselbe Farbe. */
.ikit-farbe-ruhig { color: #e93fcb; }

/* --- SVG-Bausteine -------------------------------------------------------- */
/* Abstand ueber einem Diagramm gehoert in die CSS, nicht als style= ins HTML. */
.ikit-diagramm { margin-top: 14px; }
.ikit-svg { width: 100%; height: auto; display: block; overflow: visible; }
.ikit-gitter { stroke: var(--ikit-rand); stroke-width: 1; }
.ikit-nulllinie { stroke: var(--ikit-rand-2); stroke-width: 1; }
.ikit-achse { fill: var(--ikit-text-3); font-size: 10px; font-variant-numeric: tabular-nums; }
.ikit-saeulenwert { fill: var(--ikit-text-2); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ikit-saeule { fill: currentColor; }
.ikit-linie { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ikit-punkt { fill: currentColor; }

/* --- Follower-Entwicklung ------------------------------------------------- */
.ikit-gross {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.6px;
  font-variant-numeric: tabular-nums;
}
.ikit-gross-zeile { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

/* --- Veraenderungs-Chip: gruen hoch, rot runter --------------------------- */
.ikit-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ikit-chip-auf { color: var(--ikit-gruen); background: var(--ikit-gruen-weich); }
.ikit-chip-ab { color: var(--ikit-rot); background: var(--ikit-rot-weich); }

/* --- Ringdiagramm + Legende ---------------------------------------------- */
.ikit-ring-reihe { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ikit-ring { flex: 0 0 116px; width: 116px; height: 116px; }
.ikit-ring-spur { fill: none; stroke: var(--ikit-spur); }
.ikit-ring-seg { fill: none; stroke: currentColor; }
.ikit-legende { display: flex; flex-direction: column; gap: 9px; min-width: 0; flex: 1 1 120px; }
.ikit-legende-zeile { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.ikit-legende-punkt {
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}
.ikit-legende-name { color: var(--ikit-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ikit-legende-wert { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
/* fs111: Die drei kleinen Kennzahlkaesten (.ikit-mini*) sind entfallen. Sie
   trugen die Karten "Storys" und "Reels", deren Zahlen jetzt in den Abschnitten
   "Erreichte Konten" und "Aufrufe" unter "Nach Inhaltsart" stehen — einmal
   statt zweimal. */

/* --- Beste Inhalte -------------------------------------------------------- */
.ikit-inhalte { display: flex; flex-direction: column; }
.ikit-inhalt-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--ikit-rand);
}
.ikit-inhalt-zeile:first-child { border-top: 0; padding-top: 0; }
.ikit-inhalt-bild {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ikit-spur);
  position: relative;
  font-size: 10px;
  color: var(--ikit-text-3);
}
.ikit-inhalt-art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2px; }
.ikit-inhalt-bild img {
  position: relative;
  z-index: 1;
  width: 44px !important;
  height: 44px !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
}
.ikit-inhalt-text { flex: 1 1 auto; min-width: 0; }
.ikit-inhalt-titel {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ikit-inhalt-datum { font-size: 12px; color: var(--ikit-text-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
.ikit-inhalt-werte { display: flex; gap: 14px; flex: 0 0 auto; }
.ikit-inhalt-wert { text-align: right; min-width: 62px; max-width: 76px; }
.ikit-inhalt-wert b { display: block; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ikit-inhalt-wert span { display: block; font-size: 11px; color: var(--ikit-text-3); margin-top: 1px; line-height: 1.25; }

/* ===========================================================================
   5 · FUSSLEISTE — fs111 ohne Kartenrahmen, nur eine Haarlinie darueber
   =========================================================================== */
.igx-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--ikit-rand);
  font-size: 12px;
  color: var(--ikit-text-3);
}
.igx-fuss-links { display: flex; align-items: center; gap: 8px; min-width: 0; }
.igx-fuss-links svg { width: 14px; height: 14px; flex: 0 0 14px; stroke: var(--ikit-text-3); fill: none; }
.igx-fuss-rechts { display: flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; }
.ikit-punkt-gruen {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ikit-gruen);
  flex: 0 0 7px;
}

/* ===========================================================================
   6 · ZWISCHENZUSTAENDE
   ---------------------------------------------------------------------------
   LADEN zeigt das GERUEST der fertigen Seite, nicht eine kleine Karte in einer
   leeren Flaeche. Dadurch springt beim Eintreffen der Zahlen nichts.
   =========================================================================== */
.ikit-puls {
  background: var(--ikit-puls-farbe);
  border-radius: 6px;
  animation: ikitPuls 1.6s ease-in-out infinite;
}
@keyframes ikitPuls {
  0%, 100% { background-color: var(--ikit-puls-farbe); }
  50%      { background-color: var(--ikit-puls-farbe-2); }
}
@media (prefers-reduced-motion: reduce) {
  .ikit-puls { animation-duration: 4s; }
  .ikit .ikit-knopf-laeuft::after { animation-duration: 3s; }
}
.ikit-puls-kreis { border-radius: 50%; }

/* Die mittige Karte fuer ERSTER ABGLEICH / NICHT FREIGESCHALTET / FEHLER /
   KEINE ZAHLEN — aus denselben Bauteilen, nur zentriert. */
.ikit-mitte {
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
  padding: 40px 34px 36px;
  text-align: center;
}
/* 20.08.2026 — DIE KARTE WIRKTE GEDRUNGEN. Gemessen am Vorherbild: zwischen
   Kreisel und Ueberschrift lagen 16 px, zwischen Ueberschrift und Text nur 8 px,
   und der Absatz lief ueber die volle Kartenbreite (rund 500 px bei 13,5 px
   Schrift). Dadurch stand alles als ein Block.
   NICHT die Zeilenlaenge begrenzen: ein Versuch mit max-width 42ch ergab drei
   kurze, ausgefranste Zeilen und sah schlechter aus. Die Karte selbst liefert bei
   560 px minus Polster rund 62 Zeichen — genau die bequeme Laenge. Geaendert wurden ausschliesslich Groessen und Abstaende — keine
   Schatten, keine Umrandungen, keine Fokusringe. */
.ikit-mitte-titel {
  font-size: 18px;
  font-weight: 700;
  margin-top: 22px;
  line-height: 1.35;
  letter-spacing: -0.2px;
  text-wrap: balance;
}
.ikit-mitte-text {
  font-size: 13.5px;
  color: var(--ikit-text-2);
  margin-top: 12px;
  line-height: 1.7;
  text-wrap: pretty;
}
.ikit-mitte-aktionen { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.ikit-mitte-liste { text-align: left; margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.ikit-mitte-liste li { font-size: 13px; color: var(--ikit-text-2); line-height: 1.55; }
.ikit-mitte-liste b { color: var(--ikit-text); }
.ikit-mitte-fein {
  font-size: 12.5px;
  color: var(--ikit-text-3);
  margin-top: 18px;
  line-height: 1.6;
  text-wrap: pretty;
}
.ikit-mitte-fehler { border-color: var(--ikit-rot); }
/* Muss das eigene !important von oben wieder schlagen — sonst waere der
   Fehlertitel schwarz wie jede andere Ueberschrift. */
.ikit .ikit-mitte-fehler .ikit-mitte-titel { color: var(--ikit-rot) !important; }

/* Kurze Fehlermeldung IM Schirm — z. B. wenn das Verbinden mit Instagram
   scheitert und die Karte stehen bleiben soll. */
.ikit-melde-fehler {
  margin-top: 16px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--ikit-rot);
  background: var(--ikit-rot-weich);
  color: var(--ikit-rot);
  font-size: 13px;
  line-height: 1.55;
  text-align: left;
  overflow-wrap: anywhere;
}
.ikit-melde-fehler b { display: block; margin-bottom: 3px; }

/* Dasselbe Logo wie in der Kopfzeile des Portals. !important, weil
   portal-facelift.css fuer jede Datei mit "truetalent-logo" im Namen
   height:auto !important setzt und damit jede Spezifitaet schlaegt. */
/* GEMESSEN, und zwar hier schon einmal schiefgegangen: portal-facelift.css hat
   "img[src*='truetalent-logo'] { height: auto !important }". Das ist
   Spezifitaet 0-1-1 — eine Klasse allein (0-1-0) verliert dagegen AUCH mit
   !important, und das Zeichen rendert in Originalgroesse (gemessen 220x52 statt
   18 px hoch). Deshalb ".ikit img.ikit-logo" (0-2-1). */
.ikit img.ikit-logo { height: 18px !important; width: auto !important; max-width: none !important; margin: 0 auto; display: block; }

.ikit-kreisel {
  width: 34px;
  height: 34px;
  margin: 0 auto;
  border-radius: 50%;
  border: 2.5px solid var(--ikit-rand);
  border-top-color: var(--ikit-akzent);
  animation: ikitDreh 0.85s linear infinite;
}
@keyframes ikitDreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ikit-kreisel { animation-duration: 2.6s; } }

.ikit-schritte { margin-top: 26px; text-align: left; display: inline-flex; flex-direction: column; gap: 11px; }
.ikit-schritt { display: flex; align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--ikit-text-3); }
.ikit-schritt.fertig { color: var(--ikit-text); }
.ikit-haken { flex: 0 0 15px; text-align: center; font-size: 12px; color: var(--ikit-gruen); opacity: 0; }
.ikit-schritt.fertig .ikit-haken { opacity: 1; }

/* ===========================================================================
   Schmale Fenster
   ---------------------------------------------------------------------------
   fs111: Die Regeln fuer den alten Kennzahlstreifen (.ikit-kpi mit senkrechten
   1px-Trennern, die auf schmalen Fenstern zu waagerechten umgebaut werden
   mussten) sind ersatzlos weg — es gibt keine Trenner mehr. Die Uebersicht ist
   ein schlichtes auto-fit-Raster und bricht von allein um.
   =========================================================================== */
@media (max-width: 620px) {
  .igx-uebersicht { grid-template-columns: repeat(2, 1fr); gap: 22px 20px; }
  .igx-kachel-wert { font-size: 26px; letter-spacing: -0.5px; }
  .igx-profil { flex-wrap: wrap; gap: 16px; }
  /* GEMESSEN, und es war die groesste verbliebene Unruhe beim Laden: ein
     Flex-Element bricht anhand seiner MAX-CONTENT-Breite um, nicht anhand der
     geschrumpften — `min-width: 0` verhindert das nicht. Die fertige Seite legte
     die Textspalte deshalb bei 390 px unter das Bild (Oberkante 88 px), das
     Ladegeruest mit seinen schmalen Platzhaltern daneben (Oberkante 4 px). Ergebnis:
     94 px Versatz bei genau der Breite, auf der die meisten Talents schauen.
     Mit flex-basis 100 % stapelt es IMMER — in beiden Zustaenden, unabhaengig
     davon, wie lang ein Name oder eine Biografie ist. */
  .igx-profil-text { flex-basis: 100%; }
  .igx-profil-aktionen { margin-left: 0; width: 100%; }
  /* overflow-x nur, wenn die Leiste wirklich nicht passt. Merksatz aus dem
     Projekt: sobald EINE Achse auf auto steht, schneidet der Browser auch die
     andere ab — hier steckt kein Menue drin, aber der Schatten der aktiven
     Taste braucht Luft. */
  .ikit-seg { width: 100%; overflow-x: auto; padding: 4px; }
  .igx-zeit { gap: 12px; }
  .ikit-inhalt-werte { gap: 10px; }
  .ikit-inhalt-wert { min-width: 50px; max-width: 62px; }
}
@media (max-width: 400px) {
  /* GEMESSEN: Meta gibt das Profilbild nur als 206x206 heraus. 68 px sind auch
     hier noch dreifach ueberabgetastet — die Schaerfe ist nicht das Problem,
     der Platz ist es. */
  .igx-profil-bild, .igx-profil-initialen { flex-basis: 68px; width: 68px; height: 68px; }
  .igx-profil-bild img { width: 68px !important; height: 68px !important; }
  .igx-profil-initialen { font-size: 22px; }
  .igx-profil-name { font-size: 20px; }
  .igx-profil-zahlen { gap: 16px; }
  .igx-uebersicht { grid-template-columns: 1fr; gap: 20px; }
  .igx-abschnitt-raster { grid-template-columns: 1fr; gap: 26px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   fs104 · DIE ZEITWAHL IST DER EINZIGE SCHALTER DER SEITE — UND WAR DER KLEINSTE
   ---------------------------------------------------------------------------
   fs96 hat am selben Tag jedes vergleichbare Bedienelement in beiden Portalen auf
   44 pt gehoben, den Insights-Reiter aber ausgeklammert („wird gerade umgebaut").
   Der Umbau (fs94/fs102) hat die Groessen dann nicht nachgeliefert: 7 Tage /
   30 Tage / 90 Tage / 12 Monate / Gesamt blieben rund 31 px hoch — auf einer
   Seite, deren einzige Bedienung genau diese fuenf Knoepfe sind.
   Gilt nur fuer Finger-Bedienung; am Rechner mit Maus bleibt die kompakte Leiste.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  .ikit .ikit-seg button {
    min-height: 44px;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Die beiden Kopfknoepfe (Aktualisieren, Verbindung trennen) im selben Massstab. */
  .ikit .ikit-knopf {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}


/* ===========================================================================
   20.08.2026 — DIE ZWEI REITER, Masse eins zu eins aus insights-view.css (.reiter)
   =========================================================================== */
.igx-reiter {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  border-top: 1px solid var(--ikit-rand);
  border-bottom: 1px solid var(--ikit-rand);
  margin-bottom: 22px;
}
.igx-reiter::-webkit-scrollbar { display: none; }
.igx-reiter button {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  /* 20.08.2026 — OHNE DAS WIRD AUS DEM UNTERSTRICH EINE SCHALE. Die Portal-Regeln
     geben JEDEM button eine Eckenrundung; der 2-px-Unterstrich uebernimmt sie und
     biegt sich an beiden Enden nach oben. Auch Schatten und Fokusringe kommen von
     dort und haben an einem Reiter nichts zu suchen. */
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none;
  padding: 13px 4px;
  margin-right: 32px;
  color: var(--ikit-text-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.igx-reiter button.an {
  color: var(--ikit-text);
  border-bottom-color: var(--ikit-text);
}